feat: Rewrite OrderContext and OrderReducer, minimize API requests

package.json

@@ -106,15 +106,15 @@
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-istanbul": "^6.1.1",
-    "eslint": "^8.1.0",
     "dotenv": "^10.0.0",
+    "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.3.1",
     "next": "^12.0.1",
-    "playwright": "^1.16.2",
+    "playwright": "^1.16.3",
     "postcss": "^8.3.11",
     "postcss-loader": "^6.2.0",
     "prettier": "^2.4.1",

pages/order.tsx

@@ -1,5 +1,8 @@
 import React, { useState, useEffect, Fragment } from 'react'
-import { getSalesChannelToken } from '@commercelayer/js-auth'
+import {
+  getIntegrationToken,
+  getSalesChannelToken,
+} from '@commercelayer/js-auth'
 import CommerceLayer from '../src/components/CommerceLayer'
 import { Nav } from '.'
 import OrderContainer from '../src/components/OrderContainer'
@@ -29,26 +32,27 @@ import AvailabilityTemplate from '../src/components/AvailabilityTemplate'
 import ItemContainer from '../src/components/ItemContainer'
 import Errors from '../src/components/Errors'
 import OrderStorage from '#components/OrderStorage'
+import { AddToCartButtonTemplate } from '@commercelayer/react-components'
 
 const clientId = process.env.NEXT_PUBLIC_CLIENT_ID as string
 const endpoint = process.env.NEXT_PUBLIC_ENDPOINT as string
 const scope = process.env.NEXT_PUBLIC_MARKET_ID as string
 
-const CustomAddToCart = (props: any) => {
-  const classes = props.disabled ? 'opacity-50 cursor-not-allowed' : ''
+const CustomAddToCart = (props: AddToCartButtonTemplate) => {
+  const { handleClick, disabled, className, ...p } = props
+  const classes = disabled ? 'opacity-50 cursor-not-allowed' : ''
   const myClick = async () => {
-    const { success } = await props.handleClick()
+    const { success } = await handleClick()
     if (success) {
       // NOTE: dispatch your callback or animation
     }
   }
   return (
     <button
-      className={`${classes} ${props.className}`}
+      className={`${classes} ${className}`}
       onClick={myClick}
-      disabled={props.disabled}
-      data-cy={props['data-cy']}
-      {...props}
+      disabled={disabled}
+      {...p}
     >
       Custom add to cart
     </button>
@@ -94,6 +98,7 @@ export default function Order() {
                 <div className="md:flex">
                   <div className="md:flex-shrink-0">
                     <img
+                      title="Tuta da bambino"
                       className="rounded-lg md:w-56"
                       src="https://img.commercelayer.io/skus/BABYONBU000000E63E74.png?fm=jpg&q=90"
                     />
@@ -165,7 +170,7 @@ export default function Order() {
               </ItemContainer>
               <Errors resource="orders" />
               <h1 className="text-4xl border-b-2 my-5">Shopping Bag</h1>
-              {/* <LineItemsContainer>
+              <LineItemsContainer>
                 <p className="text-sm m-2">
                   Your shopping bag contains{' '}
                   <LineItemsCount data-cy="items-count" className="font-bold" />{' '}
@@ -183,7 +188,7 @@ export default function Order() {
                       />
                       <Errors
                         className="text-red-700 p-2"
-                        resource="lineItem"
+                        resource="line_items"
                         field="quantity"
                       />
                       <LineItemAmount
@@ -217,7 +222,7 @@ export default function Order() {
                     </div>
                   </LineItem>
                 </div>
-              </LineItemsContainer> */}
+              </LineItemsContainer>
               <div className="flex flex-col w-1/2 m-auto">
                 <div className="flex items-center p-2 justify-around font-medium text-left">
                   <div className="w-full">

specs/e2e/order.spec.ts

@@ -39,7 +39,13 @@ test('Order', async ({ page, browser }) => {
   const subTotalAmount = await await page.textContent(
     '[data-test=subtotal-amount]'
   )
+  const discoutAmount = await await page.textContent(
+    '[data-test=discount-amount]'
+  )
+  const totalAmount = await await page.textContent('[data-test=total-amount]')
   expect(subTotalAmount).toBe('€29,00')
+  expect(discoutAmount).toBe('€0,00')
+  expect(totalAmount).toBe('€29,00')
   // await page.pause()
   // const filterdPrice = await page.textContent('data-test=price-filter-0')
   // const compareFilteredPrice = await page.textContent(

specs/e2e/utils/response.ts

@@ -1,4 +1,3 @@
 export const waitForResponse = (s) => (resp) => {
-  console.log(`url`, resp.url())
   return resp.url().includes(s) && [200, 201].includes(resp.status())
 }

src/components/AddToCartButton.tsx

@@ -23,8 +23,7 @@ const displayName = components.AddToCartButton.displayName
 
 type ChildrenProps = {
   handleClick: () => AddToCartReturn
-} & Omit<AddToCartButtonProps, 'children'> &
-  PropsWithoutRef<JSX.IntrinsicElements['button']>
+} & Omit<AddToCartButtonProps, 'children'>
 
 type AddToCartButtonChildrenProps = FunctionChildren<ChildrenProps>
 

src/components/LineItem.tsx

@@ -10,7 +10,6 @@ import components from '#config/components'
 import { LineItemType } from '#typings'
 import ShipmentChildrenContext from '#context/ShipmentChildrenContext'
 import { isEmpty } from 'lodash'
-import { LineItemCollection } from '@commercelayer/js-sdk'
 
 const propTypes = components.LineItem.propTypes
 const displayName = components.LineItem.displayName
@@ -24,13 +23,11 @@ const LineItem: FunctionComponent<LineItemProps> = (props) => {
   const { type = 'skus', children } = props
   const { lineItems } = useContext(LineItemContext)
   const { lineItems: shipmentLineItems } = useContext(ShipmentChildrenContext)
-  const items = isEmpty(shipmentLineItems)
-    ? (lineItems as LineItemCollection[])
-    : (shipmentLineItems as LineItemCollection[])
+  const items = isEmpty(shipmentLineItems) ? lineItems : shipmentLineItems
   const components =
     items &&
     items
-      .filter((l) => l.itemType === type)
+      .filter((l) => l.item_type === type)
       .map((lineItem, k) => {
         const lineProps = {
           lineItem,

src/components/LineItemImage.tsx

@@ -17,15 +17,15 @@ type LineItemImageProps = {
 
 const LineItemImage: FunctionComponent<LineItemImageProps> = (props) => {
   const { lineItem } = useContext(LineItemChildrenContext)
-  const src = lineItem['imageUrl']
+  const src = lineItem.image_url
   const parenProps = {
     src,
     ...props,
   }
   return props.children ? (
     <Parent {...parenProps}>{props.children}</Parent>
   ) : (
-    <img src={src} {...props} />
+    <img alt="" src={src} {...props} />
   )
 }
 

src/components/LineItemsContainer.tsx

@@ -29,18 +29,28 @@ type LineItemsContainer = {
 
 const LineItemsContainer: FunctionComponent<LineItemsContainer> = (props) => {
   const { children, filters = {}, loader = 'Loading...' } = props
-  const { order, getOrder, orderId } = useContext(OrderContext)
+  const { order, addResourceToInclude, include, orderId, getOrder } =
+    useContext(OrderContext)
   const config = useContext(CommerceLayerContext)
   const [state, dispatch] = useReducer(lineItemReducer, lineItemInitialState)
   useEffect(() => {
-    if (!isEmpty(order)) {
-      order &&
-        getLineItems({
-          order,
-          dispatch,
-          config,
-          filters,
-        })
+    if (!include?.includes('line_items.line_item_options.sku_option')) {
+      addResourceToInclude({
+        newResource: 'line_items.line_item_options.sku_option',
+      })
+    }
+    if (!isEmpty(order) && order?.line_items) {
+      dispatch({
+        type: 'setLineItems',
+        payload: { lineItems: order.line_items },
+      })
+      // order &&
+      //   getLineItems({
+      //     order,
+      //     dispatch,
+      //     config,
+      //     filters,
+      //   })
     }
     return (): void => {
       if (isEmpty(order)) {

src/components/OrderContainer.tsx

@@ -4,31 +4,24 @@ import React, {
   useReducer,
   useContext,
   ReactNode,
+  useMemo,
 } from 'react'
 import orderReducer, {
-  orderInitialState,
   AddToCartValues,
   createOrder,
-  removeGiftCardOrCouponCode,
-} from '#reducers/OrderReducer'
-import CommerceLayerContext from '#context/CommerceLayerContext'
-import OrderContext from '#context/OrderContext'
-import {
   getApiOrder,
-  addToCart,
-  OrderState,
   setOrderErrors,
-  saveAddressToCustomerAddressBook,
   setOrder,
+  OrderCodeType,
+  AddResourceToInclude,
+  orderInitialState,
 } from '#reducers/OrderReducer'
+import CommerceLayerContext from '#context/CommerceLayerContext'
+import OrderContext, { defaultOrderContext } from '#context/OrderContext'
 import { unsetOrderState } from '#reducers/OrderReducer'
 import components from '#config/components'
 import { BaseMetadataObject } from '#typings'
 import OrderStorageContext from '#context/OrderStorageContext'
-import {
-  setGiftCardOrCouponCode,
-  OrderCodeType,
-} from '../reducers/OrderReducer'
 import { OrderCreate, Order } from '@commercelayer/sdk'
 
 const propTypes = components.OrderContainer.propTypes
@@ -71,57 +64,70 @@ const OrderContainer: FunctionComponent<OrderContainerProps> = (props) => {
             persistKey,
             clearWhenPlaced,
             deleteLocalOrder,
+            state,
           })
         }
       }
     }
     return (): void => unsetOrderState(dispatch)
   }, [config.accessToken])
-  const orderValue = {
-    ...state,
-    setOrder: (order: Order) => setOrder(order, dispatch),
-    getOrder: (id: string): Promise<void | Order> =>
-      getApiOrder({ id, dispatch, config }),
-    setOrderErrors: (errors: any) => setOrderErrors({ dispatch, errors }),
-    createOrder: async (): Promise<string> =>
-      await createOrder({
-        persistKey,
-        dispatch,
-        config,
-        state,
-        orderMetadata: metadata,
-        orderAttributes: attributes,
-      }),
-    addToCart: (values: AddToCartValues): Promise<{ success: boolean }> =>
-      addToCart({
-        ...values,
-        persistKey,
-        dispatch,
-        state,
-        config,
-        errors: state.errors,
-        orderMetadata: metadata || {},
-        orderAttributes: attributes,
-        setLocalOrder,
-      }),
-    saveAddressToCustomerAddressBook: (
-      type: 'BillingAddress' | 'ShippingAddress',
-      value: boolean
-    ) => saveAddressToCustomerAddressBook({ type, value, dispatch }),
-    setGiftCardOrCouponCode: ({ code }: { code: string }) =>
-      setGiftCardOrCouponCode({ code, dispatch, order: state.order, config }),
-    removeGiftCardOrCouponCode: ({ codeType }: { codeType: OrderCodeType }) =>
-      removeGiftCardOrCouponCode({
-        codeType,
-        dispatch,
-        order: state.order,
-        config,
-      }),
-  }
+  const orderValue = useMemo(() => {
+    return {
+      ...state,
+      setOrder: (order: Order) => setOrder(order, dispatch),
+      getOrder: (id: string): Promise<void | Order> =>
+        getApiOrder({ id, dispatch, config, state }),
+      setOrderErrors: (errors: any) => setOrderErrors({ dispatch, errors }),
+      createOrder: async (): Promise<string> =>
+        await createOrder({
+          persistKey,
+          dispatch,
+          config,
+          state,
+          orderMetadata: metadata,
+          orderAttributes: attributes,
+        }),
+      addToCart: (values: AddToCartValues): Promise<{ success: boolean }> =>
+        defaultOrderContext['addToCart']({
+          ...values,
+          persistKey,
+          dispatch,
+          state,
+          config,
+          errors: state.errors,
+          orderMetadata: metadata || {},
+          orderAttributes: attributes,
+          setLocalOrder,
+        }),
+      saveAddressToCustomerAddressBook: (args: any) =>
+        defaultOrderContext['saveAddressToCustomerAddressBook']({
+          ...args,
+          dispatch,
+        }),
+      setGiftCardOrCouponCode: ({ code }: { code: string }) =>
+        defaultOrderContext['setGiftCardOrCouponCode']({
+          code,
+          dispatch,
+          order: state.order,
+          config,
+        }),
+      removeGiftCardOrCouponCode: ({ codeType }: { codeType: OrderCodeType }) =>
+        defaultOrderContext['removeGiftCardOrCouponCode']({
+          codeType,
+          dispatch,
+          order: state.order,
+          config,
+        }),
+      addResourceToInclude: (args: AddResourceToInclude) =>
+        defaultOrderContext['addResourceToInclude']({
+          ...args,
+          dispatch,
+          resourcesIncluded: state.include,
+        }),
+    }
+  }, [state])
   return (
-    <OrderContext.Provider value={orderValue as OrderState}>
-      {children}
-    </OrderContext.Provider>
+    <OrderContext.Provider value={orderValue}>{children}</OrderContext.Provider>
   )
 }
 

src/context/LineItemChildrenContext.ts

@@ -1,8 +1,8 @@
 import { createContext } from 'react'
-import { LineItemCollection } from '@commercelayer/js-sdk'
+import { LineItem } from '@commercelayer/sdk'
 
 export interface InitialLineItemContext {
-  lineItem: LineItemCollection | Record<string, any>
+  lineItem: LineItem | Record<string, any>
 }
 
 const initial: InitialLineItemContext = {

src/context/LineItemContext.ts

@@ -1,9 +1,9 @@
 import { createContext } from 'react'
 import { LineItemState } from '#reducers/LineItemReducer'
-import { LineItemCollection } from '@commercelayer/js-sdk'
+import { LineItem } from '@commercelayer/sdk'
 
 export interface LineItemContextValue extends LineItemState {
-  lineItems: LineItemCollection[] | undefined
+  lineItems: LineItem[] | undefined
 }
 
 const initial: LineItemContextValue = {