✨ feat: add shipping address to order

:%s

framework/commerce/types/cart.ts

@@ -1,3 +1,4 @@
+import { Shipping } from 'src/components/icons';
 import type { Discount, Measurement, Image } from './common'
 
 export type SelectedOption = {
@@ -67,6 +68,14 @@ export type Cart = {
     lastName: string,
     emailAddress: string,
   }
+  shippingAddress?: {
+    streetLine1: string,
+    city: string,
+    province: string,
+    postalCode: string,
+    countryCode: string,
+    phoneNumber: string,
+  }
   // The email assigned to this cart
   email?: string
   // The date and time when the cart was created.

framework/vendure/schema.d.ts

@@ -3052,6 +3052,7 @@ export type CartFragment = { __typename?: 'Order' } & Pick<
   | 'totalWithTax'
   | 'currencyCode'
 > & {
+  shippingAddress?: Maybe<{ __typename?: 'OrderAddress' } & Pick<OrderAddress, 'streetLine1' | 'fullName' | 'city' | 'province' | 'postalCode' |'countryCode' | 'phoneNumber'>>
   customer?: Maybe<{ __typename?: 'Customer' } & Pick<Customer, 'id' | 'firstName' | 'lastName' | 'emailAddress'>>
   lines: Array<
     { __typename?: 'OrderLine' } & Pick<

framework/vendure/utils/fragments/cart-fragment.ts

@@ -15,6 +15,14 @@ export const cartFragment = /* GraphQL */ `
       lastName
       emailAddress
     }
+    shippingAddress {
+      streetLine1
+      city
+      province
+      postalCode
+      countryCode
+      phoneNumber
+    }
     lines {
       id
       quantity

framework/vendure/utils/normalize.ts

@@ -1,6 +1,6 @@
 import { Cart } from '@commerce/types/cart'
 import { ProductCard, Product } from '@commerce/types/product'
-import { CartFragment, SearchResultFragment,Favorite } from '../schema'
+import { CartFragment, SearchResultFragment, Favorite } from '../schema'
 
 export function normalizeSearchResult(item: SearchResultFragment): ProductCard {
   return {
@@ -11,10 +11,10 @@ export function normalizeSearchResult(item: SearchResultFragment): ProductCard {
     price: (item.priceWithTax as any).min / 100,
     currencyCode: item.currencyCode,
     productVariantId: item.productVariantId,
-    productVariantName:item.productVariantName,
+    productVariantName: item.productVariantName,
     facetValueIds: item.facetValueIds,
     collectionIds: item.collectionIds,
-    
+
     // TODO:
     // oldPrice: item.price
     // discount
@@ -50,6 +50,14 @@ export function normalizeCart(order: CartFragment): Cart {
       lastName: order.customer?.lastName || '',
       emailAddress: order.customer?.emailAddress || '',
     },
+    shippingAddress: {
+      streetLine1: order.shippingAddress?.streetLine1 || '',
+      city: order.shippingAddress?.city || '',
+      province: order.shippingAddress?.province || '',
+      postalCode: order.shippingAddress?.postalCode || '',
+      countryCode: order.shippingAddress?.countryCode || '',
+      phoneNumber: order.shippingAddress?.phoneNumber || '',
+    },
     lineItems: order.lines?.map((l) => ({
       id: l.id,
       name: l.productVariant.name,
@@ -84,7 +92,7 @@ export function normalizeProductCard(product: Product): ProductCard {
     price: product.price,
     currencyCode: product.currencyCode,
     productVariantId: product.variants?.[0].id.toString(),
-    productVariantName:product.variants?.[0].name,
+    productVariantName: product.variants?.[0].name,
     facetValueIds: product.facetValueIds,
     collectionIds: product.collectionIds,
   }

src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx

@@ -4,7 +4,6 @@ import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCol
 import { useActiveCustomer } from 'src/components/hooks/auth'
 import { useAddProductToCart, useGetActiveOrder } from 'src/components/hooks/cart'
 import { removeItem } from 'src/utils/funtion.utils'
-import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CheckoutInfo.module.scss'
 import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
 import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
@@ -22,7 +21,6 @@ enum CheckoutStep {
 const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
   const [activeStep, setActiveStep] = useState(1)
   const [doneSteps, setDoneSteps] = useState<CheckoutStep[]>([])
-  const [info, setInfo] = useState<CheckOutForm>({})
   const { order } = useGetActiveOrder()
   const { customer } = useActiveCustomer()
 
@@ -53,12 +51,16 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
 
   const updateActiveStep = (step: CheckoutStep) => {
     if (doneSteps.length > 0) {
-      for (let i = step + 1; i <= Object.keys(CheckoutStep).length; i++) {
+      for (let i = step + 1; i < Object.keys(CheckoutStep).length; i++) {
         if (!doneSteps.includes(i)) {
+          // console.log("here: ", doneSteps, i)
           setActiveStep(i)
+          return
         }
       }
     } else {
+      // console.log("here 2: ", doneSteps, step)
+
       setActiveStep(step + 1)
     }
   }
@@ -86,7 +88,11 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
           return ''
         }
       case CheckoutStep.ShippingInfo:
-        return `${info.address}, ${info.state}, ${info.city}, ${info.code}, ${info.phone}, `
+        if (order?.shippingAddress) {
+          const { streetLine1, city, province, postalCode, countryCode, phoneNumber } = order.shippingAddress
+          return `${streetLine1}, ${city}, ${province}, ${postalCode}, ${countryCode}, ${phoneNumber}`
+        }
+        return ''
       default:
         return ""
     }
@@ -96,12 +102,12 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
     {
       id: CheckoutStep.CustomerInfo,
       title: 'Customer Information',
-      form: <CustomerInfoForm onConfirm={onConfirm} id={CheckoutStep.CustomerInfo}/>,
+      form: <CustomerInfoForm onConfirm={onConfirm} id={CheckoutStep.CustomerInfo} />,
     },
     {
       id: CheckoutStep.ShippingInfo,
       title: 'Shipping Information',
-      form: <ShippingInfoForm onConfirm={onConfirm} id={CheckoutStep.ShippingInfo} activeStep={activeStep}/>,
+      form: <ShippingInfoForm onConfirm={onConfirm} id={CheckoutStep.ShippingInfo} activeStep={activeStep} />,
     },
     {
       id: CheckoutStep.PaymentInfo,

src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx

@@ -9,7 +9,6 @@ import { ErrorCode } from 'src/domains/enums/ErrorCode'
 import { CommonError } from 'src/domains/interfaces/CommonError'
 import { LANGUAGE } from 'src/utils/language.utils'
 import { CustomInputCommon } from 'src/utils/type.utils'
-import { CheckOutForm } from 'src/utils/types.utils'
 import * as Yup from 'yup'
 import ChekoutNotePolicy from '../ChekoutNotePolicy/ChekoutNotePolicy'
 import s from './CustomerInfoForm.module.scss'

src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx

@@ -1,19 +1,18 @@
 import React from 'react'
 import { ButtonCommon, TabCommon, TabPane } from 'src/components/common'
-import { CheckOutForm } from 'src/utils/types.utils'
 import BankTransfer from '../BankTransfer/BankTransfer'
-import Link from 'next/link'
+import ChekoutNotePolicy from '../ChekoutNotePolicy/ChekoutNotePolicy'
-
-import s from './PaymentInfoForm.module.scss'
 import CreditCardForm from '../CreditCardForm/CreditCardForm'
+import s from './PaymentInfoForm.module.scss'
+
 interface PaymentInfoFormProps {
-  onConfirm?: (id: number, formInfo: CheckOutForm) => void
+  onConfirm?: (id: number) => void
   id: number
 }
 
 const PaymentInfoForm = ({onConfirm,id}: PaymentInfoFormProps) => {
   const handleConfirmClick = () => {
-    onConfirm && onConfirm(id,{})
+    onConfirm && onConfirm(id)
   }
   return (
     <div className={s.wrapper}>
@@ -29,21 +28,7 @@ const PaymentInfoForm = ({onConfirm,id}: PaymentInfoFormProps) => {
         </TabPane>
       </TabCommon>
       <div className={s.bottom}>
-        <div className={s.note}>
+        <ChekoutNotePolicy/>
-          By clicking continue you agree to Casper's{' '}
-          {
-            <Link href="#">
-              <strong>terms and conditions</strong>
-            </Link>
-          }{' '}
-          and{' '}
-          {
-            <Link href="#">
-              <strong>privacy policy </strong>
-            </Link>
-          }
-          .
-        </div>
         <div className={s.button}>
           <ButtonCommon onClick={handleConfirmClick}>
             Submit Order

src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx

@@ -1,17 +1,14 @@
-import React, { useEffect, useRef } from 'react'
-import { ButtonCommon, Inputcommon, InputFiledInForm, SelectCommon, SelectFieldInForm } from 'src/components/common'
-import s from './ShippingInfoForm.module.scss'
-import Link from 'next/link'
-import { CustomInputCommon } from 'src/utils/type.utils'
-import { Shipping } from 'src/components/icons'
-import { CheckOutForm } from 'src/utils/types.utils'
 import { Form, Formik } from 'formik'
+import React, { useEffect, useRef } from 'react'
+import { ButtonCommon, InputFiledInForm, SelectFieldInForm } from 'src/components/common'
+import { useMessage } from 'src/components/contexts'
+import { useSetOrderShippingAddress } from 'src/components/hooks/order'
+import { COUNTRY_CODE } from 'src/domains/data/countryCode'
 import { LANGUAGE } from 'src/utils/language.utils'
+import { CustomInputCommon } from 'src/utils/type.utils'
 import * as Yup from 'yup'
 import ChekoutNotePolicy from '../ChekoutNotePolicy/ChekoutNotePolicy'
-import { useSetOrderShippingAddress } from 'src/components/hooks/order'
+import s from './ShippingInfoForm.module.scss'
-import { useMessage } from 'src/components/contexts'
-import { COUNTRY_CODE } from 'src/domains/data/countryCode'
 
 interface ShippingInfoFormProps {
   id: number

src/utils/types.utils.ts

@@ -33,19 +33,6 @@ export interface BlogProps {
     imageSrc: string
 }
 
-export interface CheckOutForm {
-    firstName?: string
-    lastName?: string
-    emailAddress?: string
-    address?: string
-    city?: string
-    state?: string
-    code?: number
-    phone?: number
-    method?: string
-    shipping_fee?: number
-}
-
 export type MouseAndTouchEvent = MouseEvent | TouchEvent
 
 export enum SortOrder {