clients: Improve Product SVG based on pricing type

polarsource · Nov 5, 2024 · 1b842c0 · 1b842c0
1 parent 8813786
commit 1b842c0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 15 deletions.
diff --git a/clients/apps/web/src/app/embed/product.svg/route.tsx b/clients/apps/web/src/app/embed/product.svg/route.tsx
@@ -34,8 +34,8 @@ const getProduct = async (
 
 const render = async (
   product: Product,
-  cta: string,
-  darkmode: boolean,
+  cta?: string,
+  darkmode?: boolean,
 ) => {
   const inter500 = await fetch(
     new URL('../../../assets/fonts/Inter-Regular.ttf', import.meta.url),
@@ -97,7 +97,7 @@ export async function GET(request: Request) {
   }
 
   const darkmode = searchParams.has('darkmode')
-  const cta = searchParams.get('cta') ?? 'Purchase'
+  const cta = searchParams.get('cta')
 
   try {
     const product = await getProduct(productId, productPriceId)

diff --git a/clients/apps/web/src/components/Embed/ProductCard.tsx b/clients/apps/web/src/components/Embed/ProductCard.tsx
@@ -11,17 +11,45 @@ export const ProductCard = ({
   darkmode,
 }: {
   product: Product
-  cta: string
-  darkmode: boolean
+  cta?: string
+  darkmode?: boolean
 }) => {
   const price: ProductPrice = product.prices[0]
 
-  const recurringBillingLabel = ('recurring_interval' in price)
+  const isSubscription = ('recurring_interval' in price)
+  const isPWYW = price.amount_type === 'custom'
+  const recurringBillingLabel = isSubscription
     ? getRecurringBillingLabel(price.recurring_interval)
     : ''
 
+  if (!cta) {
+    cta = isSubscription ? 'Subscribe' : 'Buy'
+  }
+
   const cover = product.medias.length ? product.medias[0].public_url : null
 
+  let shownDescription = product.description
+  if (shownDescription && shownDescription.length > 100) {
+    shownDescription = shownDescription.slice(0, 100) + '...'
+  }
+
+  let priceLabel = null
+  switch (price.amount_type) {
+    case 'free':
+      priceLabel = 'Free'
+      break;
+    case 'custom':
+      priceLabel = 'Pay what you want'
+      break;
+    case 'fixed':
+      priceLabel = formatCurrencyAndAmount(
+        price.price_amount,
+        price.price_currency,
+        0,
+      )
+      break;
+  }
+
   return (
     <div
       key={product.id}
@@ -57,18 +85,13 @@ export const ProductCard = ({
           style={{
             display: 'flex',
             flexDirection: 'row',
+            color: darkmode ? '#4C5069' : '#333333',
             alignItems: 'flex-end',
             gap: 8,
-            fontSize: 32,
+            fontSize: isPWYW ? 20 : 36,
           }}
         >
-          {price.amount_type === 'fixed'
-            ? formatCurrencyAndAmount(
-                price.price_amount,
-                price.price_currency,
-                0,
-              )
-            : 'Pay what you want'}
+          {priceLabel}
           <div
             style={{
               fontSize: 14,
@@ -94,7 +117,7 @@ export const ProductCard = ({
             fontSize: 12,
           }}
         >
-          {product.description}
+          {shownDescription}
         </div>
       )}
       <div