Merge branch 'main' into jbranchaud/sks-86-move-paymentoptions-and-pa…

…ymentprovider-pieces-into-commerce

apps/epic-react/src/components/pricing-section.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import type {
+  CommerceProps,
+  SanityProduct,
+  SanityProductModule,
+} from '@skillrecordings/commerce-server/dist/@types'
+import {PricingTiers} from '@skillrecordings/skill-lesson/path-to-purchase/product-tiers'
+
+const PRODUCT_BASIC_ID = 'kcd_910c9191-5a69-4019-ad1d-c55bea7e9714'
+const PRODUCT_STANDARD_ID = 'kcd_8acc60f1-8c3f-4093-b20d-f60fc6e0cf61'
+const PRODUCT_PRO_ID = 'kcd_2b4f4080-4ff1-45e7-b825-7d0fff266e38'
+
+const productsSortOrder: {[key: string]: number} = {
+  [PRODUCT_BASIC_ID]: 1,
+  [PRODUCT_PRO_ID]: 2,
+  [PRODUCT_STANDARD_ID]: 3,
+}
+
+const removeModuleBySlug = (
+  products: any[],
+  slugToRemove: string,
+): SanityProduct[] => {
+  return products.map((product) => {
+    return {
+      ...product,
+      modules:
+        product?.modules &&
+        product.modules.filter(
+          (module: SanityProductModule) => module.slug !== slugToRemove,
+        ),
+    }
+  })
+}
+
+const PricingSection: React.FC<{
+  commerceProps: CommerceProps
+  className?: string
+}> = ({
+  commerceProps: {
+    couponFromCode,
+    products,
+    userId,
+    purchases = [],
+    couponIdFromCoupon,
+    allowPurchase,
+  },
+  className,
+}) => {
+  const sortedProducts = [...products].sort(
+    (a, b) => productsSortOrder[a.productId] - productsSortOrder[b.productId],
+  )
+  const filteredProducts = removeModuleBySlug(
+    sortedProducts,
+    'welcome-to-epic-react',
+  )
+  return (
+    <div className="relative z-0">
+      <div className="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
+        <PricingTiers
+          products={filteredProducts}
+          userId={userId}
+          purchases={purchases}
+          couponIdFromCoupon={couponIdFromCoupon}
+          couponFromCode={couponFromCode}
+          allowPurchase={true}
+          // allowPurchase={allowPurchase}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PricingSection

apps/epic-react/src/lib/products.ts

@@ -70,7 +70,7 @@ export const getAllProducts = async () => {
       title,
       moduleType,
       "slug": slug.current,
-      "image": {"url": image.secure_url},
+      "image": {"url": image.url},
       state,
     },
     "bonuses": *[_type == 'bonus'][]{...},

apps/epic-react/src/pages/buy.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import {GetServerSideProps} from 'next'
+import {propsForCommerce} from '@skillrecordings/commerce-server'
+import {getToken} from 'next-auth/jwt'
+import Balancer from 'react-wrap-balancer'
+
+import {getAllProducts} from '@/lib/products'
+import Layout from '@/components/app/layout'
+import PricingSection from '@/components/pricing-section'
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const {req, query} = context
+  const token = await getToken({req})
+  const products = await getAllProducts()
+  const {props: commerceProps} = await propsForCommerce({
+    query,
+    token,
+    products,
+  })
+
+  return {
+    props: {
+      commerceProps,
+    },
+  }
+}
+
+const Buy: React.FC<any> = ({commerceProps}) => {
+  return (
+    <Layout meta={{title: 'Buy'}}>
+      <main className="bg-er-gray-100 pb-24 pt-20 sm:pt-28 md:pt-32 lg:pt-40 xl:pt-[211px]">
+        <div className="space-y-5 text-center">
+          <h1 className="pb-4 text-4xl font-extrabold leading-9 text-text sm:text-[2.75rem] sm:leading-10 lg:text-[3.5rem] lg:leading-none">
+            <Balancer>Get Really Good At React</Balancer>
+          </h1>
+          <h2 className="mx-auto max-w-4xl text-xl text-react sm:text-2xl">
+            <Balancer>
+              The beautiful thing about learning is that nobody can take it away
+              from you.
+            </Balancer>
+          </h2>
+        </div>
+        <div className="mt-16 lg:mt-32">
+          <PricingSection
+            commerceProps={commerceProps}
+            className="mb-28 mt-12 md:mt-14 lg:mb-32 lg:mt-16"
+          />
+        </div>
+      </main>
+    </Layout>
+  )
+}
+
+export default Buy