feat: Implement new SDK to Shipments components

commercelayer · Nov 22, 2021 · aa0626a · aa0626a
1 parent 974c5be
commit aa0626a
Show file tree

Hide file tree

Showing 21 changed files with 576 additions and 578 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,10 +65,10 @@
     }
   ],
   "dependencies": {
-    "@adyen/adyen-web": "^5.2.0",
-    "@commercelayer/js-auth": "^2.1.0",
+    "@adyen/adyen-web": "^5.2.1",
+    "@commercelayer/js-auth": "^2.2.3",
     "@commercelayer/js-sdk": "^3.9.2",
-    "@commercelayer/sdk": "^2.3.5",
+    "@commercelayer/sdk": "^2.3.8",
     "@stripe/react-stripe-js": "^1.6.0",
     "@stripe/stripe-js": "^1.21.1",
     "braintree-web": "^3.83.0",
@@ -79,41 +79,41 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
     "@commercelayer/cypress-vcr": "^1.1.0",
     "@cypress/code-coverage": "^3.9.11",
     "@cypress/webpack-preprocessor": "^5.9.1",
-    "@playwright/test": "^1.16.2",
+    "@playwright/test": "^1.16.3",
     "@rollup/plugin-alias": "^3.1.8",
-    "@size-limit/preset-big-lib": "^6.0.3",
+    "@size-limit/preset-big-lib": "^6.0.4",
     "@tailwindcss/aspect-ratio": "^0.3.0",
     "@tailwindcss/forms": "^0.3.4",
     "@tailwindcss/typography": "^0.4.1",
-    "@types/braintree-web": "^3.75.9",
+    "@types/braintree-web": "^3.75.10",
     "@types/jest": "^27.0.2",
-    "@types/lodash": "^4.14.176",
-    "@types/node": "^16.11.6",
+    "@types/lodash": "^4.14.177",
+    "@types/node": "^16.11.7",
     "@types/prop-types": "^15.7.4",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.35",
     "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "@zeit/next-css": "^1.0.1",
     "@zerollup/ts-transform-paths": "^1.7.18",
     "autoprefixer": "^10.4.0",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-istanbul": "^6.1.1",
     "dotenv": "^10.0.0",
-    "eslint": "^8.1.0",
+    "eslint": "^8.2.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",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^27.3.1",
-    "next": "^12.0.1",
+    "next": "^12.0.4",
     "playwright": "^1.16.3",
     "postcss": "^8.3.11",
     "postcss-loader": "^6.2.0",

diff --git a/pages/checkout-shipments.tsx b/pages/checkout-shipments.tsx
@@ -91,7 +91,7 @@ export default function Main() {
               <Shipment loader={<>Caricamento...</>}>
                 <div className="flex">
                   Shipments N:
-                  <ShipmentField className="font-bold pl-1" name="keyNumber" />
+                  <ShipmentField className="font-bold pl-1" name="key_number" />
                 </div>
                 <LineItemsContainer>
                   <LineItem>
@@ -129,12 +129,12 @@ export default function Main() {
                     <ShippingMethodPrice data-cy="shipping-method-price" />
                     <div className="flex">
                       <DeliveryLeadTime
-                        type="minDays"
+                        type="min_days"
                         data-cy="delivery-lead-time-min-days"
                       />{' '}
                       -{' '}
                       <DeliveryLeadTime
-                        type="maxDays"
+                        type="max_days"
                         data-cy="delivery-lead-time-max-days"
                         className="mr-1"
                       />
@@ -154,8 +154,8 @@ export default function Main() {
                         <ShippingMethodName data-cy="shipping-method-name-recap" />
                         <ShippingMethodPrice />
                         <div className="flex">
-                          <DeliveryLeadTime type="minDays" /> -{' '}
-                          <DeliveryLeadTime type="maxDays" className="mr-1" />
+                          <DeliveryLeadTime type="min_days" /> -{' '}
+                          <DeliveryLeadTime type="max_days" className="mr-1" />
                           days
                         </div>
                       </div>

diff --git a/src/components/DeliveryLeadTime.tsx b/src/components/DeliveryLeadTime.tsx
@@ -13,10 +13,10 @@ const propTypes = components.DeliveryLeadTime.propTypes
 const displayName = components.DeliveryLeadTime.displayName
 
 export type DeliveryLeadTimeField =
-  | 'minHours'
-  | 'maxHours'
-  | 'minDays'
-  | 'maxDays'
+  | 'min_hours'
+  | 'max_hours'
+  | 'min_days'
+  | 'max_days'
 
 export type DeliveryLeadTimeComponentChildren = Omit<
   ShippingMethodPriceProps,

diff --git a/src/components/LineItemsContainer.tsx b/src/components/LineItemsContainer.tsx
@@ -44,13 +44,6 @@ const LineItemsContainer: FunctionComponent<LineItemsContainer> = (props) => {
         type: 'setLineItems',
         payload: { lineItems: order.line_items },
       })
-      // order &&
-      //   getLineItems({
-      //     order,
-      //     dispatch,
-      //     config,
-      //     filters,
-      //   })
     }
     return (): void => {
       if (isEmpty(order)) {
@@ -71,7 +64,7 @@ const LineItemsContainer: FunctionComponent<LineItemsContainer> = (props) => {
         dispatch,
         config,
         getOrder,
-        orderId,
+        orderId: orderId as string,
         errors: state.errors,
       }),
     deleteLineItem: (lineItemId) =>
@@ -80,7 +73,7 @@ const LineItemsContainer: FunctionComponent<LineItemsContainer> = (props) => {
         dispatch,
         config,
         getOrder,
-        orderId,
+        orderId: orderId as string,
         errors: state.errors,
       }),
   } as LineItemContextValue

diff --git a/src/components/Shipment.tsx b/src/components/Shipment.tsx
@@ -9,9 +9,9 @@ import React, {
 import ShipmentContext from '#context/ShipmentContext'
 import ShipmentChildrenContext from '#context/ShipmentChildrenContext'
 import components from '#config/components'
-import { LineItemCollection } from '@commercelayer/js-sdk'
 import { LoaderType } from '#typings'
 import getLoaderComponent from '#utils/getLoaderComponent'
+import { ShipmentLineItem } from '#reducers/ShipmentReducer'
 
 const propTypes = components.Shipment.propTypes
 const displayName = components.Shipment.displayName
@@ -36,17 +36,18 @@ const Shipment: FunctionComponent<ShipmentProps> = ({
   const components =
     shipments &&
     shipments.map((shipment, k) => {
-      const shipmentLineItems = shipment.shipmentLineItems()?.toArray()
+      const shipmentLineItems =
+        shipment.shipment_line_items as ShipmentLineItem[]
       const lineItems = shipmentLineItems?.map((shipmentLineItem) => {
-        const l = shipmentLineItem.lineItem() as LineItemCollection
+        const l = shipmentLineItem.line_item
         if (l) l.quantity = shipmentLineItem.quantity
         return l
       })
-      const shippingMethods = shipment.availableShippingMethods()?.toArray()
-      const currentShippingMethodId = shipment.shippingMethod()?.id
-      const stockTransfers = shipment.stockTransfers()?.toArray()
+      const shippingMethods = shipment.available_shipping_methods
+      const currentShippingMethodId = shipment.shipping_method?.id
+      const stockTransfers = shipment.stock_transfers
       const times = deliveryLeadTimes?.filter(
-        (time) => time.stockLocation()?.id === shipment.stockLocation()?.id
+        (time) => time.stock_location?.id === shipment.stock_location?.id
       )
       const shipmentProps = {
         lineItems,

diff --git a/src/components/ShipmentField.tsx b/src/components/ShipmentField.tsx
@@ -14,12 +14,12 @@ type ShipmentFieldChildrenProps = Omit<ShipmentFieldProps, 'children'> & {
 
 export type ShipmentAttribute =
   | 'number'
-  | 'currencyCode'
+  | 'currency_code'
   | 'status'
-  | 'costAmountCents'
-  | 'costAmountFloat'
-  | 'formattedCostAmount'
-  | 'keyNumber'
+  | 'cost_amount_cents'
+  | 'cost_amount_float'
+  | 'formatted_cost_amount'
+  | 'key_number'
 
 type ShipmentFieldProps = {
   children?: (props: ShipmentFieldChildrenProps) => ReactNode
@@ -29,8 +29,8 @@ type ShipmentFieldProps = {
 const ShipmentField: FunctionComponent<ShipmentFieldProps> = (props) => {
   const { name } = props
   const { shipment, keyNumber } = useContext(ShipmentChildrenContext)
-  const key = camelCase(name)
-  const text = key !== 'keyNumber' ? get(shipment, key) : keyNumber
+  const key = name
+  const text = key !== 'key_number' ? get(shipment, key) : keyNumber
   const parentProps = {
     shipment,
     ...props,

diff --git a/src/components/ShipmentsContainer.tsx b/src/components/ShipmentsContainer.tsx
@@ -30,9 +30,21 @@ const ShipmentsContainer: FunctionComponent<ShipmentsContainerProps> = (
 ) => {
   const { children } = props
   const [state, dispatch] = useReducer(shipmentReducer, shipmentInitialState)
-  const { order, getOrder } = useContext(OrderContext)
+  const { order, getOrder, include, addResourceToInclude } =
+    useContext(OrderContext)
   const config = useContext(CommerceLayerContext)
   useEffect(() => {
+    if (!include?.includes('shipments.available_shipping_methods')) {
+      addResourceToInclude({
+        newResource: [
+          'shipments.available_shipping_methods',
+          'shipments.shipment_line_items.line_item',
+          'shipments.shipping_method',
+          'shipments.stock_transfers',
+          'shipments.stock_location',
+        ],
+      })
+    }
     // TODO: Get shipments
     if (order && !isEmpty(config)) {
       getShipments({ order, dispatch, config })

diff --git a/src/components/ShippingMethod.tsx b/src/components/ShippingMethod.tsx
@@ -9,7 +9,8 @@ import React, {
 import ShippingMethodChildrenContext from '#context/ShippingMethodChildrenContext'
 import components from '#config/components'
 import ShipmentChildrenContext from '#context/ShipmentChildrenContext'
-import { first, isEmpty } from 'lodash'
+import isEmpty from 'lodash/isEmpty'
+import { DeliveryLeadTime } from '@commercelayer/sdk'
 
 const propTypes = components.ShippingMethod.propTypes
 const displayName = components.ShippingMethod.displayName
@@ -30,6 +31,7 @@ const ShippingMethod: FunctionComponent<ShippingMethodProps> = (props) => {
     shippingMethods,
     currentShippingMethodId,
     deliveryLeadTimes,
+    shipment,
   } = useContext(ShipmentChildrenContext)
   const [items, setItems] = useState<JSX.Element[]>([])
   useEffect(() => {
@@ -41,15 +43,14 @@ const ShippingMethod: FunctionComponent<ShippingMethodProps> = (props) => {
           return true
         })
         .map((shippingMethod, k) => {
-          const deliveryLeadTimeForShipment =
-            deliveryLeadTimes &&
-            first(
-              deliveryLeadTimes.filter((delivery) => {
-                const deliveryShippingMethodId = delivery.shippingMethod()?.id
-                return shippingMethod.id === deliveryShippingMethodId
-              })
-            )
+          const [deliveryLeadTimeForShipment] = deliveryLeadTimes?.filter(
+            (delivery) => {
+              const deliveryShippingMethodId = delivery.shipping_method?.id
+              return shippingMethod.id === deliveryShippingMethodId
+            }
+          ) as DeliveryLeadTime[]
           const shippingProps = {
+            shipmentId: shipment?.id,
             shippingMethod,
             currentShippingMethodId,
             deliveryLeadTimeForShipment,

diff --git a/src/components/ShippingMethodName.tsx b/src/components/ShippingMethodName.tsx
@@ -17,12 +17,10 @@ type LineItemNameProps = {
 } & JSX.IntrinsicElements['label']
 
 const ShippingMethodName: FunctionComponent<LineItemNameProps> = (props) => {
-  const { shippingMethod, deliveryLeadTimeForShipment } = useContext(
-    ShippingMethodChildrenContext
-  )
-  const htmlFor =
-    `shipment-${shippingMethod.shipmentId}-${shippingMethod.id}` || ''
-  const labelName = shippingMethod['name']
+  const { shippingMethod, deliveryLeadTimeForShipment, shipmentId } =
+    useContext(ShippingMethodChildrenContext)
+  const htmlFor = `shipment-${shipmentId}-${shippingMethod?.id}` || ''
+  const labelName = shippingMethod?.['name']
   const parentProps = {
     shippingMethod,
     deliveryLeadTimeForShipment,

diff --git a/src/components/ShippingMethodPrice.tsx b/src/components/ShippingMethodPrice.tsx
@@ -48,14 +48,14 @@ const ShippingMethodPrice: FunctionComponent<ShippingMethodPriceProps> = (
         base,
         type,
         format,
-        obj: shippingMethod as Record<string, string>,
+        obj: shippingMethod,
       })
       setPrice(p)
       const c = getAmount<number>({
         base: 'freeOver',
         type,
         format: 'cents',
-        obj: shippingMethod as Record<string, string>,
+        obj: shippingMethod,
       })
       setFreeOverAmountCents(c)
     }
@@ -72,9 +72,9 @@ const ShippingMethodPrice: FunctionComponent<ShippingMethodPriceProps> = (
     <Parent {...parentProps}>{props.children}</Parent>
   ) : (
     <span {...p}>
-      {order &&
+      {order?.total_amount_cents &&
       isNumber(freeOverAmountCents) &&
-      freeOverAmountCents < order?.totalAmountCents
+      freeOverAmountCents < order.total_amount_cents
         ? labelFreeOver
         : price}
     </span>