feat: Implement new SDK to CommerceLayer and Prices components

commercelayer · Nov 22, 2021 · ec32544 · ec32544
1 parent c2e0644
commit ec32544
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 1,172 deletions.
diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
     "@rollup/plugin-alias": "^3.1.8",
     "@size-limit/preset-big-lib": "^6.0.4",
     "@tailwindcss/aspect-ratio": "^0.3.0",
+    "@playwright/test": "^1.15.2",
     "@tailwindcss/forms": "^0.3.4",
     "@tailwindcss/typography": "^0.4.1",
     "@types/braintree-web": "^3.75.9",
@@ -106,6 +107,7 @@
     "babel-plugin-istanbul": "^6.1.1",
     "cypress": "^8.5.0",
     "eslint": "^8.1.0",
+    "dotenv": "^10.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-react": "^7.26.1",
@@ -129,7 +131,8 @@
     "tsconfig-paths-jest": "^0.0.1",
     "tsdx": "^0.14.1",
     "ttypescript": "^1.5.12",
-    "typescript": "^4.4.4"
+    "typescript": "^4.4.4",
+    "v8-to-istanbul": "^8.1.0"
   },
   "peerDependencies": {
     "react": "^17.0.2",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,7 +1,4 @@
-import {
-  // getSalesChannelToken,
-  getIntegrationToken,
-} from '@commercelayer/js-auth'
+import { getIntegrationToken } from '@commercelayer/js-auth'
 import React, { useEffect, useState } from 'react'
 import Price from '../src/components/Price'
 import PricesContainer from '../src/components/PricesContainer'
@@ -11,10 +8,8 @@ const clientId = process.env.NEXT_PUBLIC_CLIENT_ID_INTEGRATION as string
 const clientSecret = process.env.NEXT_PUBLIC_CLIENT_SECRET as string
 const endpoint = process.env.NEXT_PUBLIC_ENDPOINT as string
 const scope = process.env.NEXT_PUBLIC_MARKET_ID as string
-// const username = process.env.NEXT_PUBLIC_CUSTOMER_USERNAME as string
-// const password = process.env.NEXT_PUBLIC_CUSTOMER_PASSWORD as string
 
-export const Nav = ({ links }) => (
+export const Nav = ({ links }: any) => (
   <header className="dark p-6">
     <div className="container mx-auto">
       <nav className="flex flex-row items-center">
@@ -43,11 +38,11 @@ export const Nav = ({ links }) => (
   </header>
 )
 
-export const Title = ({ title }) => (
+export const Title = ({ title }: any) => (
   <div className="font-bold text-2xl mb-2 bg-green-300">{title}</div>
 )
 
-export const Type = ({ text }) => (
+export const Type = ({ text }: any) => (
   <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
     #{text}
   </span>
@@ -375,6 +370,7 @@ const Home = () => {
                     />
                     <div className="flex flex-row flex-wrap justify-center">
                       <Price
+                        data-test={`price-${k}`}
                         skuCode={s}
                         className="text-green-600 text-2xl m-1"
                         compareClassName="text-gray-500 text-2xl m-1 line-through"
@@ -393,92 +389,6 @@ const Home = () => {
               })}
             </PricesContainer>
           </div>
-          {/* <br />
-        <br />
-        <Title title="Preselect Prices by skuCode" />
-        <PricesContainer>
-          <Price
-            skuCode="BABYONBU000000E63E746MXX"
-            amountClassName="font-bold"
-            compareClassName="line-through"
-          />
-        </PricesContainer>
-        <br />
-        <br />
-        <Title title="Variant" />
-        <VariantContainer>
-          <Type text="select type" />
-          <VariantSelector
-            name="variant1"
-            skuCodes={[
-              { label: '6 months', code: 'BABYONBU000000E63E746MXX' },
-              {
-                label: '12 months',
-                code: 'BABYONBU000000E63E7412MX'
-              },
-              {
-                label: '24 months',
-                code: 'BABYONBU000000E63E746MXXFAKE'
-              }
-            ]}
-          />
-          <br />
-          <br />
-          <Type text="radio type" />
-          <VariantSelector
-            name="variant"
-            type="radio"
-            skuCodes={[
-              { label: '6 months', code: 'BABYONBU000000E63E746MXX' },
-              {
-                label: '12 months',
-                code: 'BABYONBU000000E63E7412MX'
-              },
-              {
-                label: '24 months',
-                code: 'BABYONBU000000E63E746MXXFAKE'
-              }
-            ]}
-          />
-        </VariantContainer>
-        <br />
-        <br />
-        <Title title="Preselect Variant by skuCode" />
-        <VariantContainer skuCode="BABYONBU000000E63E746MXX">
-          <Type text="select type" />
-          <VariantSelector
-            name="variant1"
-            skuCodes={[
-              { label: '6 months', code: 'BABYONBU000000E63E746MXX' },
-              {
-                label: '12 months',
-                code: 'BABYONBU000000E63E7412MX'
-              },
-              {
-                label: '24 months',
-                code: 'BABYONBU000000E63E746MXXFAKE'
-              }
-            ]}
-          />
-          <br />
-          <br />
-          <Type text="radio type" />
-          <VariantSelector
-            name="variant1"
-            type="radio"
-            skuCodes={[
-              { label: '6 months', code: 'BABYONBU000000E63E746MXX' },
-              {
-                label: '12 months',
-                code: 'BABYONBU000000E63E7412MX'
-              },
-              {
-                label: '24 months',
-                code: 'BABYONBU000000E63E746MXXFAKE'
-              }
-            ]}
-          />
-        </VariantContainer> */}
         </CommerceLayer>
       </div>
     </section>

diff --git a/pages/prices.tsx b/pages/prices.tsx
@@ -1,7 +1,4 @@
-import {
-  // getSalesChannelToken,
-  getIntegrationToken,
-} from '@commercelayer/js-auth'
+import { getIntegrationToken } from '@commercelayer/js-auth'
 import React, { useEffect, useState } from 'react'
 import Price from '../src/components/Price'
 import PricesContainer from '../src/components/PricesContainer'
@@ -12,7 +9,7 @@ const clientSecret = process.env.NEXT_PUBLIC_CLIENT_SECRET as string
 const endpoint = process.env.NEXT_PUBLIC_ENDPOINT as string
 const scope = process.env.NEXT_PUBLIC_MARKET_ID as string
 
-export const Nav = ({ links }) => (
+export const Nav = ({ links }: any) => (
   <header className="dark p-6">
     <div className="container mx-auto">
       <nav className="flex flex-row items-center">
@@ -41,11 +38,11 @@ export const Nav = ({ links }) => (
   </header>
 )
 
-export const Title = ({ title }) => (
+export const Title = ({ title }: any) => (
   <div className="font-bold text-2xl mb-2 bg-green-300">{title}</div>
 )
 
-export const Type = ({ text }) => (
+export const Type = ({ text }: any) => (
   <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
     #{text}
   </span>
@@ -97,7 +94,7 @@ const Home = () => {
             <PricesContainer
               perPage={5}
               loader={<Loading />}
-              filters={{ priceListCurrencyCodeEq: 'EUR' }}
+              filters={{ price_list_currency_code_eq: 'EUR' }}
             >
               {skus.map((s, k) => {
                 const lImg = s.substring(0, s.length - 4)
@@ -113,6 +110,7 @@ const Home = () => {
                     />
                     <div className="flex flex-row flex-wrap justify-center">
                       <Price
+                        data-test={`price-filter-${k}`}
                         skuCode={s}
                         className="text-green-600 text-2xl m-1"
                         compareClassName="text-gray-500 text-2xl m-1 line-through"
@@ -150,6 +148,7 @@ const Home = () => {
                     />
                     <div className="flex flex-row flex-wrap justify-center">
                       <Price
+                        data-test={`price-${k}`}
                         skuCode={s}
                         className="text-green-600 text-2xl m-1"
                         compareClassName="text-gray-500 text-2xl m-1 line-through"

diff --git a/src/components/AdyenPayment.tsx b/src/components/AdyenPayment.tsx
@@ -100,7 +100,6 @@ const AdyenPayment: FunctionComponent<AdyenPaymentProps> = ({
       const adyenAction = pSource?.paymentSource?.paymentResponse?.action
       // @ts-ignore
       const resultCode = pSource?.paymentSource?.paymentResponse?.resultCode
-      // @ts-ignore
       if (adyenAction && resultCode === 'IdentifyShopper') {
         checkout
           .createFromAction(adyenAction, threeDSConfiguration)

diff --git a/src/components/CommerceLayer.tsx b/src/components/CommerceLayer.tsx
@@ -8,21 +8,17 @@ type CommerceLayerProps = {
   children: ReactNode
   accessToken: string
   endpoint: string
-  cache?: boolean
 }
 
 const CommerceLayer: FunctionComponent<CommerceLayerProps> = (props) => {
-  const { children, cache = false, ...p } = props
+  const { children, ...p } = props
   return (
-    <CommerceLayerContext.Provider value={{ ...p, cache }}>
+    <CommerceLayerContext.Provider value={{ ...p }}>
       {children}
     </CommerceLayerContext.Provider>
   )
 }
 
 CommerceLayer.propTypes = propTypes
-CommerceLayer.defaultProps = {
-  cache: false,
-}
 
 export default CommerceLayer
diff --git a/src/components/Price.tsx b/src/components/Price.tsx
@@ -9,7 +9,7 @@ import { isEmpty, has, indexOf } from 'lodash'
 import Parent from './utils/Parent'
 import PricesContext from '#context/PricesContext'
 import { getPricesComponent } from '#utils/getPrices'
-import { PriceCollection } from '@commercelayer/js-sdk'
+import { Price as PriceType } from '@commercelayer/sdk'
 import components from '#config/components'
 import { FunctionChildren, LoaderType } from '#typings/index'
 
@@ -41,11 +41,12 @@ const Price: FunctionComponent<PriceProps> = (props) => {
     setSkuCodes,
     loader,
   } = useContext(PricesContext)
-  const [skuPrices, setSkuPrices] = useState<PriceCollection[]>([])
+  const [skuPrices, setSkuPrices] = useState<PriceType[]>([])
   const sCode = pricesSkuCode || skuCode
   useEffect(() => {
+    // if (props.skuCode === 'LSLEEVMM000000FFFFFFLXXX') debugger
     if (!isEmpty(prices) && has(prices, `${sCode}`)) {
-      setSkuPrices(prices[sCode])
+      setSkuPrices(prices[sCode] as PriceType[])
     } else {
       if (sCode && indexOf(skuCodes, sCode) === -1) {
         skuCodes.push(sCode)

diff --git a/src/components/utils/PriceTemplate.tsx b/src/components/utils/PriceTemplate.tsx
@@ -17,12 +17,23 @@ export type PTemplateProps = {
 } & Omit<PriceProps, 'children'>
 
 const PriceTemplate: FunctionComponent<PTemplateProps> = (props) => {
+  const {
+    showCompare,
+    formattedCompare,
+    compareClassName,
+    className,
+    formattedAmount,
+    skuCode,
+    ...p
+  } = props
   return (
     <Fragment>
-      <span className={props.className}>{props.formattedAmount}</span>
-      {props.showCompare && (
-        <span className={props.compareClassName || ''}>
-          {props.formattedCompare}
+      <span className={className} {...p}>
+        {formattedAmount}
+      </span>
+      {showCompare && (
+        <span className={compareClassName || ''} {...p}>
+          {formattedCompare}
         </span>
       )}
     </Fragment>