Order checkout process implemented without validations

theme/dap/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css

@@ -0,0 +1,7 @@
+.root {
+  min-height: calc(100vh - 322px);
+}
+
+.lineItemsList {
+  @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2;
+}

theme/dap/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -0,0 +1,124 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import { FC } from 'react'
+import CartItem from '@components/cart/CartItem'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'
+import ShippingWidget from '@components/checkout/ShippingWidget'
+import PaymentWidget from '@components/checkout/PaymentWidget'
+import SidebarLayout from '@components/common/SidebarLayout'
+import s from './CheckoutSidebarView.module.css'
+import { transitionOrderToStateMutation } from '@framework/utils/mutations/transition-order-to-state-mutation'
+import { addPaymentToOrderMutation } from '@framework/utils/mutations/add-payment-to-order-mutation'
+import request from '@commerce/utils/request'
+
+const CheckoutSidebarView: FC = () => {
+  const { setSidebarView, closeSidebarIfPresent } = useUI()
+  const { data } = useCart()
+
+  const { price: subTotal } = usePrice(
+    data && {
+      amount: Number(data.subtotalPrice),
+      currencyCode: data.currency.code,
+    }
+  )
+  const { price: total } = usePrice(
+    data && {
+      amount: Number(data.totalPrice),
+      currencyCode: data.currency.code,
+    }
+  )
+  
+  const transitionOrderToState = async () => {
+    const data = await request({
+      query: transitionOrderToStateMutation,
+      variables: {
+        state: 'ArrangingPayment'
+      }
+    })
+    console.log(data, 777)
+  }
+  const addPaymentToOrder = async () => {
+    const data = await request({
+      query: addPaymentToOrderMutation,
+      variables: {
+        input: {
+          "method": "cash",
+          "metadata": "{id:'nagyt pull'}"
+        }
+      }
+    })
+  }
+  const handleConfirmPurchase = async (e: React.SyntheticEvent<EventTarget>) => {
+    e.preventDefault()
+
+    try {
+      await transitionOrderToState()
+      await addPaymentToOrder()
+      closeSidebarIfPresent()
+      console.log('Purchased')
+    } catch ({ errors }) {
+      console.log(errors, 444)
+    }
+  }
+  return (
+    <SidebarLayout
+      className={s.root}
+      handleBack={() => setSidebarView('CART_VIEW')}
+    >
+      <div className="px-4 sm:px-6 flex-1">
+        <Link href="/cart">
+          <Text variant="sectionHeading">Checkout</Text>
+        </Link>
+
+        {/* <PaymentWidget onClick={() => setSidebarView('PAYMENT_VIEW')} /> */}
+        <ShippingWidget onClick={() => setSidebarView('SHIPPING_VIEW')} />
+
+        <ul className={s.lineItemsList}>
+          {data!.lineItems.map((item: any) => (
+            <CartItem
+              key={item.id}
+              item={item}
+              currencyCode={data!.currency.code}
+              variant="display"
+            />
+          ))}
+        </ul>
+      </div>
+
+      <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
+        <ul className="pb-2">
+          <li className="flex justify-between py-1">
+            <span>Subtotal</span>
+            <span>{subTotal}</span>
+          </li>
+          <li className="flex justify-between py-1">
+            <span>Taxes</span>
+            <span>Calculated at checkout</span>
+          </li>
+          <li className="flex justify-between py-1">
+            <span>Shipping</span>
+            <span className="font-bold tracking-wide">FREE</span>
+          </li>
+        </ul>
+        <div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-2">
+          <span>Total</span>
+          <span>{total}</span>
+        </div>
+        <div>
+          {/* Once data is correcly filled */}
+          <Button Component="a" width="100%" onClick={handleConfirmPurchase}>
+            Confirm Purchase
+          </Button>
+          {/* <Button Component="a" width="100%" variant="ghost" disabled>
+            Continue
+          </Button> */}
+        </div>
+      </div>
+    </SidebarLayout>
+  )
+}
+
+export default CheckoutSidebarView

theme/dap/checkout/CheckoutSidebarView/index.ts

@@ -0,0 +1 @@
+export { default } from './CheckoutSidebarView'

theme/dap/checkout/ShippingView/ShippingView.module.css

@@ -0,0 +1,21 @@
+.fieldset {
+  @apply flex flex-col my-3;
+}
+
+.fieldset .label {
+  @apply text-accent-7 uppercase text-xs font-medium mb-2;
+}
+
+.fieldset .input,
+.fieldset .select {
+  @apply p-2 border border-accent-2 w-full text-sm font-normal;
+}
+
+.fieldset .input:focus,
+.fieldset .select:focus {
+  @apply outline-none shadow-outline-normal;
+}
+
+.radio {
+  @apply bg-black;
+}

theme/dap/checkout/ShippingView/ShippingView.tsx

@@ -0,0 +1,155 @@
+import { FC, useState } from 'react'
+import cn from 'classnames'
+import s from './ShippingView.module.css'
+import { Button, Input } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
+
+import { v4 as uuid } from 'uuid'
+import { setCustomerForOrderMutation } from '@framework/utils/mutations/set-customer-for-order-mutation'
+import { setOrderShippingAddressMutation } from '@framework/utils/mutations/set-order-shipping-address-mutation'
+import request from '@commerce/utils/request'
+
+const PaymentMethodView: FC = () => {
+  // Form State
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [phoneNumber, setPhoneNumber] = useState('')
+  const [email, setEmail] = useState('')
+  const [streetDetails, setStreetDetails] = useState('')
+  const [apartmentDetails, setApartmentDetails] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const { setSidebarView } = useUI()
+
+  const setCustomerForOrder = async () => {
+    console.log('Setting customer')
+    const data = await request({
+      query: setCustomerForOrderMutation,
+      variables: {
+        input: {
+          title: `${firstName} ${lastName}`,
+          firstName: firstName,
+          lastName: lastName,
+          phoneNumber: phoneNumber,
+          emailAddress: `${email}+${uuid().split('-')[0]}`
+        }
+      }
+    })
+    console.log(data, 111)
+  }
+  const addShippingAddress = async () => {
+    console.log('Add shipping address')
+    const data = await request({
+      query: setOrderShippingAddressMutation,
+      variables: {
+        input: {
+          fullName: `${firstName} ${lastName}`,
+          phoneNumber: phoneNumber,
+          streetLine1: streetDetails,
+          streetLine2: apartmentDetails,
+          countryCode: "TM"
+        }
+      }
+    })
+    console.log(data, 222)
+  }
+
+  const handleAddShippingAddress = async (e: React.SyntheticEvent<EventTarget>) => {
+    e.preventDefault()
+
+    console.log('Handle Add Shipping Address')
+
+    try {
+      setLoading(true)
+      await setCustomerForOrder()
+      await addShippingAddress()
+      setLoading(false)
+      setSidebarView('CHECKOUT_VIEW')
+    } catch ({ errors }) {
+      console.log(errors, 333)  
+    }
+    
+  }
+  return (
+    <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
+      <form
+        onSubmit={handleAddShippingAddress}
+      >
+        <div className="px-4 sm:px-6 flex-1">
+          <h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
+            Shipping
+          </h2>
+          
+            <div>
+              {/* <div className="flex flex-row my-3 items-center">
+                <input className={s.radio} type="radio" />
+                <span className="ml-3 text-sm">Same as billing address</span>
+              </div>
+              <div className="flex flex-row my-3 items-center">
+                <input className={s.radio} type="radio" />
+                <span className="ml-3 text-sm">
+                  Use a different shipping address
+                </span>
+              </div>
+              <hr className="border-accent-2 my-6" /> */}
+              <div className="grid gap-3 grid-flow-row grid-cols-12">
+                <div className={cn(s.fieldset, 'col-span-6')}>
+                  <label className={s.label}>First Name</label>
+                  <Input className={s.input} onChange={setFirstName} />
+                </div>
+                <div className={cn(s.fieldset, 'col-span-6')}>
+                  <label className={s.label}>Last Name</label>
+                  <Input className={s.input} onChange={setLastName} />
+                </div>
+              </div>
+              <div className={s.fieldset}>
+                <label className={s.label}>Phone Number</label>
+                <Input className={s.input} onChange={setPhoneNumber} />
+              </div>
+              <div className={s.fieldset}>
+                <label className={s.label}>Email</label>
+                <Input className={s.input} onChange={setEmail} />
+              </div>
+              <div className={s.fieldset}>
+                <label className={s.label}>Street and House Number</label>
+                <Input className={s.input} onChange={setStreetDetails} />
+              </div>
+              <div className={s.fieldset}>
+                <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
+                <Input className={s.input} onChange={setApartmentDetails} />
+              </div>
+              {/* <div className="grid gap-3 grid-flow-row grid-cols-12">
+                <div className={cn(s.fieldset, 'col-span-6')}>
+                  <label className={s.label}>Postal Code</label>
+                  <input className={s.input} />
+                </div>
+                <div className={cn(s.fieldset, 'col-span-6')}>
+                  <label className={s.label}>City</label>
+                  <input className={s.input} />
+                </div>
+              </div> */}
+              {/* <div className={s.fieldset}>
+                <label className={s.label}>Country/Region</label>
+                <select className={s.select}>
+                  <option>Hong Kong</option>
+                </select>
+              </div> */}
+            </div>
+        </div>
+        <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
+          <Button
+            variant="ghost"
+            type="submit"
+            loading={loading}
+            width="100%"
+          >
+            Continue
+          </Button>
+        </div>
+      </form>
+    </SidebarLayout>
+  )
+}
+
+export default PaymentMethodView

theme/dap/checkout/ShippingView/index.ts

@@ -0,0 +1 @@
+export { default } from './ShippingView'