clients/confirmation: add downloads to receipt

polarsource · Nov 5, 2024 · 57f784b · 57f784b
1 parent 0e9774b
commit 57f784b
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 9 deletions.
diff --git a/clients/apps/web/src/components/Checkout/CheckoutConfirmation.tsx b/clients/apps/web/src/components/Checkout/CheckoutConfirmation.tsx
@@ -2,9 +2,11 @@
 
 import { useAuth } from '@/hooks'
 import { useSendMagicLink } from '@/hooks/magicLink'
-import { useUserLicenseKeys } from '@/hooks/queries'
+import { useDownloadables, useUserLicenseKeys } from '@/hooks/queries'
 import { useCheckoutClientSSE } from '@/hooks/sse'
 import { api } from '@/utils/api'
+import { organizationPageLink } from '@/utils/nav'
+import { ArrowDownward } from '@mui/icons-material'
 import {
   BenefitPublicInner,
   CheckoutPublic,
@@ -139,14 +141,23 @@ export const CheckoutConfirmation = ({
     (benefit) => benefit.type === 'license_keys',
   )
 
+  const downloadablesBenefit = product.benefits.find(
+    (benefit) => benefit.type === 'downloadables',
+  )
+
   return (
     <ShadowBox className="flex w-full max-w-7xl flex-col items-center justify-between gap-y-24 md:px-32 md:py-24">
-      <div className="flex w-full max-w-sm flex-col gap-y-8">
-        <Avatar
-          className="h-16 w-16"
-          avatar_url={organization.avatar_url}
-          name={organization.name}
-        />
+      <div className="flex w-full max-w-md flex-col gap-y-8">
+        <Link
+          href={organizationPageLink(organization)}
+          className="flex self-start"
+        >
+          <Avatar
+            className="h-16 w-16"
+            avatar_url={organization.avatar_url}
+            name={organization.name}
+          />
+        </Link>
 
         <h1 className="text-2xl font-medium">
           {status === CheckoutStatus.CONFIRMED &&
@@ -197,6 +208,12 @@ export const CheckoutConfirmation = ({
                 </div>
               </ShadowBox>
             )}
+            {!!downloadablesBenefit && (
+              <ShadowBox className="flex flex-col gap-y-6">
+                <h3>Downloadables</h3>
+                <Downloadables publicBenefit={downloadablesBenefit} />
+              </ShadowBox>
+            )}
             {currentUser ? (
               <Link className="grow" href={disabled ? '#' : `/purchases`}>
                 <Button className="w-full" size="lg" disabled={disabled}>
@@ -252,9 +269,47 @@ const LicenseKey = ({
   }
 
   return (
-    <div className="flex flex-col gap-y-1">
+    <div className="flex flex-col gap-y-2">
       <span className="text-sm">{publicBenefit.description}</span>
       <CopyToClipboardInput value={licenseKey.key} />
     </div>
   )
 }
+
+const Downloadables = ({
+  publicBenefit,
+}: {
+  publicBenefit: BenefitPublicInner
+}) => {
+  const { data: downloadables } = useDownloadables(publicBenefit.id)
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      {downloadables?.items.map((downloadable) => {
+        return (
+          <div
+            key={downloadable.id}
+            className="dark:bg-polar-800 flex w-full flex-row items-center justify-between gap-x-6 rounded-full bg-white py-2 pl-4 pr-2"
+          >
+            <div className="flex w-full min-w-0 flex-col gap-y-1">
+              <span className="min-w-0 truncate text-sm">
+                {downloadable.file.name}
+              </span>
+            </div>
+            <div className="flex flex-row items-center gap-x-2">
+              <a
+                className="flex flex-row items-center gap-x-2"
+                href={downloadable.file.download.url}
+                download
+              >
+                <Button className="h-8 w-8" size="icon">
+                  <ArrowDownward fontSize="inherit" />
+                </Button>
+              </a>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/clients/apps/web/src/hooks/queries/downloadables.ts b/clients/apps/web/src/hooks/queries/downloadables.ts
@@ -4,7 +4,7 @@ import { api } from '@/utils/api'
 import { DownloadableRead, ListResourceDownloadableRead } from '@polar-sh/sdk'
 import { defaultRetry } from './retry'
 
-export const useDownloadables = (benefitId: string, activeFileIds: string[]) =>
+export const useDownloadables = (benefitId: string, activeFileIds: string[] = []) =>
   useQuery({
     queryKey: ['user', 'downloadables', benefitId, ...activeFileIds],
     queryFn: () =>
@@ -17,6 +17,10 @@ export const useDownloadables = (benefitId: string, activeFileIds: string[]) =>
             return response
           }
 
+          if (activeFileIds.length < 1) {
+            return response
+          }
+
           let lookup: { [key: string]: DownloadableRead } = {}
           const downloadables = response.items.reduce(
             (lookup, downloadable) => {