Add checkout methods and types

.gitignore

@@ -36,3 +36,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+/.vscode

app/[page]/page.tsx

@@ -1,52 +1,50 @@
 import type { Metadata } from 'next';
 
+import { PageProps } from '.next/types/app/page';
 import Prose from 'components/prose';
-import { CHECKOUT_PAGE_PROPS } from 'lib/constants';
 import { notFound } from 'next/navigation';
 
 export const runtime = 'edge';
 
 export const revalidate = 43200; // 12 hours
 
-export async function generateMetadata({
-  params
-}: {
-  params: { page: string };
-}): Promise<Metadata> {
-  let page;
-
-  params.page === 'checkout' && (page = CHECKOUT_PAGE_PROPS);
+export async function generateMetadata(page: PageProps): Promise<Metadata> {
+  const params = page.params;
 
   if (!page) return notFound();
 
   return {
-    title: page.title,
+    title: params.title,
     description: '',
     openGraph: {
-      publishedTime: page.createdAt,
-      modifiedTime: page.updatedAt,
+      publishedTime: params.createdAt || new Date(),
+      modifiedTime: params.updatedAt || new Date(),
       type: 'article'
     }
   };
 }
 
-export default async function Page({ params }: { params: { page: string } }) {
-  let page;
-
-  params.page === 'checkout' && (page = CHECKOUT_PAGE_PROPS);
+export default async function Page(page: PageProps) {
+  // params.page === 'checkout' && (page = CHECKOUT_PAGE_PROPS);
+  console.log(page)
+  const params = {
+    body: '',
+    updatedAt: new Date().toISOString(),
+    ...page.params
+  };
 
   if (!page) return notFound();
 
   return (
     <>
-      <h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
-      <Prose className="mb-8" html={page.body as string} />
+      <h1 className="mb-8 text-5xl font-bold">{params.title}</h1>
+      <Prose className="mb-8"  html={params.body as string} />
       <p className="text-sm italic">
         {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
           year: 'numeric',
           month: 'long',
           day: 'numeric'
-        }).format(new Date(page.updatedAt))}.`}
+        }).format(new Date(params.updatedAt))}.`}
       </p>
     </>
   );

app/checkout/page.tsx

@@ -0,0 +1,18 @@
+import { Suspense } from 'react';
+
+import Footer from 'components/layout/footer';
+
+export default async function ProductPage({ params }: { params: { handle: string } }) {
+
+  return (
+    <>
+      <div className="mx-auto max-w-screen-2xl px-4">
+        CHECK IT OUT
+
+      </div>
+      <Suspense>
+        <Footer />
+      </Suspense>
+    </>
+  );
+}

components/carousel.tsx

@@ -28,7 +28,6 @@ export async function Carousel() {
                   currencyCode: product.priceRange.maxVariantPrice.currencyCode
                 }}
                 src={product.featuredImage?.url}
-                fill
                 sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
               />
             </Link>

components/checkout/payment-stripe/index.tsx

@@ -0,0 +1,68 @@
+import { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';
+import {
+  StripeCardCvcElementOptions,
+  StripeCardExpiryElementOptions,
+  StripeCardNumberElementOptions
+} from '@stripe/stripe-js';
+import React, { useMemo } from 'react';
+
+const PaymentStripe: React.FC = () => {
+  const useOptions:
+    | StripeCardNumberElementOptions
+    | StripeCardExpiryElementOptions
+    | StripeCardCvcElementOptions = useMemo(() => {
+    return {
+      style: {
+        base: {
+          fontFamily: 'Inter, sans-serif',
+          color: '#424270',
+          padding: '10px 12px',
+          '::placeholder': {
+            color: '#CFD7E0'
+          }
+        }
+      }
+    };
+  }, []);
+
+  return (
+    <div>
+      <div className="relative flex w-full flex-col pb-6">
+        <CardNumber options={useOptions as StripeCardNumberElementOptions} />
+        <div className="relative mt-12 flex items-center gap-x-4">
+          <CardExpiry options={useOptions as StripeCardExpiryElementOptions} />
+          <CardCVC options={useOptions as StripeCardCvcElementOptions} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const CardNumber = ({ options }: { options: StripeCardNumberElementOptions }) => {
+  return (
+    <div className="relative border-b border-gray-200 py-2">
+      <span className="text-base-regular absolute -top-6 text-gray-700">Card number</span>
+      <CardNumberElement options={options} />
+    </div>
+  );
+};
+
+const CardExpiry = ({ options }: { options: StripeCardExpiryElementOptions }) => {
+  return (
+    <div className="relative w-full border-b border-gray-200 py-2">
+      <span className="text-base-regular absolute -top-6 text-gray-700">Expiration date</span>
+      <CardExpiryElement options={options} />
+    </div>
+  );
+};
+
+const CardCVC = ({ options }: { options: StripeCardCvcElementOptions }) => {
+  return (
+    <div className="relative w-full border-b border-gray-200 py-2">
+      <span className="text-base-regular absolute -top-6 text-gray-700">CVC</span>
+      <CardCvcElement options={{ ...options, placeholder: '123' }} />
+    </div>
+  );
+};
+
+export default PaymentStripe;

components/checkout/payment-test/index.tsx

@@ -0,0 +1,16 @@
+import Alert from '@modules/common/icons/alert';
+
+const PaymentTest = () => {
+  return (
+    <div className="w-full">
+      <div className="flex w-full items-center gap-x-2 bg-yellow-100 p-2">
+        <Alert size={16} className="text-yellow-700" />
+        <span className="text-small-regular text-yellow-700">
+          <span className="font-semibold">Attention:</span> For testing purposes only.
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentTest;

components/common/button/index.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import React from 'react';
+import Spinner from '../icons/spinner';
+
+type ButtonProps = {
+  isLoading?: boolean;
+  variant?: 'primary' | 'secondary';
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const Button = ({
+  children,
+  className,
+  isLoading = false,
+  variant = 'primary',
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      {...props}
+      className={clsx(
+        'text-small-regular flex min-h-[50px] w-full items-center justify-center border px-5 py-[10px] uppercase transition-colors duration-200 disabled:opacity-50',
+        {
+          'border-gray-900 bg-gray-900 text-white hover:bg-white hover:text-gray-900 disabled:hover:bg-gray-900 disabled:hover:text-white':
+            variant === 'primary',
+          'border-gray-920 bg-transparent text-gray-900 hover:bg-gray-100': variant === 'secondary'
+        },
+        className
+      )}
+    >
+      {isLoading ? <Spinner /> : children}
+    </button>
+  );
+};
+
+export default Button;

components/common/cart-totals/index.tsx

@@ -0,0 +1,59 @@
+import { Cart } from '@medusajs/medusa';
+import { formatAmount } from 'medusa-react';
+import React from 'react';
+
+type CartTotalsProps = {
+  cart: Omit<Cart, 'refundable_amount' | 'refunded_total'>;
+};
+
+const CartTotals: React.FC<CartTotalsProps> = ({ cart }) => {
+  const { subtotal, discount_total, gift_card_total, tax_total, shipping_total, total } = cart;
+
+  const getAmount = (amount: number | null | undefined) => {
+    return formatAmount({
+      amount: amount || 0,
+      region: cart.region,
+      includeTaxes: false
+    });
+  };
+
+  return (
+    <div>
+      <div className="text-small-regular text-gray-700">
+        <div className="text-base-regular mb-2 flex items-center justify-between text-gray-900">
+          <span>Subtotal</span>
+          <span>{getAmount(subtotal)}</span>
+        </div>
+        <div className="flex flex-col gap-y-1">
+          {!!discount_total && (
+            <div className="flex items-center justify-between">
+              <span>Discount</span>
+              <span>- {getAmount(discount_total)}</span>
+            </div>
+          )}
+          {!!gift_card_total && (
+            <div className="flex items-center justify-between">
+              <span>Gift card</span>
+              <span>- {getAmount(gift_card_total)}</span>
+            </div>
+          )}
+          <div className="flex items-center justify-between">
+            <span>Shipping</span>
+            <span>{getAmount(shipping_total)}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Taxes</span>
+            <span>{getAmount(tax_total)}</span>
+          </div>
+        </div>
+        <div className="my-4 h-px w-full border-b border-dashed border-gray-200" />
+        <div className="text-base-regular mb-2 flex items-center justify-between text-gray-900">
+          <span>Total</span>
+          <span>{getAmount(total)}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CartTotals;

components/common/checkbox/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+type CheckboxProps = {
+  checked?: boolean;
+  onChange?: () => void;
+  label: string;
+};
+
+const Checkbox: React.FC<CheckboxProps> = ({ checked = false, onChange, label }) => {
+  return (
+    <button
+      className="text-base-regular flex items-center gap-x-2"
+      role="checkbox"
+      type="button"
+      aria-checked={checked}
+      onClick={onChange}
+    >
+      <div
+        role="checkbox"
+        aria-checked={checked}
+        className="flex h-5 w-5 items-center justify-center border border-gray-900"
+      >
+        {checked ? '✓' : null}
+      </div>
+      <span>{label}</span>
+    </button>
+  );
+};
+
+export default Checkbox;

components/common/connect-form/index.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react';
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
+
+interface ConnectFormProps<TFieldValues extends FieldValues> {
+  children(children: UseFormReturn<TFieldValues>): ReactElement;
+}
+
+/**
+ * Utility component for nested forms.
+ */
+const ConnectForm = <TFieldValues extends FieldValues>({
+  children
+}: ConnectFormProps<TFieldValues>) => {
+  const methods = useFormContext<TFieldValues>();
+
+  return children({ ...methods });
+};
+
+export default ConnectForm;

components/common/hamburger/index.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import React from 'react';
+
+type HamburgerProps = {
+  setOpen: () => void;
+};
+
+const Hamburger: React.FC<HamburgerProps> = ({ setOpen }) => {
+  return (
+    <button className="relative h-10 w-10 focus:outline-none" onClick={setOpen}>
+      <span className="sr-only">Open main menu</span>
+      <div className="absolute left-1/2 top-1/2 block w-5 -translate-x-1/2  -translate-y-1/2 transform">
+        <span
+          aria-hidden="true"
+          className={clsx('absolute block h-0.5 w-5 -translate-y-1.5 rounded-sm bg-current ')}
+        ></span>
+        <span
+          aria-hidden="true"
+          className={clsx('absolute block  h-0.5 w-5 transform rounded-sm bg-current')}
+        ></span>
+        <span
+          aria-hidden="true"
+          className={clsx('absolute block  h-0.5 w-5 translate-y-1.5 rounded-sm bg-current')}
+        ></span>
+      </div>
+    </button>
+  );
+};
+
+export default Hamburger;

components/common/head/index.tsx

@@ -0,0 +1,22 @@
+import NextHead from 'next/head';
+import React from 'react';
+
+type HeadProps = {
+  title?: string;
+  description?: string | null;
+  image?: string | null;
+};
+
+const Head: React.FC<HeadProps> = ({ title, description, image }) => {
+  return (
+    <NextHead>
+      <title>{title} | ACME</title>
+      <meta itemProp="name" content={title} />
+      {description && <meta itemProp="description" content={description} />}
+      {image && <meta itemProp="image" content={image} />}
+      <link rel="icon" href="/favicon.ico" />
+    </NextHead>
+  );
+};
+
+export default Head;