From e2cf89fa0408ffcc7b78f59653e72f8392040031 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 18 Oct 2021 16:17:05 +0700 Subject: [PATCH 1/7] enhance: link T&C, privacy --- .../CustomerInfoForm/CustomerInfoForm.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx index 5894683d7..7e4715986 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx +++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx @@ -2,6 +2,7 @@ import Link from 'next/link' import React, { useRef } from 'react' import { ButtonCommon, Inputcommon } from 'src/components/common' import InputCommon from 'src/components/common/InputCommon/InputCommon' +import { ROUTE } from 'src/utils/constanst.utils' import { CheckOutForm } from 'src/utils/types.utils' import s from './CustomerInfoForm.module.scss' interface CustomerInfoFormProps { @@ -31,14 +32,18 @@ const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => {
By clicking continue you agree to Casper's{' '} { - - terms and conditions + + + terms and conditions + }{' '} and{' '} { - - privacy policy + + + privacy policy + } . From 28e0c8e4af051cd44848a79643bdbbe2332d3432 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 18 Oct 2021 16:22:41 +0700 Subject: [PATCH 2/7] :blue_book: docs: OrderState :%s --- src/utils/types.utils.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts index 59243b80f..e3eee3e9d 100644 --- a/src/utils/types.utils.ts +++ b/src/utils/types.utils.ts @@ -62,3 +62,18 @@ export type PromiseWithKey = { promise: PromiseLike keyResult?: string, } + +// ref https://www.vendure.io/docs/typescript-api/orders/order-state/ +export type OrderState = | 'Created' + | 'AddingItems' + | 'ArrangingPayment' + | 'PaymentAuthorized' + | 'PaymentSettled' + | 'PartiallyShipped' + | 'Shipped' + | 'PartiallyDelivered' + | 'Delivered' + | 'Modifying' + | 'ArrangingAdditionalPayment' + | 'Cancelled' + From 8a2e06a0fa3b9e55216a65b386431837f011504f Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 18 Oct 2021 17:38:08 +0700 Subject: [PATCH 3/7] :sparkles: feat: setCustomerForOrder :%s --- framework/vendure/schema.d.ts | 485 ++++++++++-------- .../mutations/set-customer-order-mutation.ts | 24 + package.json | 3 +- pages/checkout.tsx | 3 +- .../Layout/LayoutContent/LayoutContent.tsx | 1 - .../common/LayoutCheckout/LayoutCheckout.tsx | 19 +- .../common/MessageCommon/MessageCommon.tsx | 2 +- .../contexts/Message/MessageContext.tsx | 2 +- .../contexts/Message/MessageProvider.tsx | 7 +- .../hooks/cart/useGetActiveOrder.tsx | 1 - src/components/hooks/order/index.ts | 2 + .../hooks/order/useSetCustomerForOrder.tsx | 47 ++ .../CustomerInfoForm/CustomerInfoForm.tsx | 25 +- .../checkout/CheckoutPage/CheckoutPage.tsx | 5 + 14 files changed, 384 insertions(+), 242 deletions(-) create mode 100644 framework/vendure/utils/mutations/set-customer-order-mutation.ts create mode 100644 src/components/hooks/order/index.ts create mode 100644 src/components/hooks/order/useSetCustomerForOrder.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index cef42ff5d..baf37c7f3 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -306,9 +306,52 @@ export type MutationResetPasswordArgs = { password: Scalars['String'] } +export type ActiveOrderCustomerFragment = Pick & { + customer?: Maybe>; + lines: Array>; +}; + +export type SetCustomerForOrderMutationVariables = Exact<{ + input: CreateCustomerInput; +}>; + +export type SetCustomerForOrderMutation = { __typename?: 'Mutation' } & { + setCustomerForOrder: + | ({ __typename: 'ActiveOrderCustomerFragment' } & Pick) + | ({ __typename: 'AlreadyLoggedInError' } & Pick< + AlreadyLoggedInError, + 'errorCode' | 'message' + >) + | ({ __typename: 'EmailAddressConflictError' } & Pick< + EmailAddressConflictError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NoActiveOrderError' } & Pick< + NoActiveOrderError, + 'errorCode' | 'message' + >) +} + +export type SetCustomerForOrderMutation = { __typename?: 'Mutation' } & { + setCustomerForOrder: + | ({ __typename: 'ActiveOrderCustomerFragment' } & Pick) + | ({ __typename: 'AlreadyLoggedInError' } & Pick< + AlreadyLoggedInError, + 'errorCode' | 'message' + >) + | ({ __typename: 'EmailAddressConflictError' } & Pick< + EmailAddressConflictError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NoActiveOrderError' } & Pick< + NoActiveOrderError, + 'errorCode' | 'message' + >) +} + export type Address = Node & { updateCustomerAddress: - | { + | { __typename?: 'Address' id: Scalars['ID'] } @@ -1471,7 +1514,7 @@ export type CustomerListOptions = { export type Customer = Node & { updateCustomer: - | { + | { __typename?: 'Customer' id: Scalars['ID'] } @@ -1482,7 +1525,7 @@ export type Customer = Node & { title?: Maybe firstName: Scalars['String'] lastName: Scalars['String'] - phoneNumber?: Maybe + phoneNumber?: Maybe emailAddress: Scalars['String'] addresses?: Maybe> orders: OrderList @@ -3017,56 +3060,56 @@ export type CartFragment = { __typename?: 'Order' } & Pick< | 'totalWithTax' | 'currencyCode' > & { - customer?: Maybe<{ __typename?: 'Customer' } & Pick> - lines: Array< - { __typename?: 'OrderLine' } & Pick< - OrderLine, + customer?: Maybe<{ __typename?: 'Customer' } & Pick> + lines: Array< + { __typename?: 'OrderLine' } & Pick< + OrderLine, + | 'id' + | 'quantity' + | 'linePriceWithTax' + | 'discountedLinePriceWithTax' + | 'unitPriceWithTax' + | 'discountedUnitPriceWithTax' + > & { + featuredAsset?: Maybe< + { __typename?: 'Asset' } & Pick + > + discounts: Array< + { __typename?: 'Discount' } & Pick< + Discount, + 'description' | 'amount' + > + > + productVariant: { __typename?: 'ProductVariant' } & Pick< + ProductVariant, | 'id' - | 'quantity' - | 'linePriceWithTax' - | 'discountedLinePriceWithTax' - | 'unitPriceWithTax' - | 'discountedUnitPriceWithTax' - > & { - featuredAsset?: Maybe< - { __typename?: 'Asset' } & Pick - > - discounts: Array< - { __typename?: 'Discount' } & Pick< - Discount, - 'description' | 'amount' - > - > - productVariant: { __typename?: 'ProductVariant' } & Pick< - ProductVariant, - | 'id' - | 'name' - | 'sku' - | 'price' - | 'priceWithTax' - | 'stockLevel' - | 'productId' - > & { product: { __typename?: 'Product' } & Pick } - } - > - } + | 'name' + | 'sku' + | 'price' + | 'priceWithTax' + | 'stockLevel' + | 'productId' + > & { product: { __typename?: 'Product' } & Pick } + } + > +} export type SearchResultFragment = { __typename?: 'SearchResult' } & Pick< SearchResult, 'productId' | 'sku' | 'productName' | 'description' | 'slug' | 'sku' | 'currencyCode' - | 'productAsset' | 'price' | 'priceWithTax' | 'currencyCode' + | 'productAsset' | 'price' | 'priceWithTax' | 'currencyCode' | 'collectionIds' | 'productVariantId' | 'facetValueIds' | "productVariantName" > & { - productAsset?: Maybe< - { __typename?: 'SearchResultAsset' } & Pick< - SearchResultAsset, - 'id' | 'preview' - > + productAsset?: Maybe< + { __typename?: 'SearchResultAsset' } & Pick< + SearchResultAsset, + 'id' | 'preview' > - priceWithTax: - | ({ __typename?: 'PriceRange' } & Pick) - | ({ __typename?: 'SinglePrice' } & Pick) - } + > + priceWithTax: + | ({ __typename?: 'PriceRange' } & Pick) + | ({ __typename?: 'SinglePrice' } & Pick) +} export type AddItemToOrderMutationVariables = Exact<{ variantId: Scalars['ID'] @@ -3075,23 +3118,23 @@ export type AddItemToOrderMutationVariables = Exact<{ export type AddItemToOrderMutation = { __typename?: 'Mutation' } & { addItemToOrder: - | ({ __typename: 'Order' } & CartFragment) - | ({ __typename: 'OrderModificationError' } & Pick< - OrderModificationError, - 'errorCode' | 'message' - >) - | ({ __typename: 'OrderLimitError' } & Pick< - OrderLimitError, - 'errorCode' | 'message' - >) - | ({ __typename: 'NegativeQuantityError' } & Pick< - NegativeQuantityError, - 'errorCode' | 'message' - >) - | ({ __typename: 'InsufficientStockError' } & Pick< - InsufficientStockError, - 'errorCode' | 'message' - >) + | ({ __typename: 'Order' } & CartFragment) + | ({ __typename: 'OrderModificationError' } & Pick< + OrderModificationError, + 'errorCode' | 'message' + >) + | ({ __typename: 'OrderLimitError' } & Pick< + OrderLimitError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NegativeQuantityError' } & Pick< + NegativeQuantityError, + 'errorCode' | 'message' + >) + | ({ __typename: 'InsufficientStockError' } & Pick< + InsufficientStockError, + 'errorCode' | 'message' + >) } export type AdjustOrderLineMutationVariables = Exact<{ @@ -3101,23 +3144,23 @@ export type AdjustOrderLineMutationVariables = Exact<{ export type AdjustOrderLineMutation = { __typename?: 'Mutation' } & { adjustOrderLine: - | ({ __typename: 'Order' } & CartFragment) - | ({ __typename: 'OrderModificationError' } & Pick< - OrderModificationError, - 'errorCode' | 'message' - >) - | ({ __typename: 'OrderLimitError' } & Pick< - OrderLimitError, - 'errorCode' | 'message' - >) - | ({ __typename: 'NegativeQuantityError' } & Pick< - NegativeQuantityError, - 'errorCode' | 'message' - >) - | ({ __typename: 'InsufficientStockError' } & Pick< - InsufficientStockError, - 'errorCode' | 'message' - >) + | ({ __typename: 'Order' } & CartFragment) + | ({ __typename: 'OrderModificationError' } & Pick< + OrderModificationError, + 'errorCode' | 'message' + >) + | ({ __typename: 'OrderLimitError' } & Pick< + OrderLimitError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NegativeQuantityError' } & Pick< + NegativeQuantityError, + 'errorCode' | 'message' + >) + | ({ __typename: 'InsufficientStockError' } & Pick< + InsufficientStockError, + 'errorCode' | 'message' + >) } export type LoginMutationVariables = Exact<{ @@ -3127,49 +3170,49 @@ export type LoginMutationVariables = Exact<{ export type LoginMutation = { __typename?: 'Mutation' } & { login: - | ({ __typename: 'CurrentUser' } & Pick) - | ({ __typename: 'InvalidCredentialsError' } & Pick< - InvalidCredentialsError, - 'errorCode' | 'message' - >) - | ({ __typename: 'NotVerifiedError' } & Pick< - NotVerifiedError, - 'errorCode' | 'message' - >) - | ({ __typename: 'NativeAuthStrategyError' } & Pick< - NativeAuthStrategyError, - 'errorCode' | 'message' - >) + | ({ __typename: 'CurrentUser' } & Pick) + | ({ __typename: 'InvalidCredentialsError' } & Pick< + InvalidCredentialsError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NotVerifiedError' } & Pick< + NotVerifiedError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NativeAuthStrategyError' } & Pick< + NativeAuthStrategyError, + 'errorCode' | 'message' + >) } export type ResetPasswordMutation = { __typename?: 'Mutation' } & { resetPassword: - | ({ __typename: 'CurrentUser' } & Pick) - | ({ __typename: 'PasswordResetTokenInvalidError' } & Pick< - PasswordResetTokenInvalidError, - 'errorCode' | 'message' - >) - | ({ __typename: 'PasswordResetTokenExpiredError' } & Pick< - PasswordResetTokenExpiredError, - 'errorCode' | 'message' - >) - | ({ __typename: 'NativeAuthStrategyError' } & Pick< - NativeAuthStrategyError, - 'errorCode' | 'message' - >) + | ({ __typename: 'CurrentUser' } & Pick) + | ({ __typename: 'PasswordResetTokenInvalidError' } & Pick< + PasswordResetTokenInvalidError, + 'errorCode' | 'message' + >) + | ({ __typename: 'PasswordResetTokenExpiredError' } & Pick< + PasswordResetTokenExpiredError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NativeAuthStrategyError' } & Pick< + NativeAuthStrategyError, + 'errorCode' | 'message' + >) } export type SignupMutation = { __typename?: 'Mutation' } & { registerCustomerAccount: - | ({ __typename: 'Success' } & Pick) - | ({ __typename: 'MissingPasswordError' } & Pick< - MissingPasswordError, - 'errorCode' | 'message' - >) - | ({ __typename: 'NativeAuthStrategyError' } & Pick< - NativeAuthStrategyError, - 'errorCode' | 'message' - >) + | ({ __typename: 'Success' } & Pick) + | ({ __typename: 'MissingPasswordError' } & Pick< + MissingPasswordError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NativeAuthStrategyError' } & Pick< + NativeAuthStrategyError, + 'errorCode' | 'message' + >) } export type VerifyCustomerAccountVariables = Exact<{ @@ -3179,27 +3222,27 @@ export type VerifyCustomerAccountVariables = Exact<{ export type VerifyCustomerAccountMutation = { __typename?: 'Mutation' } & { verifyCustomerAccount: - | ({ __typename: 'CurrentUser' } & Pick) - | ({ __typename: 'VerificationTokenInvalidError' } & Pick< - VerificationTokenInvalidError, - 'errorCode' | 'message' - >) - | ({ __typename: 'VerificationTokenExpiredError' } & Pick< - VerificationTokenExpiredError, - 'errorCode' | 'message' - >) - | ({ __typename: 'MissingPasswordError' } & Pick< - MissingPasswordError, - 'errorCode' | 'message' - >) - | ({ __typename: 'PasswordAlreadySetError' } & Pick< - PasswordAlreadySetError, - 'errorCode' | 'message' - >) - | ({ __typename: 'NativeAuthStrategyError' } & Pick< - NativeAuthStrategyError, - 'errorCode' | 'message' - >) + | ({ __typename: 'CurrentUser' } & Pick) + | ({ __typename: 'VerificationTokenInvalidError' } & Pick< + VerificationTokenInvalidError, + 'errorCode' | 'message' + >) + | ({ __typename: 'VerificationTokenExpiredError' } & Pick< + VerificationTokenExpiredError, + 'errorCode' | 'message' + >) + | ({ __typename: 'MissingPasswordError' } & Pick< + MissingPasswordError, + 'errorCode' | 'message' + >) + | ({ __typename: 'PasswordAlreadySetError' } & Pick< + PasswordAlreadySetError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NativeAuthStrategyError' } & Pick< + NativeAuthStrategyError, + 'errorCode' | 'message' + >) } export type LogoutMutationVariables = Exact<{ [key: string]: never }> @@ -3214,11 +3257,11 @@ export type RemoveOrderLineMutationVariables = Exact<{ export type RemoveOrderLineMutation = { __typename?: 'Mutation' } & { removeOrderLine: - | ({ __typename: 'Order' } & CartFragment) - | ({ __typename: 'OrderModificationError' } & Pick< - OrderModificationError, - 'errorCode' | 'message' - >) + | ({ __typename: 'Order' } & CartFragment) + | ({ __typename: 'OrderModificationError' } & Pick< + OrderModificationError, + 'errorCode' | 'message' + >) } export type SignupMutationVariables = Exact<{ @@ -3228,15 +3271,15 @@ export type SignupMutationVariables = Exact<{ export type RequestPasswordReset = { __typename?: 'Mutation' } & { requestPasswordReset: - | ({ __typename: 'Success' } & Pick) - | ({ __typename: 'MissingPasswordError' } & Pick< - MissingPasswordError, - 'errorCode' | 'message' - >) - | ({ __typename: 'NativeAuthStrategyError' } & Pick< - NativeAuthStrategyError, - 'errorCode' | 'message' - >) + | ({ __typename: 'Success' } & Pick) + | ({ __typename: 'MissingPasswordError' } & Pick< + MissingPasswordError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NativeAuthStrategyError' } & Pick< + NativeAuthStrategyError, + 'errorCode' | 'message' + >) } @@ -3248,7 +3291,7 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & { { __typename?: 'Customer' } & Pick< Customer, Favorite, - 'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber'| 'orders' + 'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber' | 'orders' > > } @@ -3267,7 +3310,7 @@ export type FavoriteList = PaginatedList & { totalItems: Int! } -type Favorite = Node & { +type Favorite = Node & { id: ID! createdAt: DateTime! updatedAt: DateTime! @@ -3277,7 +3320,7 @@ type Favorite = Node & { -type FavouriteOption = Customer & { +type FavouriteOption = Customer & { favorites(options: FavoriteListOptions): FavoriteList! } @@ -3308,13 +3351,13 @@ export type GetAllFacetsQuery = { __typename?: 'Query' } & { { __typename?: 'Facet' } & Pick< Facet, 'id' | 'name' | 'code' | 'values' - > + > & { - parent?: Maybe<{ __typename?: 'Facet' } & Pick> - children?: Maybe< - Array<{ __typename?: 'Facet' } & Pick> - > - } + parent?: Maybe<{ __typename?: 'Facet' } & Pick> + children?: Maybe< + Array<{ __typename?: 'Facet' } & Pick> + > + } >, 'totalItems' } @@ -3327,11 +3370,11 @@ export type GetAllCollectionsQuery = { __typename?: 'Query' } & { Collection, 'id' | 'name' | 'slug' > & { - parent?: Maybe<{ __typename?: 'Collection' } & Pick> - children?: Maybe< - Array<{ __typename?: 'Collection' } & Pick> - > - } + parent?: Maybe<{ __typename?: 'Collection' } & Pick> + children?: Maybe< + Array<{ __typename?: 'Collection' } & Pick> + > + } >, 'totalItems' } @@ -3352,15 +3395,15 @@ export type GetCollectionsQuery = { __typename?: 'Query' } & { Collection, 'id' | 'name' | 'description' | 'slug' > & { - productVariants: { __typename?: 'ProductVariantList' } & Pick< - ProductVariantList, - 'totalItems' - > - parent?: Maybe<{ __typename?: 'Collection' } & Pick> - children?: Maybe< - Array<{ __typename?: 'Collection' } & Pick> - > - } + productVariants: { __typename?: 'ProductVariantList' } & Pick< + ProductVariantList, + 'totalItems' + > + parent?: Maybe<{ __typename?: 'Collection' } & Pick> + children?: Maybe< + Array<{ __typename?: 'Collection' } & Pick> + > + } > } } @@ -3375,60 +3418,60 @@ export type GetProductQuery = { __typename?: 'Query' } & { Product, 'id' | 'name' | 'slug' | 'description' > & { - assets: Array< - { __typename?: 'Asset' } & Pick - > - variants: Array< - { __typename?: 'ProductVariant' } & Pick< - ProductVariant, - 'id' | 'priceWithTax' | 'currencyCode' | 'price' | "name" - > & { - options: Array< - { __typename?: 'ProductOption' } & Pick< - ProductOption, - 'id' | 'name' | 'code' | 'groupId' - > & { - group: { __typename?: 'ProductOptionGroup' } & Pick< - ProductOptionGroup, - 'id' - > & { - options: Array< - { __typename?: 'ProductOption' } & Pick< - ProductOption, - 'name' - > - > - } - } - > - } - > - optionGroups: Array< - { __typename?: 'ProductOptionGroup' } & Pick< - ProductOptionGroup, - 'id' | 'code' | 'name' - > & { - options: Array< - { __typename?: 'ProductOption' } & Pick< - ProductOption, - 'id' | 'name' + assets: Array< + { __typename?: 'Asset' } & Pick + > + variants: Array< + { __typename?: 'ProductVariant' } & Pick< + ProductVariant, + 'id' | 'priceWithTax' | 'currencyCode' | 'price' | "name" + > & { + options: Array< + { __typename?: 'ProductOption' } & Pick< + ProductOption, + 'id' | 'name' | 'code' | 'groupId' + > & { + group: { __typename?: 'ProductOptionGroup' } & Pick< + ProductOptionGroup, + 'id' + > & { + options: Array< + { __typename?: 'ProductOption' } & Pick< + ProductOption, + 'name' + > > - > + } } - > - facetValues: Array< - { __typename?: 'FacetValue' } & Pick< - FacetValue, - 'id' > - > - collections: Array< - { __typename?: 'Collection' } & Pick< - Collection, - 'id'|"name" + } + > + optionGroups: Array< + { __typename?: 'ProductOptionGroup' } & Pick< + ProductOptionGroup, + 'id' | 'code' | 'name' + > & { + options: Array< + { __typename?: 'ProductOption' } & Pick< + ProductOption, + 'id' | 'name' + > > + } + > + facetValues: Array< + { __typename?: 'FacetValue' } & Pick< + FacetValue, + 'id' > - } + > + collections: Array< + { __typename?: 'Collection' } & Pick< + Collection, + 'id' | "name" + > + > + } > } diff --git a/framework/vendure/utils/mutations/set-customer-order-mutation.ts b/framework/vendure/utils/mutations/set-customer-order-mutation.ts new file mode 100644 index 000000000..d4face1e9 --- /dev/null +++ b/framework/vendure/utils/mutations/set-customer-order-mutation.ts @@ -0,0 +1,24 @@ +export const setCustomerForOrderMutation = /* GraphQL */ ` +mutation setCustomerForOrder($input: CreateCustomerInput!) { + setCustomerForOrder(input: $input) { + __typename + ... on Order { + id + createdAt + updatedAt + code + customer { + id + firstName + lastName + emailAddress + phoneNumber + } + } + ... on ErrorResult { + errorCode + message + } + } +} +` diff --git a/package.json b/package.json index 8474be667..6db6e1de1 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,9 @@ "name": "nextjs-commerce", "version": "1.0.0", "scripts": { - "dev": "NODE_OPTIONS='--inspect' PORT=3005 next dev", + "dev": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev", "dev-windows": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev", + "dev-macos": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev", "build": "next build", "start": "PORT=3005 next start", "analyze": "BUNDLE_ANALYZE=both yarn build", diff --git a/pages/checkout.tsx b/pages/checkout.tsx index ae502f0e9..860f04bc1 100644 --- a/pages/checkout.tsx +++ b/pages/checkout.tsx @@ -4,7 +4,8 @@ import { CheckoutPage } from 'src/components/modules/checkout'; export default function Checkout() { return ( <> - + + ) } diff --git a/src/components/common/Layout/LayoutContent/LayoutContent.tsx b/src/components/common/Layout/LayoutContent/LayoutContent.tsx index 7bfddafe7..87a224366 100644 --- a/src/components/common/Layout/LayoutContent/LayoutContent.tsx +++ b/src/components/common/Layout/LayoutContent/LayoutContent.tsx @@ -1,7 +1,6 @@ import { useRouter } from 'next/router' import { FC } from 'react' import { useMessage } from 'src/components/contexts' -import { useModalCommon } from 'src/components/hooks' import { FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils' import { CartDrawer, Footer, MessageCommon, ScrollToTop } from '../..' import Header from '../../Header/Header' diff --git a/src/components/common/LayoutCheckout/LayoutCheckout.tsx b/src/components/common/LayoutCheckout/LayoutCheckout.tsx index 06c632418..68490c87a 100644 --- a/src/components/common/LayoutCheckout/LayoutCheckout.tsx +++ b/src/components/common/LayoutCheckout/LayoutCheckout.tsx @@ -1,3 +1,4 @@ +import { MessageProvider } from 'src/components/contexts' import s from './LayoutCheckout.module.scss' interface Props { @@ -6,14 +7,18 @@ interface Props { const LayoutCheckout = ({ children }: Props) => { return ( -
-
{children}
-
-
- © 2021 Online Grocery + <> + +
+
{children}
+
+
+ © 2021 Online Grocery +
+
-
-
+ + ) } diff --git a/src/components/common/MessageCommon/MessageCommon.tsx b/src/components/common/MessageCommon/MessageCommon.tsx index f15f8f443..16040d963 100644 --- a/src/components/common/MessageCommon/MessageCommon.tsx +++ b/src/components/common/MessageCommon/MessageCommon.tsx @@ -1,4 +1,4 @@ -import React, { memo, useEffect } from 'react' +import React, { memo } from 'react' import s from './MessageCommon.module.scss' import MessageItem, { MessageItemProps } from './MessageItem/MessageItem' diff --git a/src/components/contexts/Message/MessageContext.tsx b/src/components/contexts/Message/MessageContext.tsx index f9399498e..fef8497c0 100644 --- a/src/components/contexts/Message/MessageContext.tsx +++ b/src/components/contexts/Message/MessageContext.tsx @@ -6,7 +6,7 @@ export type MessageContextType = { removeMessage: (id: number) => void showMessageSuccess: (content: string, timeout?: number) => void showMessageInfo: (content: string, timeout?: number) => void - showMessageError: (content: string, timeout?: number) => void + showMessageError: (content?: string, timeout?: number) => void showMessageWarning: (content: string, timeout?: number) => void } export const DEFAULT_MESSAGE_CONTEXT: MessageContextType = { diff --git a/src/components/contexts/Message/MessageProvider.tsx b/src/components/contexts/Message/MessageProvider.tsx index 0ccde8609..bf2706f5e 100644 --- a/src/components/contexts/Message/MessageProvider.tsx +++ b/src/components/contexts/Message/MessageProvider.tsx @@ -1,5 +1,6 @@ -import { ReactNode, useCallback, useState } from 'react' +import { ReactNode, useState } from 'react' import { MessageItemProps } from 'src/components/common/MessageCommon/MessageItem/MessageItem' +import { LANGUAGE } from 'src/utils/language.utils' import { MessageContext } from './MessageContext' type Props = { @@ -33,8 +34,8 @@ export function MessageProvider({ children }: Props) { createNewMessage(content, timeout, 'info') } - const showMessageError = (content: string, timeout?: number) => { - createNewMessage(content, timeout, 'error') + const showMessageError = (content?: string, timeout?: number) => { + createNewMessage(content || LANGUAGE.MESSAGE.ERROR, timeout, 'error') } const showMessageWarning = (content: string, timeout?: number) => { diff --git a/src/components/hooks/cart/useGetActiveOrder.tsx b/src/components/hooks/cart/useGetActiveOrder.tsx index 4c26a1786..c8898c222 100644 --- a/src/components/hooks/cart/useGetActiveOrder.tsx +++ b/src/components/hooks/cart/useGetActiveOrder.tsx @@ -1,4 +1,3 @@ -import { Cart } from '@commerce/types/cart' import { ActiveOrderQuery } from '@framework/schema' import { cartFragment } from '@framework/utils/fragments/cart-fragment' import { normalizeCart } from '@framework/utils/normalize' diff --git a/src/components/hooks/order/index.ts b/src/components/hooks/order/index.ts new file mode 100644 index 000000000..f644f7917 --- /dev/null +++ b/src/components/hooks/order/index.ts @@ -0,0 +1,2 @@ +export { default as useSetCustomerForOrder } from './useSetCustomerForOrder' + diff --git a/src/components/hooks/order/useSetCustomerForOrder.tsx b/src/components/hooks/order/useSetCustomerForOrder.tsx new file mode 100644 index 000000000..521c72be2 --- /dev/null +++ b/src/components/hooks/order/useSetCustomerForOrder.tsx @@ -0,0 +1,47 @@ +import { CreateCustomerInput, SetCustomerForOrderMutation } from '@framework/schema' +import { setCustomerForOrderMutation } from '@framework/utils/mutations/set-customer-order-mutation' +import { useState } from 'react' +import { CommonError } from 'src/domains/interfaces/CommonError' +import rawFetcher from 'src/utils/rawFetcher' +import { useGetActiveOrder } from '../cart' + + +const useSetCustomerForOrder = () => { + const [loading, setLoading] = useState(false) + const [error, setError] = useState(null) + const { mutate } = useGetActiveOrder() + + const setCustomerForOrder = (input: CreateCustomerInput, + fCallBack: (isSuccess: boolean, message?: string) => void + ) => { + setError(null) + setLoading(true) + rawFetcher({ + query: setCustomerForOrderMutation, + variables: {input}, + }) + .then(({ data, headers }) => { + console.log("data here: ", data) + if (data.setCustomerForOrder.__typename === 'ActiveOrderCustomerFragment') { + console.log("success: ") + + fCallBack(true) + mutate() + } else { + console.log("fail ") + + fCallBack(false, data.setCustomerForOrder.message) + } + + }) + .catch((error) => { + setError(error) + fCallBack(false, error.message) + }) + .finally(() => setLoading(false)) + } + + return { loading, setCustomerForOrder, error } +} + +export default useSetCustomerForOrder diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx index 7e4715986..50c19fa30 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx +++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx @@ -2,6 +2,8 @@ import Link from 'next/link' import React, { useRef } from 'react' import { ButtonCommon, Inputcommon } from 'src/components/common' import InputCommon from 'src/components/common/InputCommon/InputCommon' +import { useMessage } from 'src/components/contexts' +import { useSetCustomerForOrder } from 'src/components/hooks/order' import { ROUTE } from 'src/utils/constanst.utils' import { CheckOutForm } from 'src/utils/types.utils' import s from './CustomerInfoForm.module.scss' @@ -13,13 +15,26 @@ interface CustomerInfoFormProps { const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => { const nameRef = useRef>(null) const emailRef = useRef>(null) + const { setCustomerForOrder, loading } = useSetCustomerForOrder() + const { showMessageError } = useMessage() const handleConfirmClick = () => { - onConfirm && - onConfirm(id, { - name: nameRef?.current?.getValue().toString(), - email: emailRef.current?.getValue().toString(), - }) + setCustomerForOrder({ firstName: 'Ly', lastName: 'Tran', emailAddress: 'test7@gmail.com' }, onSubmitCalBack) + // onConfirm && + // onConfirm(id, { + // name: nameRef?.current?.getValue().toString(), + // email: emailRef.current?.getValue().toString(), + // }) + } + const onSubmitCalBack = (isSuccess: boolean, msg?: string) => { + // TODO: + if (isSuccess) { + + } else { + console.log("error here") + showMessageError(msg) + } + } return ( diff --git a/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx index 8cfcc31f3..4755d329e 100644 --- a/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx +++ b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx @@ -1,5 +1,7 @@ import classNames from 'classnames' import React, { useState } from 'react' +import { MessageCommon } from 'src/components/common' +import { useMessage } from 'src/components/contexts' import IconHide from 'src/components/icons/IconHide' import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data' import { CheckoutBill, CheckoutInfo } from '..' @@ -8,7 +10,9 @@ interface CheckoutPageProps { } const CheckoutPage = ({}: CheckoutPageProps) => { + const { messages, removeMessage } = useMessage() const [isShow, setIsShow] = useState(false) + const onClose = () => { setIsShow(false) } @@ -17,6 +21,7 @@ const CheckoutPage = ({}: CheckoutPageProps) => { } return (
+
From 2667facd98b80d4e6832ddce5df437b531816774 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 18 Oct 2021 19:52:22 +0700 Subject: [PATCH 4/7] :sparkles: feat: (checkout) fill out customer info in order :%s --- .../components/FormLogin/FormLogin.tsx | 8 +- .../ChekoutNotePolicy.module.scss | 6 + .../ChekoutNotePolicy/ChekoutNotePolicy.tsx | 31 +++++ .../CustomerInfoForm.module.scss | 7 - .../CustomerInfoForm/CustomerInfoForm.tsx | 130 ++++++++++++------ src/styles/_utilities.scss | 2 +- src/utils/language.utils.ts | 5 +- 7 files changed, 132 insertions(+), 57 deletions(-) create mode 100644 src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss create mode 100644 src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.tsx diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx index 279137a84..3f4ac6816 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx @@ -17,11 +17,11 @@ interface Props { onSwitch: () => void } -const DisplayingErrorMessagesSchema = Yup.object().shape({ - email: Yup.string().email('Your email was wrong').required('Required'), +const displayingErrorMessagesSchema = Yup.object().shape({ + email: Yup.string().email(LANGUAGE.MESSAGE.INVALID_EMAIL).required(LANGUAGE.MESSAGE.REQUIRED), password: Yup.string() .max(30, 'Password is too long') - .required('Required'), + .required(LANGUAGE.MESSAGE.REQUIRED), }) const FormLogin = ({ onSwitch, isHide }: Props) => { @@ -56,7 +56,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => { password: '', email: '', }} - validationSchema={DisplayingErrorMessagesSchema} + validationSchema={displayingErrorMessagesSchema} onSubmit={onLogin} > diff --git a/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss b/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss new file mode 100644 index 000000000..83f678cf2 --- /dev/null +++ b/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss @@ -0,0 +1,6 @@ +@import "../../../../../../styles/utilities"; + +.chekoutNotePolicy { + @apply caption; + margin-bottom: 1.6rem; +} diff --git a/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.tsx b/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.tsx new file mode 100644 index 000000000..9c988ae03 --- /dev/null +++ b/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.tsx @@ -0,0 +1,31 @@ +import Link from 'next/link' +import React, { memo } from 'react' +import { ROUTE } from 'src/utils/constanst.utils' +import s from './ChekoutNotePolicy.module.scss' + +const ChekoutNotePolicy = memo(() => { + return ( +
+ By clicking continue you agree to Casper's{' '} + { + + + terms and conditions + + + }{' '} + and{' '} + { + + + privacy policy + + + } + . +
+ ) +}) + +ChekoutNotePolicy.displayName = 'ChekoutNotePolicy' +export default ChekoutNotePolicy diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss index 863a716b8..10dd6ec36 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss +++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss @@ -10,15 +10,8 @@ .bottom{ margin-top: 2.4rem; @apply flex justify-between items-center; - .note{ - font-size: 1.2rem; - line-height: 2rem; - } @screen sm-only { @apply flex-col items-start; - .button { - padding-top: 2rem; - } } } diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx index 50c19fa30..8df2ab1fb 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx +++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx @@ -1,25 +1,34 @@ -import Link from 'next/link' +import { Form, Formik } from 'formik' import React, { useRef } from 'react' -import { ButtonCommon, Inputcommon } from 'src/components/common' -import InputCommon from 'src/components/common/InputCommon/InputCommon' +import { ButtonCommon, InputFiledInForm } from 'src/components/common' import { useMessage } from 'src/components/contexts' import { useSetCustomerForOrder } from 'src/components/hooks/order' -import { ROUTE } from 'src/utils/constanst.utils' -import { CheckOutForm } from 'src/utils/types.utils' +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 s from './CustomerInfoForm.module.scss' -interface CustomerInfoFormProps { - onConfirm?: (id: number, formInfo: CheckOutForm) => void - id: number +interface Props { + isHide: boolean + onSwitch: () => void } -const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => { - const nameRef = useRef>(null) - const emailRef = useRef>(null) +const displayingErrorMessagesSchema = Yup.object().shape({ + firstName: Yup.string().required(LANGUAGE.MESSAGE.REQUIRED), + lastName: Yup.string().required(LANGUAGE.MESSAGE.REQUIRED), + emailAddress: Yup.string().email(LANGUAGE.MESSAGE.INVALID_EMAIL).required(LANGUAGE.MESSAGE.REQUIRED), +}) + +const CustomerInfoForm = ({ onSwitch, isHide }: Props) => { + const firstNameRef = useRef(null) + const emailRef = useRef(null) const { setCustomerForOrder, loading } = useSetCustomerForOrder() const { showMessageError } = useMessage() - const handleConfirmClick = () => { - setCustomerForOrder({ firstName: 'Ly', lastName: 'Tran', emailAddress: 'test7@gmail.com' }, onSubmitCalBack) + const handleSubmit = (values: { firstName: string, lastName: string, emailAddress: string }) => { + console.log('on submit: ', values) + const { firstName, lastName, emailAddress } = values + setCustomerForOrder({ firstName, lastName, emailAddress }, onSubmitCalBack) // onConfirm && // onConfirm(id, { // name: nameRef?.current?.getValue().toString(), @@ -28,8 +37,9 @@ const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => { } const onSubmitCalBack = (isSuccess: boolean, msg?: string) => { // TODO: + console.log("result: ", isSuccess, msg) if (isSuccess) { - + } else { console.log("error here") showMessageError(msg) @@ -38,38 +48,70 @@ const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => { } return ( -
+
- - + + {({ errors, touched, isValid, submitForm }) => ( +
+
+
+ + + +
+ +
+
+ + + Continue to Shipping + +
+
+ )} +
-
-
- By clicking continue you agree to Casper's{' '} - { - - - terms and conditions - - - }{' '} - and{' '} - { - - - privacy policy - - - } - . -
-
- - Continue to Shipping - -
-
-
+ ) } diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index af566560a..570c1069d 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -201,7 +201,7 @@ } } .line { - @apply flex justify-between items-center; + @apply flex justify-between items-start; > div { flex: 1; &:not(:last-child) { diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts index 921c29435..2005f900d 100644 --- a/src/utils/language.utils.ts +++ b/src/utils/language.utils.ts @@ -11,6 +11,9 @@ export const LANGUAGE = { SEARCH: 'Search', }, MESSAGE: { - ERROR: 'Something went wrong! Please try again!' + ERROR: 'Something went wrong! Please try again!', + INVALID_EMAIL: 'Your email was wrong', + REQUIRED: 'Required', + } } \ No newline at end of file From ae8bb2840287f1aab64f867cb9900d58c5a468ff Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 19 Oct 2021 11:07:47 +0700 Subject: [PATCH 5/7] :wrench: config: cookie :%s --- .../hooks/order/useSetCustomerForOrder.tsx | 9 ++------ .../ShippingInfoForm/ShippingInfoForm.tsx | 2 ++ src/utils/fetcher.ts | 12 ++++++---- src/utils/rawFetcher.ts | 22 +++++++++++-------- 4 files changed, 25 insertions(+), 20 deletions(-) diff --git a/src/components/hooks/order/useSetCustomerForOrder.tsx b/src/components/hooks/order/useSetCustomerForOrder.tsx index 521c72be2..a209c107e 100644 --- a/src/components/hooks/order/useSetCustomerForOrder.tsx +++ b/src/components/hooks/order/useSetCustomerForOrder.tsx @@ -18,18 +18,13 @@ const useSetCustomerForOrder = () => { setLoading(true) rawFetcher({ query: setCustomerForOrderMutation, - variables: {input}, + variables: { input }, }) - .then(({ data, headers }) => { - console.log("data here: ", data) + .then(({ data }) => { if (data.setCustomerForOrder.__typename === 'ActiveOrderCustomerFragment') { - console.log("success: ") - fCallBack(true) mutate() } else { - console.log("fail ") - fCallBack(false, data.setCustomerForOrder.message) } diff --git a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx index 04217d706..64fe3ce6e 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx +++ b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx @@ -14,9 +14,11 @@ interface ShippingInfoFormProps { const option = [ { name: 'Hồ Chí Minh', + value: 'Hồ Chí Minh', }, { name: 'Hà Nội', + value: 'Hà Nội', }, ] diff --git a/src/utils/fetcher.ts b/src/utils/fetcher.ts index a86367398..a0c5222cc 100644 --- a/src/utils/fetcher.ts +++ b/src/utils/fetcher.ts @@ -1,4 +1,4 @@ -import { request } from 'graphql-request' +import { GraphQLClient } from 'graphql-request' import { RequestDocument, Variables } from 'graphql-request/dist/types' import { LOCAL_STORAGE_KEY } from './constanst.utils' @@ -12,11 +12,15 @@ interface QueryOptions { const fetcher = async (options: QueryOptions): Promise => { const { query, variables } = options const token = localStorage.getItem(LOCAL_STORAGE_KEY.TOKEN) - const res = await request( - process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string, + const graphQLClient = new GraphQLClient(process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string, { + credentials: 'include', + mode: 'cors', + headers: token ? { Authorization: 'Bearer ' + token } : {}, + }) + + const res = await graphQLClient.request( query, variables, - token ? { Authorization: 'Bearer ' + token } : {} ) return res diff --git a/src/utils/rawFetcher.ts b/src/utils/rawFetcher.ts index c26b2ab20..6c87dc4a9 100644 --- a/src/utils/rawFetcher.ts +++ b/src/utils/rawFetcher.ts @@ -1,7 +1,6 @@ -import { rawRequest } from 'graphql-request' +import { GraphQLClient } from 'graphql-request' import { RequestDocument, Variables } from 'graphql-request/dist/types' import { LOCAL_STORAGE_KEY } from './constanst.utils' - interface QueryOptions { query: RequestDocument variables?: Variables @@ -16,15 +15,20 @@ const rawFetcher = ({ }: QueryOptions): Promise<{ data: T; headers: any }> => { onLoad(true) const token = localStorage.getItem(LOCAL_STORAGE_KEY.TOKEN) - return rawRequest( - process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string, + + const graphQLClient = new GraphQLClient(process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string, { + credentials: 'include', + mode: 'cors', + headers: token ? { Authorization: 'Bearer ' + token } : {}, + }) + + return graphQLClient.rawRequest( query as string, variables, - token ? { Authorization: 'Bearer ' + token } : {} - ) - .then(({ data, headers }) => { - return { data, headers } - }) + ) + .then(({ data, headers }) => { + return { data, headers } + }) .finally(() => onLoad(false)) } From 107585b0322134a4e80c459112e9e335fff8fa34 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 19 Oct 2021 11:08:25 +0700 Subject: [PATCH 6/7] :sparkles: feat: test checkout :%s --- .../checkout/CheckoutInfo/CheckoutInfo.tsx | 72 ++++++++++++------- 1 file changed, 45 insertions(+), 27 deletions(-) diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx index 423f92635..0a07a6c5b 100644 --- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx +++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' -import { Logo } from 'src/components/common' +import { ButtonCommon, Logo } from 'src/components/common' import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse' +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' @@ -8,43 +9,43 @@ import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm' import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm' import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm' interface CheckoutInfoProps { - onViewCart:()=>void + onViewCart: () => void } -const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => { +const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => { const [active, setActive] = useState(1) const [done, setDone] = useState([]) const [info, setInfo] = useState({}) - const onEdit = (id:number) => { - setActive(id) - setDone(removeItem(done,id)) - } + const onEdit = (id: number) => { + setActive(id) + setDone(removeItem(done, id)) + } - const onConfirm = (id:number,formInfo:CheckOutForm) => { - if(id+1>formList.length){ - console.log({...info,...formInfo}) - }else{ - if(done.length>0){ - for (let i = id+1; i <= formList.length; i++) { - if(!done.includes(i)){ + const onConfirm = (id: number, formInfo: CheckOutForm) => { + if (id + 1 > formList.length) { + console.log({ ...info, ...formInfo }) + } else { + if (done.length > 0) { + for (let i = id + 1; i <= formList.length; i++) { + if (!done.includes(i)) { setActive(i) } } - }else{ - setActive(id+1) + } else { + setActive(id + 1) } - setDone([...done,id]) - } - setInfo({...info,...formInfo}) - } + setDone([...done, id]) + } + setInfo({ ...info, ...formInfo }) + } - const getNote = (id:number) => { + const getNote = (id: number) => { switch (id) { case 1: return `${info.name}, ${info.email}` - case 2: - return `${info.address}, ${info.state}, ${info.city}, ${info.code}, ${info.phone}, ` + case 2: + return `${info.address}, ${info.state}, ${info.city}, ${info.code}, ${info.phone}, ` default: return "" } @@ -54,21 +55,38 @@ const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => { { id: 1, title: 'Customer Information', - form: , + form: , }, { id: 2, title: 'Shipping Information', - form: , + form: , }, { id: 3, title: 'Payment Information', - form: , + form: , }, ] + + // TODO: remove + const { addProduct } = useAddProductToCart() + + const createOrder = () => { + addProduct({ variantId: "63", quantity: 1 }, handleAddToCartCallback) + } + const handleAddToCartCallback = (isSuccess: boolean, message?: string) => { + console.log("after create order: ", isSuccess, message) + + } + + const {order} = useGetActiveOrder() + console.log("active order: ", order) + return (
+ test create order + test get active order
View cart
@@ -76,7 +94,7 @@ const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => { {formList.map((item) => { let note = getNote(item.id) return Date: Tue, 19 Oct 2021 11:09:25 +0700 Subject: [PATCH 7/7] :fire: remove: log :%s --- src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx index 0a07a6c5b..bec1fd132 100644 --- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx +++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx @@ -76,12 +76,11 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => { addProduct({ variantId: "63", quantity: 1 }, handleAddToCartCallback) } const handleAddToCartCallback = (isSuccess: boolean, message?: string) => { - console.log("after create order: ", isSuccess, message) + // console.log("after create order: ", isSuccess, message) } const {order} = useGetActiveOrder() - console.log("active order: ", order) return (