damus.io

damus.io website
git clone git://jb55.com/damus.io
Log | Files | Refs | README | LICENSE

CheckoutSuccess.tsx (3147B)

      1 import { ChevronRight, Copy } from "lucide-react";
      2 import { Button } from "@/components/ui/Button";
      3 import { useIntl } from "react-intl";
      4 import Link from "next/link";
      5 import { useState } from "react";
      6 import { QRCodeSVG } from 'qrcode.react';
      7 import { LNCheckout } from "./Types";
      8 import { AccountInfo } from "@/utils/PurpleUtils";
      9 import { usePurpleLoginSession } from "@/hooks/usePurpleLoginSession";
     10 
     11 export interface SuccessViewProps {
     12   existingAccountInfo: AccountInfo | null | undefined
     13   selectedAuthMethod: string
     14   lnCheckout: LNCheckout
     15   setError: (error: string) => void
     16 }
     17 
     18 export function CheckoutSuccess(props: SuccessViewProps) {
     19   const intl = useIntl()
     20   const [continueShowQRCodes, setContinueShowQRCodes] = useState<boolean>(false)  // Whether the user wants to show a QR code for the final step
     21   const { existingAccountInfo, selectedAuthMethod, lnCheckout } = props
     22   const { accountInfo: loggedInAccount, logout } = usePurpleLoginSession(props.setError)
     23 
     24   // MARK: - Functions
     25 
     26   // MARK: - Render
     27 
     28   return (<>
     29     {(selectedAuthMethod == "damus-ios" || loggedInAccount == null) ? (<>
     30       <Link
     31         href={existingAccountInfo !== null && existingAccountInfo !== undefined ? `damus:purple:landing` : `damus:purple:welcome?id=${lnCheckout.id}`}
     32         className="w-full text-sm flex justify-center"
     33       >
     34         <Button variant="default" className="w-full text-sm">
     35           {intl.formatMessage({ id: "purple.checkout.continue", defaultMessage: "Continue in the app" })}
     36           <ChevronRight className="ml-1" />
     37         </Button>
     38       </Link>
     39       <button className="w-full text-sm text-damuspink-500 flex justify-center" onClick={() => setContinueShowQRCodes(!continueShowQRCodes)}>
     40         {!continueShowQRCodes ?
     41           intl.formatMessage({ id: "purple.checkout.continue.show-qr", defaultMessage: "Show QR code" })
     42           : intl.formatMessage({ id: "purple.checkout.continue.hide-qr", defaultMessage: "Hide QR code" })
     43         }
     44       </button>
     45       {continueShowQRCodes && (
     46         <>
     47           <QRCodeSVG
     48             value={existingAccountInfo !== null && existingAccountInfo !== undefined ? "damus:purple:landing" : "damus:purple:welcome?id=" + lnCheckout.id}
     49             className="mt-6 w-[300px] h-[300px] max-w-full max-h-full mx-auto mb-6"
     50           />
     51         </>
     52       )}
     53       <div className="text-white/40 text-xs text-center mt-4 mb-6">
     54         {/* TODO: Localize later */}
     55         Issues with this step? Please ensure you are running the latest Damus iOS version — or <Link href="mailto:support@damus.io" className="text-damuspink-500 underline">contact us</Link>
     56       </div>
     57     </>)
     58     : selectedAuthMethod == "nostr-dm" && (
     59       <Link
     60         href={existingAccountInfo !== null && existingAccountInfo !== undefined ? "/purple/account" : "/purple/welcome"}
     61         className="w-full text-sm flex justify-center"
     62       >
     63         <Button variant="default" className="w-full text-sm">
     64           {intl.formatMessage({ id: "purple.checkout.continue.on-web", defaultMessage: "Continue" })}
     65           <ChevronRight className="ml-1" />
     66         </Button>
     67       </Link>
     68     )}
     69   </>)
     70 }