Order checkout process implemented without validations

components/common/Layout/Layout.tsx

@@ -7,12 +7,12 @@ import { useUI } from '@components/ui/context'
 import type { Page } from '@commerce/types/page'
 import { Navbar, Footer } from '@components/common'
 import type { Category } from '@commerce/types/site'
-import ShippingView from '@components/checkout/ShippingView'
+import ShippingView from '@theme/checkout/ShippingView'
 import CartSidebarView from '@components/cart/CartSidebarView'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
 import PaymentMethodView from '@components/checkout/PaymentMethodView'
-import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
+import CheckoutSidebarView from '@theme/checkout/CheckoutSidebarView'
 
 import LoginView from '@components/auth/LoginView'
 import s from './Layout.module.css'

framework/commerce/utils/request.ts

@@ -0,0 +1,20 @@
+const request = async ({query, variables}) => {
+
+  const data = await fetch('http://localhost:5000/shop-api', {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: 'include',
+    body: JSON.stringify({ query: query, variables: variables })
+  })
+
+  if (data.status === 200) {
+    const response = await data.json()
+    return response
+  }
+
+  return {
+    error: true
+  }
+}
+
+export default request

framework/vendure/utils/mutations/add-payment-to-order-mutation.ts

@@ -0,0 +1,31 @@
+export const addPaymentToOrderMutation = /***/`
+  mutation addPaymentToOrder($input: PaymentInput!) {
+    addPaymentToOrder(input: $input) {
+      __typename
+      ...on Order {
+        id
+        state
+        customer {
+          id
+        }
+        totalQuantity
+        lines {
+          id
+        }
+      }
+      ...on OrderPaymentStateError {
+        errorCode
+        message
+      }
+      ...on IneligiblePaymentMethodError {
+        errorCode
+        message
+        eligibilityCheckerMessage
+      }
+      ...on ErrorResult {
+        errorCode
+        message
+      }
+    }
+  }
+`

framework/vendure/utils/mutations/set-customer-for-order-mutation.ts

@@ -0,0 +1,34 @@
+// {
+//   title: "John Adams"
+//   firstName: "John"
+//   lastName: "Adams"
+//   phoneNumber: "+99312345678"
+//   emailAddress: "john@example.com"
+// }
+
+export const setCustomerForOrderMutation = /* GraphQL*/ `
+  mutation setCustomerForOrder($input: CreateCustomerInput!) {
+    setCustomerForOrder(input: $input){
+      __typename
+      ...on Order {
+        id
+        state
+        customer {
+          id
+        }
+        totalQuantity
+        lines {
+          id
+        }
+      }
+      ...on AlreadyLoggedInError {
+        errorCode
+        message
+      }
+      ...on NoActiveOrderError {
+        errorCode
+        message
+      }
+    }
+  }
+`

framework/vendure/utils/mutations/set-order-shipping-address-mutation.ts

@@ -0,0 +1,22 @@
+export const setOrderShippingAddressMutation = /* GraphQL */ `
+  mutation setOrderShippingAddress($input: CreateAddressInput!) {
+    setOrderShippingAddress(input: $input) {
+      __typename
+      ...on Order {
+        id
+        state
+        customer {
+          id
+        }
+        totalQuantity
+        lines {
+          id
+        }
+      }
+      ...on ErrorResult {
+        errorCode
+        message
+      }
+    }
+  }
+`

framework/vendure/utils/mutations/transition-order-to-state-mutation.ts

@@ -0,0 +1,29 @@
+export const transitionOrderToStateMutation = /* GraphQL */ `
+  mutation transitionOrderToState($state: String!) {
+    transitionOrderToState(state: $state) {
+      __typename
+      ...on Order {
+        id
+        state
+        customer {
+          id
+        }
+        totalQuantity
+        lines {
+          id
+        }
+      }
+      ...on ErrorResult {
+        errorCode
+        message
+      }
+      ...on OrderStateTransitionError {
+        errorCode
+        message
+        transitionError
+        fromState
+        toState
+      }
+    }
+  }
+`

package.json

@@ -19,16 +19,33 @@
     "node": ">=14.x"
   },
   "dependencies": {
+    "@graphql-codegen/cli": "^1.21.5",
+    "@graphql-codegen/schema-ast": "^1.18.3",
+    "@graphql-codegen/typescript": "^1.22.2",
+    "@graphql-codegen/typescript-operations": "^1.18.1",
+    "@next/bundle-analyzer": "^10.2.3",
     "@react-spring/web": "^9.2.1",
+    "@types/body-scroll-lock": "^2.6.1",
+    "@types/cookie": "^0.4.0",
+    "@types/js-cookie": "^2.2.6",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.random": "^3.2.6",
+    "@types/lodash.throttle": "^4.1.6",
+    "@types/node": "^15.12.4",
+    "@types/react": "^17.0.8",
     "@vercel/fetch": "^6.1.0",
     "autoprefixer": "^10.2.6",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.3.1",
     "cookie": "^0.4.1",
+    "deepmerge": "^4.2.2",
     "email-validator": "^2.0.4",
+    "graphql": "^15.5.1",
+    "husky": "^6.0.0",
     "immutability-helper": "^3.1.1",
     "js-cookie": "^2.2.1",
     "keen-slider": "^5.5.1",
+    "lint-staged": "^11.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
@@ -36,7 +53,10 @@
     "next-seo": "^4.26.0",
     "next-themes": "^0.0.14",
     "postcss": "^8.3.5",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-nesting": "^8.0.1",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "^2.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-fast-marquee": "^1.1.4",
@@ -46,28 +66,9 @@
     "swr": "^0.5.6",
     "tabbable": "^5.2.0",
     "tailwindcss": "^2.2.2",
-    "uuidv4": "^6.2.10",
+    "typescript": "4.3.4",
-    "@graphql-codegen/cli": "^1.21.5",
+    "uuid": "^8.3.2",
-    "@graphql-codegen/schema-ast": "^1.18.3",
+    "uuidv4": "^6.2.10"
-    "@graphql-codegen/typescript": "^1.22.2",
-    "@graphql-codegen/typescript-operations": "^1.18.1",
-    "@next/bundle-analyzer": "^10.2.3",
-    "@types/body-scroll-lock": "^2.6.1",
-    "@types/cookie": "^0.4.0",
-    "@types/js-cookie": "^2.2.6",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.random": "^3.2.6",
-    "@types/lodash.throttle": "^4.1.6",
-    "@types/node": "^15.12.4",
-    "@types/react": "^17.0.8",
-    "deepmerge": "^4.2.2",
-    "graphql": "^15.5.1",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.3.0",
-    "typescript": "4.3.4"
   },
   "devDependencies": {},
   "husky": {

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'

yarn.lock

@@ -6049,7 +6049,7 @@ util@^0.12.0:
     safe-buffer "^5.1.2"
     which-typed-array "^1.1.2"
 
-uuid@8.3.2:
+uuid@8.3.2, uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==