diff --git a/framework/commerce/types/cart.ts b/framework/commerce/types/cart.ts index 936ba427d..7fbfb23f7 100644 --- a/framework/commerce/types/cart.ts +++ b/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. diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index ecd45190f..16614ca65 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3052,6 +3052,7 @@ export type CartFragment = { __typename?: 'Order' } & Pick< | 'totalWithTax' | 'currencyCode' > & { + shippingAddress?: Maybe<{ __typename?: 'OrderAddress' } & Pick> customer?: Maybe<{ __typename?: 'Customer' } & Pick> lines: Array< { __typename?: 'OrderLine' } & Pick< diff --git a/framework/vendure/utils/fragments/cart-fragment.ts b/framework/vendure/utils/fragments/cart-fragment.ts index a9b14d2d4..8a7ac64e7 100644 --- a/framework/vendure/utils/fragments/cart-fragment.ts +++ b/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 diff --git a/framework/vendure/utils/normalize.ts b/framework/vendure/utils/normalize.ts index c1bbc93b0..e2a0fb83d 100644 --- a/framework/vendure/utils/normalize.ts +++ b/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, } diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx index cd59f2128..753d9e8cf 100644 --- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx +++ b/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([]) - const [info, setInfo] = useState({}) 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: , + form: , }, { id: CheckoutStep.ShippingInfo, title: 'Shipping Information', - form: , + form: , }, { id: CheckoutStep.PaymentInfo, diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx index 6c6098f91..9ea2f2f1b 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx +++ b/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' diff --git a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx index eac100fb0..de72812c3 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx +++ b/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 s from './PaymentInfoForm.module.scss' +import ChekoutNotePolicy from '../ChekoutNotePolicy/ChekoutNotePolicy' 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 (
@@ -29,21 +28,7 @@ const PaymentInfoForm = ({onConfirm,id}: PaymentInfoFormProps) => {
-
- By clicking continue you agree to Casper's{' '} - { - - terms and conditions - - }{' '} - and{' '} - { - - privacy policy - - } - . -
+
Submit Order diff --git a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx index f57b113bc..f2439a6d7 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx +++ b/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 { useMessage } from 'src/components/contexts' -import { COUNTRY_CODE } from 'src/domains/data/countryCode' +import s from './ShippingInfoForm.module.scss' interface ShippingInfoFormProps { id: number diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts index 17eee66f0..ec796a55c 100644 --- a/src/utils/types.utils.ts +++ b/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 {