UNPKG

@coursebuilder/commerce-next

Version:

Commerce Functionality for Course Builder with Next.js

154 lines (153 loc) 9.42 kB
'use client'; import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import * as React from 'react'; import { useRouter } from 'next/navigation'; import { Slot } from '@radix-ui/react-slot'; import { useForm, } from 'react-hook-form'; import { Button, Input } from '@coursebuilder/ui'; import { cn } from '@coursebuilder/ui/utils/cn'; const PurchaseTransferContext = React.createContext(undefined); export const PurchaseTransferProvider = ({ children, ...props }) => { return (_jsx(PurchaseTransferContext.Provider, { value: props, children: children })); }; export const usePurchaseTransfer = () => { const context = React.use(PurchaseTransferContext); if (context === undefined) { throw new Error('usePurchaseTransfer must be used within an PurchaseTransferProvider'); } return context; }; const PurchaseTransferStatusContext = React.createContext(undefined); export const PurchaseTransferStatusProvider = ({ children, ...props }) => { return (_jsx(PurchaseTransferStatusContext.Provider, { value: props, children: children })); }; export const usePurchaseTransferStatus = () => { const context = React.use(PurchaseTransferStatusContext); if (context === undefined) { throw new Error('usePurchaseTransferStatus must be used within an PurchaseTransferStatusProvider'); } return context; }; const Root = ({ children, asChild, className, ...props }) => { const Comp = asChild ? Slot : 'section'; return (_jsx(PurchaseTransferProvider, { ...props, children: _jsx(Comp, { className: cn('', className), children: props.purchaseUserTransfers.map((purchaseUserTransfer) => { return (_jsx(PurchaseTransferStatusProvider, { purchaseUserTransfer: purchaseUserTransfer, children: children }, purchaseUserTransfer.id)); }) }) })); }; const PurchaseTransferFormContext = React.createContext(undefined); export const PurchaseTransferFormProvider = ({ children, ...props }) => { return (_jsx(PurchaseTransferFormContext.Provider, { value: props, children: children })); }; export const usePurchaseTransferForm = () => { const context = React.use(PurchaseTransferFormContext); if (context === undefined) { throw new Error('usePurchaseTransferForm must be used within an PurchaseTransferFormProvider'); } return context; }; const Header = ({ children, className, }) => { return (_jsx("h2", { className: cn('text-primary pb-4 text-sm uppercase', className), children: children || 'Transfer this purchase to another email address' })); }; const Form = ({ className, children, }) => { const { initiatePurchaseTransfer } = usePurchaseTransfer(); const { purchaseUserTransfer } = usePurchaseTransferStatus(); const { register, handleSubmit, watch, reset, formState: { errors }, } = useForm(); const router = useRouter(); const onSubmit = async (data) => { if (!purchaseUserTransfer) { throw new Error('No purchaseUserTransfer found'); } await initiatePurchaseTransfer({ email: data.email, purchaseUserTransferId: purchaseUserTransfer.id, }); router.refresh(); }; return (_jsx(PurchaseTransferFormProvider, { register: register, handleSubmit: handleSubmit, onSubmit: onSubmit, errors: errors, watch: watch, children: _jsx("form", { className: cn('mt-3 flex w-full flex-col gap-2 text-left md:flex-row', className), onSubmit: handleSubmit(onSubmit), children: children || (_jsxs(_Fragment, { children: [_jsx(InputLabel, {}), _jsx(InputEmail, {}), _jsx(SubmitButton, {})] })) }) })); }; // form elements const InputError = ({ children }) => { return _jsx("span", { children: children }); }; const InputLabel = ({ children, className, }) => { return (_jsx("label", { htmlFor: "email", className: cn('sr-only', className), children: children || 'Email' })); }; const InputEmail = ({ className }) => { const { register } = usePurchaseTransferForm(); return (_jsx(Input, { className: cn('w-full', className), type: "email", ...register('email', { required: true }), placeholder: "somebody@example.com" })); }; const SubmitButton = ({ className, ...props }) => { const { purchaseUserTransfer } = usePurchaseTransferStatus(); const { errors, watch } = usePurchaseTransferForm(); return (_jsxs(_Fragment, { children: [_jsx(Button, { className: cn('', className), type: "submit", variant: "secondary", disabled: !purchaseUserTransfer || watch('email') === '', ...props, children: "Transfer" }), errors.email && _jsx(InputError, { children: "This field is required" })] })); }; const Title = ({ children, asChild, className, }) => { const Comp = asChild ? Slot : 'h2'; const { purchaseUserTransfer } = usePurchaseTransferStatus(); const STATE = purchaseUserTransfer.transferState; const getTextForStatus = (state) => { switch (state) { case 'AVAILABLE': return 'Transfer this purchase to another email address'; break; case 'INITIATED': return null; break; case 'COMPLETED': return null; default: return null; break; } }; return (_jsx(Comp, { className: cn('text-2xl font-medium', className), children: children || getTextForStatus(STATE) })); }; const Description = ({ children, className, }) => { const { purchaseUserTransfer } = usePurchaseTransferStatus(); const STATE = purchaseUserTransfer.transferState; const getDescriptionForStatus = (state) => { switch (state) { case 'AVAILABLE': return (_jsxs(_Fragment, { children: [_jsx("p", { children: "You can transfer your purchase to another email address. We recommend using a personal/permanent email address. Once the transfer is complete you will no longer have access to the content or associated invoices from this account for this purchase." }), _jsx("p", { children: "Only a single email transfer is provided per purchase as a courtesy!" })] })); break; case 'INITIATED': return (_jsx("p", { children: "This purchase is being transferred. Once accepted you will no longer have access to this purchase or its associated invoice. You can cancel the transfer at any time before it is accepted or expires." })); break; case 'COMPLETED': return (_jsx("p", { children: "This purchase has been transferred. You no longer have access to this purchase or its associated invoice." })); default: return null; break; } }; return (_jsx("div", { className: cn('prose w-full max-w-none', className), children: children || getDescriptionForStatus(STATE) })); }; const Cancel = ({ className }) => { const { cancelPurchaseTransfer } = usePurchaseTransfer(); const { purchaseUserTransfer } = usePurchaseTransferStatus(); const router = useRouter(); return (_jsx(Button, { className: cn('mt-3', className), variant: "destructive", onClick: async () => { await cancelPurchaseTransfer({ purchaseUserTransferId: purchaseUserTransfer.id, }); router.refresh(); }, children: "Cancel Transfer" })); }; const Available = ({ children, className, }) => { const { purchaseUserTransfer } = usePurchaseTransferStatus(); const STATE = purchaseUserTransfer.transferState; return STATE === 'AVAILABLE' ? (_jsx("div", { className: cn('', className), children: children || (_jsxs(_Fragment, { children: [_jsx(Title, { children: "Transfer this purchase to another email address" }), _jsxs(Description, { children: [_jsx("p", { children: "You can transfer your purchase to another email address. We recommend using a personal/permanent email address. Once the transfer is complete you will no longer have access to the content or associated invoices from this account for this purchase." }), _jsx("p", { children: "Only a single email transfer is provided per purchase as a courtesy!" })] }), _jsx(Form, {}, purchaseUserTransfer.id)] })) })) : null; }; const Initiated = ({ children }) => { const { purchaseUserTransfer } = usePurchaseTransferStatus(); const { cancelPurchaseTransfer } = usePurchaseTransfer(); const STATE = purchaseUserTransfer.transferState; const router = useRouter(); return STATE === 'INITIATED' ? (_jsx(_Fragment, { children: children || (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mb-3 text-2xl font-bold", children: "This purchase is being transferred. Once accepted you will no longer have access to this purchase or its associated invoice. You can cancel the transfer at any time before it is accepted or expires." }), _jsx(Cancel, {})] })) })) : null; }; const Completed = ({ children }) => { const { purchaseUserTransfer } = usePurchaseTransferStatus(); const STATE = purchaseUserTransfer.transferState; return STATE === 'COMPLETED' ? (_jsx(_Fragment, { children: children || (_jsx("p", { className: "text-balance", children: "This purchase has been transferred. You no longer have access to this purchase or its associated invoice." })) })) : null; }; export { Root, Header, Form, Completed, Initiated, Available, Title, Description, Cancel, InputLabel, InputEmail, SubmitButton, };