@coursebuilder/commerce-next/dist/post-purchase/welcome-page.js

Commerce Functionality for Course Builder with Next.js

'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import Image from 'next/image.js';
import Link from 'next/link.js';
import { useRouter } from 'next/navigation.js';
import MuxPlayer from '@mux/mux-player-react';
import { FileText } from 'lucide-react';
import { signIn } from 'next-auth/react';
import pluralize from 'pluralize';
import Balancer from 'react-wrap-balancer';
import * as InvoiceTeaser from '@coursebuilder/commerce-next/invoices/invoice-teaser';
import * as PurchaseTransfer from '@coursebuilder/commerce-next/post-purchase/purchase-transfer';
import InviteTeam from '@coursebuilder/commerce-next/team/invite-team';
import { first } from '@coursebuilder/nodash';
import { Button } from '@coursebuilder/ui';
import { Icon } from '../components';
export function WelcomePage({ product, productResources, purchase, existingPurchase, upgrade, providers, isGithubConnected, redemptionsLeft, isTransferAvailable, purchaseUserTransfers, hasCharge, userEmail, initiatePurchaseTransfer, cancelPurchaseTransfer, isDiscordConnected = false, welcomeVideoPlaybackId, welcomeVideoPosterImageUrl, }) {
    const router = useRouter();
    return (_jsx("main", { className: "mx-auto flex w-full flex-grow flex-col items-center justify-center py-16", id: "welcome", children: _jsxs("div", { className: "flex w-full max-w-screen-md flex-col gap-3", children: [_jsx(Header, { product: product, productResources: productResources, upgrade: upgrade, purchase: purchase, personalPurchase: purchase?.bulkCoupon ? existingPurchase : purchase, providers: providers, isGithubConnected: isGithubConnected, isDiscordConnected: isDiscordConnected }), _jsxs("div", { className: "flex flex-col gap-10", children: [welcomeVideoPlaybackId && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "pb-2 font-semibold uppercase tracking-wide", children: "Introduction" }), _jsx(MuxPlayer, { metadata: {
                                        video_title: `${product?.name} Welcome Video`,
                                    }, poster: welcomeVideoPosterImageUrl, className: "overflow-hidden rounded-md shadow-2xl shadow-black/30", playbackId: welcomeVideoPlaybackId })] })), redemptionsLeft && (_jsxs("div", { children: [_jsx("h2", { className: "text-primary pb-4 text-sm uppercase", children: "Invite your team" }), _jsx(InviteTeam, { disabled: !redemptionsLeft, purchase: purchase, existingPurchase: existingPurchase, userEmail: userEmail, className: "flex flex-col items-start gap-y-2" })] })), hasCharge && (_jsxs("div", { className: "border-b pb-5", children: [_jsx("h2", { className: "text-primary pb-4 text-sm uppercase", children: "Get your invoice" }), _jsxs(InvoiceTeaser.Root, { className: "flex w-full flex-row items-center justify-between sm:gap-10", purchase: purchase, children: [_jsxs(InvoiceTeaser.Link, { className: "flex w-full flex-col justify-between sm:flex-row sm:items-center", children: [_jsxs(InvoiceTeaser.Title, { className: "inline-flex items-center gap-2", children: [_jsx(FileText, { className: "h-4 w-4 opacity-75" }), _jsx("span", { className: "underline", children: product?.name })] }), _jsx(InvoiceTeaser.Metadata, {})] }), _jsx(InvoiceTeaser.Link, { className: "text-primary flex flex-shrink-0 hover:underline" })] })] })), isTransferAvailable && purchaseUserTransfers && (_jsxs("div", { children: [_jsx("h2", { className: "text-primary pb-4 text-sm uppercase", children: "Transfer this purchase to another email address" }), _jsxs(PurchaseTransfer.Root, { onTransferInitiated: async () => {
                                        router.refresh();
                                    }, purchaseUserTransfers: purchaseUserTransfers, cancelPurchaseTransfer: cancelPurchaseTransfer, initiatePurchaseTransfer: initiatePurchaseTransfer, children: [_jsxs(PurchaseTransfer.Available, { children: [_jsx(PurchaseTransfer.Description, {}), _jsxs(PurchaseTransfer.Form, { children: [_jsx(PurchaseTransfer.InputLabel, {}), _jsx(PurchaseTransfer.InputEmail, {}), _jsx(PurchaseTransfer.SubmitButton, {})] })] }), _jsxs(PurchaseTransfer.Initiated, { children: [_jsx(PurchaseTransfer.Description, {}), _jsx(PurchaseTransfer.Cancel, {})] }), _jsx(PurchaseTransfer.Completed, { children: _jsx(PurchaseTransfer.Description, {}) })] })] })), _jsxs("div", { children: [_jsx("h2", { className: "text-primary pb-4 text-sm uppercase", children: "Share" }), _jsx(Share, { productName: purchase.product?.name || 'this' })] })] })] }) }));
}
const Header = ({ upgrade, purchase, product, productResources, personalPurchase, providers = {}, isGithubConnected, isDiscordConnected = false, }) => {
    const githubProvider = providers.github;
    const discordProvider = providers.find((p) => p.id === 'discord');
    const firstResource = first(productResources);
    const getWelcomeMessageForProductType = (productType) => {
        if (productType === 'live') {
            return '';
        }
        if (upgrade) {
            return "You've Upgraded ";
        }
        return 'Welcome to ';
    };
    return (_jsx("header", { children: _jsxs("div", { className: "flex flex-col items-center gap-10 pb-8 sm:flex-row", children: [product?.fields.image && (_jsx("div", { className: "flex flex-shrink-0 items-center justify-center", children: _jsx(Image, { src: product.fields.image.url, alt: product.name, width: 250, height: 250 }) })), _jsxs("div", { className: "flex w-full flex-col items-center text-center sm:items-start sm:text-left", children: [_jsxs("h1", { className: "font-text w-full text-3xl font-bold sm:text-3xl lg:text-4xl", children: [_jsx("div", { className: "text-primary pb-2 text-sm font-normal uppercase", children: getWelcomeMessageForProductType(purchase?.product?.type) }), _jsx(Balancer, { children: purchase?.product?.name || 'a Thing' })] }), _jsx("div", { children: _jsxs("div", { className: "flex flex-wrap justify-center gap-3 pt-8 sm:justify-start", children: [personalPurchase && (_jsxs(_Fragment, { children: [product?.type === 'self-paced' && firstResource && (_jsx(Button, { asChild: true, children: _jsx(Link, { href: `/${pluralize(firstResource.type)}/${firstResource?.fields?.slug}`, children: "Start Learning" }) })), product?.type === 'cohort' && (_jsx(Button, { asChild: true, children: _jsx(Link, { href: `/${pluralize(product.type)}/${productResources?.[0]?.fields?.slug}`, children: "Start Learning" }) }))] })), discordProvider && !isDiscordConnected ? (_jsxs("button", { "data-discord-button": "", onClick: () => signIn(discordProvider.id, {
                                            callbackUrl: `${process.env.NEXT_PUBLIC_URL}/discord/redirect`,
                                        }), className: "flex w-full items-center justify-center gap-2 rounded bg-gray-800 px-5 py-1 text-sm text-white transition hover:brightness-110 sm:w-auto", children: [_jsx(Icon, { name: "Discord", size: "20" }), "Join ", discordProvider.name] })) : null, githubProvider && !isGithubConnected ? (_jsxs("button", { onClick: () => signIn(githubProvider.id), className: "flex w-full items-center justify-center gap-2 rounded bg-gray-800 px-5 py-3 text-lg font-semibold text-white shadow-xl shadow-black/10 transition hover:brightness-110 sm:w-auto", children: [_jsx(Icon, { name: "Github", size: "20" }), "Connect ", githubProvider.name] })) : null] }) })] })] }) }));
};
const Share = ({ productName, }) => {
    const tweet = `https://twitter.com/intent/tweet/?text=${productName} ${process.env.NEXT_PUBLIC_URL}`;
    return (_jsxs("div", { className: "flex flex-col justify-between gap-5 rounded border px-5 py-6 sm:flex-row sm:items-center", children: [_jsxs("p", { children: ["Tell your friends about ", process.env.NEXT_PUBLIC_SITE_TITLE, ",", ' ', _jsx("br", { className: "hidden sm:block" }), "it would help me to get a word out.", ' ', _jsx("span", { role: "img", "aria-label": "smiling face", children: "\uD83D\uDE0A" })] }), _jsx(Button, { asChild: true, variant: "outline", className: "flex items-center gap-2", children: _jsxs("a", { href: tweet, rel: "noopener noreferrer", target: "_blank", children: [_jsx(Icon, { name: "Twitter" }), " Share with your friends!"] }) })] }));
};