Merge branch 'main' into ng/include-balance-transactions

skillrecordings · Oct 23, 2024 · 66639c1 · 66639c1
2 parents 4f6af97 + df0c185
commit 66639c1
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 40 deletions.
diff --git a/apps/epic-react/src/components/app/navigation/index.tsx b/apps/epic-react/src/components/app/navigation/index.tsx
@@ -182,15 +182,6 @@ const Navigation: React.FC<NavigationProps> = ({
             relative: !isNavigationFixed,
           },
         )}
-        style={{
-          translateY: isShowingSiteBanner
-            ? enableScrollAnimation
-              ? scrollDirection === 'up' || !scrollDirection
-                ? bannerHeight
-                : 0
-              : bannerHeight
-            : 0,
-        }}
       >
         <motion.nav
           aria-label="top"
@@ -832,11 +823,15 @@ export const Banner: React.FC<{
       style={{
         height: bannerHeight,
       }}
-      className={cn(`fixed left-0 top-0 z-[60] w-full transition`, className, {
-        '-translate-y-full':
-          scrollDirection === 'down' && enableScrollAnimation,
-        'translate-y-0': scrollDirection === 'up' && enableScrollAnimation,
-      })}
+      className={cn(
+        `fixed left-0 top-[49px] z-40 w-full transition`,
+        className,
+        {
+          '-translate-y-full opacity-0':
+            scrollDirection === 'down' && enableScrollAnimation,
+          'translate-y-0': scrollDirection === 'up' && enableScrollAnimation,
+        },
+      )}
     >
       {currentSale && productOnSale ? (
         <Link

diff --git a/apps/epic-web/src/lib/workshops.ts b/apps/epic-web/src/lib/workshops.ts
@@ -355,6 +355,7 @@ export const getWorkshop = async (slug: string) =>
         // get product that includes current workshop and has
         // the largest number of modules so we can assume it's a bundle
         'product': *[_type == 'product' && references(^._id)] | order(count(modules) asc)[0]{
+          _id,
           "name": title,
           "slug": slug.current,
           productId,

diff --git a/apps/epic-web/src/pages/api/og/default.ts b/apps/epic-web/src/pages/api/og/default.ts
@@ -1,25 +1,65 @@
 import {SanityProduct} from '@skillrecordings/commerce-server/dist/@types'
 import {getSdk} from '@skillrecordings/database'
 import {getPricing} from '@skillrecordings/skill-lesson/lib/pricing'
+import {getAllProducts} from '@skillrecordings/skill-lesson/lib/products'
+import {getProduct, type Product} from 'lib/products'
+import {getWorkshop} from 'lib/workshops'
 import {NextApiRequest, NextApiResponse} from 'next'
 
 const contextualShareCard = async (
   req: NextApiRequest,
   res: NextApiResponse,
 ) => {
   try {
+    const searchParams = new URLSearchParams(req.query as any)
+    const hasResource = searchParams.has('resource')
+    const resourceSlugOrId = searchParams.get('resource')
+    let resource
+
+    if (resourceSlugOrId) {
+      resource = await getWorkshop(resourceSlugOrId)
+    }
+
+    const productId = resource ? resource.product.productId : undefined
+
+    let products
+    let defaultCoupon
+
     const {getDefaultCoupon} = getSdk()
-    const pricing = await getPricing('primary')
-    const products = pricing.products
-    const defaultCoupons = await getDefaultCoupon(
-      products.map((product: SanityProduct) => product.productId),
-    )
-    const currentProduct = products[0]
-    const defaultCoupon = defaultCoupons?.defaultCoupon
+
+    if (productId) {
+      // if we have a productId, we only need to
+      // fetch that product and its default coupon
+      products = [await getProduct(productId)]
+      const defaultCoupons = await getDefaultCoupon(
+        products.map((product: Product) => {
+          return product.upgradableTo?.[0].productId
+        }),
+      )
+      defaultCoupon = defaultCoupons?.defaultCoupon
+    } else {
+      products = await getAllProducts()
+      const defaultCoupons = await getDefaultCoupon(
+        products.map((product: Product) => product.productId),
+      )
+      defaultCoupon = defaultCoupons?.defaultCoupon
+    }
+
+    // const defaultCoupon = {
+    //   percentageDiscount: 0.25,
+    //   expires: '2024-11-26T00:00:00.000Z',
+    // }
+
     const url = defaultCoupon
-      ? currentProduct.state === 'active'
-        ? `${process.env.NEXT_PUBLIC_URL}/api/og/generate-default?percentageDiscount=${defaultCoupon.percentageDiscount}`
-        : `${process.env.NEXT_PUBLIC_URL}/api/og/generate-default`
+      ? `${
+          process.env.NEXT_PUBLIC_URL
+        }/api/og/generate-default?percentageDiscount=${
+          defaultCoupon.percentageDiscount
+        }${resource ? `&image=${resource.ogImage}` : ''}${
+          defaultCoupon?.product?.name
+            ? `&productName=${defaultCoupon.product.name}`
+            : ''
+        }`
       : `${process.env.NEXT_PUBLIC_URL}/api/og/generate-default`
 
     const response = await fetch(url, {

diff --git a/apps/epic-web/src/pages/api/og/generate-default.tsx b/apps/epic-web/src/pages/api/og/generate-default.tsx
@@ -26,32 +26,50 @@ export default async function handler(req: NextRequest) {
     const image = searchParams.get('image')
     const hasType = searchParams.has('type')
     const type = hasType ? searchParams.get('type') : ''
+    const productName = searchParams.get('productName')
 
     if (hasPercentageDiscount) {
+      const productName = searchParams.get('productName')
       const percentageDiscount = searchParams.get('percentageDiscount')
-      const backgroundImageUrl =
-        'https://res.cloudinary.com/epic-web/image/upload/v1696939073/default-gen-share-card-bg_2x.png'
+      const backgroundImageUrl = image
+        ? image
+        : 'https://res.cloudinary.com/epic-web/image/upload/v1729601045/card-root-sale_2x.jpg'
 
       return new ImageResponse(
         (
           <div
-            tw="flex w-full relative justify-center text-white items-center h-full pl-16 justify-between"
+            tw="flex w-full relative text-white items-center h-full justify-center"
             style={{
               fontFamily: 'DM Sans',
               backgroundImage: `url(${backgroundImageUrl})`,
             }}
           >
-            <div
-              tw="flex text-black items-center absolute justify-center"
-              style={{
-                fontSize: 40,
-                bottom: 95,
-                left: 117,
-                fontFamily: 'DM Sans Bold',
-              }}
-            >
-              Save {percentageDiscount * 100}%
-            </div>
+            {image ? (
+              <div
+                tw="flex px-3 rounded text-black bg-orange-300 items-center absolute justify-center"
+                style={{
+                  fontSize: 38,
+                  top: 50,
+                  right: 50,
+                  fontFamily: 'DM Sans Bold',
+                }}
+              >
+                Special Offer ・ Save {percentageDiscount * 100}%
+              </div>
+            ) : (
+              <div
+                tw="flex text-black items-center rounded px-4 py-2 bg-[#BFFDF7] absolute justify-center"
+                style={{
+                  fontSize: productName ? 35 : 40,
+                  bottom: 95,
+
+                  fontFamily: 'DM Sans Bold',
+                }}
+              >
+                Save {percentageDiscount * 100}%
+                {productName && ` on ${productName}`}
+              </div>
+            )}
           </div>
         ),
         {
@@ -74,7 +92,7 @@ export default async function handler(req: NextRequest) {
         <div
           tw="flex w-full relative h-full"
           style={{
-            backgroundImage: `url(${process.env.NEXT_PUBLIC_URL}/card@2x.png)`,
+            backgroundImage: `url(https://res.cloudinary.com/epic-web/image/upload/v1729600372/card-root-oct-24_2x.jpg)`,
           }}
         />
       ),

diff --git a/apps/epic-web/src/templates/workshop-template.tsx b/apps/epic-web/src/templates/workshop-template.tsx
@@ -83,7 +83,9 @@ const WorkshopTemplate: React.FC<{
         title: pageTitle,
         description,
         ogImage: {
-          url: ogImage,
+          url: `${
+            process.env.NEXT_PUBLIC_URL
+          }/api/og/default?resource=${encodeURI(workshop.slug.current)}`,
           alt: pageTitle,
         },
       }}