✨ feat: setCustomerForOrder

:%s

framework/vendure/schema.d.ts

@@ -306,6 +306,49 @@ export type MutationResetPasswordArgs = {
   password: Scalars['String']
 }
 
+export type ActiveOrderCustomerFragment = Pick<Order, 'id'> & {
+  customer?: Maybe<Pick<Customer, 'id' | 'emailAddress' | 'firstName' | 'lastName'>>;
+  lines: Array<Pick<OrderLine, 'id'>>;
+};
+
+export type SetCustomerForOrderMutationVariables = Exact<{
+  input: CreateCustomerInput;
+}>;
+
+export type SetCustomerForOrderMutation = { __typename?: 'Mutation' } & {
+  setCustomerForOrder:
+  | ({ __typename: 'ActiveOrderCustomerFragment' } & Pick<ActiveOrderCustomerFragment, 'customer', 'lines'>)
+  | ({ __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<ActiveOrderCustomerFragment, 'customer', 'lines'>)
+  | ({ __typename: 'AlreadyLoggedInError' } & Pick<
+    AlreadyLoggedInError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'EmailAddressConflictError' } & Pick<
+    EmailAddressConflictError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NoActiveOrderError' } & Pick<
+    NoActiveOrderError,
+    'errorCode' | 'message'
+  >)
+}
+
 export type Address = Node & {
   updateCustomerAddress:
   | {

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
+    }
+  }
+}
+`

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",

pages/checkout.tsx

@@ -5,6 +5,7 @@ export default function Checkout() {
   return (
     <>
       <CheckoutPage />
+
     </>
   )
 }

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'

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,6 +7,8 @@ interface Props {
 
 const LayoutCheckout = ({ children }: Props) => {
     return (
+        <>
+            <MessageProvider>
                 <div className={s.layoutCheckout}>
                     <main>{children}</main>
                     <footer className={s.footer}>
@@ -14,6 +17,8 @@ const LayoutCheckout = ({ children }: Props) => {
                         </div>
                     </footer>
                 </div>
+            </MessageProvider>
+        </>
     )
 }
 

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'
 

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 = {

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) => {

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'

src/components/hooks/order/index.ts

@@ -0,0 +1,2 @@
+export { default as useSetCustomerForOrder } from './useSetCustomerForOrder'
+

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<CommonError | null>(null)
+  const { mutate } = useGetActiveOrder()
+
+  const setCustomerForOrder = (input: CreateCustomerInput,
+    fCallBack: (isSuccess: boolean, message?: string) => void
+  ) => {
+    setError(null)
+    setLoading(true)
+    rawFetcher<SetCustomerForOrderMutation>({
+      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

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<React.ElementRef<typeof InputCommon>>(null)
   const emailRef = useRef<React.ElementRef<typeof InputCommon>>(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 (

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 (
         <div className={s.warrper}>
+            <MessageCommon messages={messages} onRemove={removeMessage} />
             <div className={s.left}><CheckoutInfo onViewCart = {onViewCart}/></div>
             <div className={s.right}><CheckoutBill data={CHECKOUT_BILL_DATA}/></div>
             <div className={classNames({ [s.mobile] :true,[s.isShow]: isShow})}>