docs: update organization

commercelayer · Oct 23, 2023 · 42eb652 · 42eb652
1 parent 629e5b5
commit 42eb652
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 31 deletions.
diff --git a/packages/docs/.storybook/preview.tsx b/packages/docs/.storybook/preview.tsx
@@ -23,7 +23,16 @@ const parameters: Parameters = {
   },
   options: {
     storySort: {
-      order: ['Getting Started', 'Components', ['Prices', ['PricesContainer']]]
+      order: [
+        'Getting Started',
+        'Components',
+        [
+          'Prices',
+          ['PricesContainer', '*'],
+          'Skus',
+          ['AvailabilityContainer', '*']
+        ]
+      ]
     }
   },
   docs: {

diff --git a/packages/docs/stories/_internals/useGetToken.ts b/packages/docs/stories/_internals/useGetToken.ts
@@ -9,10 +9,10 @@ interface UseGetTokenOptions {
 }
 
 const salesChannel = {
-  clientId: '48ee4802f8227b04951645a9b7c8af1e3943efec7edd1dcfd04b5661bf1da5db',
-  slug: 'the-blue-brand-3',
-  scope: 'market:58',
-  domain: 'commercelayer.co'
+  clientId: 'Z5ypiDlsqgV8twWRz0GabrJvTKXad4U-PMoVAU-XvV0',
+  slug: 'react-components-store',
+  scope: 'market:15283',
+  domain: 'commercelayer.io'
 }
 
 const customer = {
@@ -37,7 +37,7 @@ export function useGetToken<T extends UseGetTokenOptions>(
   const scope = salesChannel.scope
   const domain = salesChannel.domain
   const user =
-    options?.userMode != null
+    options?.userMode === true
       ? {
           username: customer.username,
           password: customer.password
@@ -65,6 +65,7 @@ export function useGetToken<T extends UseGetTokenOptions>(
       accessToken === '' ||
       isTokenExpired({ accessToken, compareTo: new Date() })
     ) {
+      console.log('initToken')
       void initToken()
     }
   }, [accessToken])
@@ -115,12 +116,16 @@ function isTokenExpired({
     return true
   }
 
-  const { exp } = jwtDecode<{ exp: number }>(accessToken)
+  try {
+    const { exp } = jwtDecode<{ exp: number }>(accessToken)
 
-  if (exp == null) {
+    if (exp == null) {
+      return true
+    }
+
+    const nowTime = Math.trunc(compareTo.getTime() / 1000)
+    return nowTime > exp
+  } catch {
     return true
   }
-
-  const nowTime = Math.trunc(compareTo.getTime() / 1000)
-  return nowTime > exp
 }
diff --git a/packages/docs/stories/examples/cart/ShoppingCart.stories.tsx b/packages/docs/stories/examples/cart/ShoppingCart.stories.tsx
@@ -36,19 +36,24 @@ export const Default: StoryFn = (args) => {
     >
       <OrderStorage persistKey='cl-examples1-cartId'>
         <OrderContainer>
-          <section className='p-6 border rounded-lg mb-4'>
+          <section className='p-6 border rounded-lg mb-4 max-w-xl'>
             <legend className='text-lg font-bold'>Line items</legend>
             <LineItemsContainer>
-              <p className='text-large'>
+              <p className='text-large mb-4'>
                 Items count: <LineItemsCount />
               </p>
               <LineItem type='skus'>
-                <div className='flex gap-4'>
+                <div className='grid gap-4 grid-cols-[auto,5fr,auto,2fr,auto] mb-4 items-center'>
                   <LineItemImage width={50} />
                   <LineItemName />
-                  <LineItemQuantity max={10} />
-                  <Errors resource='line_items' field='quantity' />
-                  <LineItemAmount />
+                  <div>
+                    <LineItemQuantity
+                      max={10}
+                      className='p-2 border border-gray-300'
+                    />
+                    <Errors resource='line_items' field='quantity' />
+                  </div>
+                  <LineItemAmount className='text-right' />
                   <LineItemRemoveLink />
                 </div>
               </LineItem>

diff --git a/packages/docs/stories/examples/cart/components.tsx b/packages/docs/stories/examples/cart/components.tsx
@@ -51,11 +51,11 @@ export const AddSampleItems = (): JSX.Element => {
       <button
         onClick={async () => {
           await addToCart({
-            skuCode: 'HATBSBMUFFFFFF000000XXXX',
+            skuCode: '5PANECAP9D9CA1FFFFFFXXXX',
             quantity: 2
           })
           await addToCart({
-            skuCode: 'SWEETHMU000000FFFFFFMXXX',
+            skuCode: 'BACKPACK000000FFFFFFXXXX',
             quantity: 3
           })
         }}
@@ -80,14 +80,14 @@ async function fillOrder(
 ): Promise<void> {
   await cl.line_items.create({
     item_type: 'skus',
-    sku_code: 'HATBSBMUFFFFFF000000XXXX',
+    sku_code: '5PANECAP9D9CA1FFFFFFXXXX',
     quantity: 2,
     order: cl.orders.relationship(orderId)
   })
 
   await cl.line_items.create({
     item_type: 'skus',
-    sku_code: 'SWEETHMU000000FFFFFFMXXX',
+    sku_code: 'BACKPACK000000FFFFFFXXXX',
     quantity: 3,
     order: cl.orders.relationship(orderId)
   })

diff --git a/packages/docs/stories/prices/Price.stories.tsx b/packages/docs/stories/prices/Price.stories.tsx
@@ -25,7 +25,7 @@ const Template: StoryFn<typeof Price> = (args) => {
 
 export const Default = Template.bind({})
 Default.args = {
-  skuCode: 'BABYONBU000000E63E7412MX',
+  skuCode: 'POST6191FFFFFF000000XXXX',
   compareClassName: 'line-through ml-2',
   className: 'font-bold'
 }
@@ -38,7 +38,7 @@ Default.args = {
  */
 export const NoComparePrice = Template.bind({})
 NoComparePrice.args = {
-  skuCode: 'BABYONBU000000E63E7412MX',
+  skuCode: 'POST6191FFFFFF000000XXXX',
   showCompare: false
 }
 
@@ -53,8 +53,8 @@ export const MultiplePrices: StoryFn<typeof Price> = (args) => {
     >
       <PricesContainer>
         <div className='grid'>
-          <Price skuCode='BABYONBU000000E63E7412MX' showCompare={false} />
-          <Price skuCode='CANVASAU000000FFFFFF1824' showCompare={false} />
+          <Price skuCode='POST6191FFFFFF000000XXXX' showCompare={false} />
+          <Price skuCode='POLOMXXX000000FFFFFFLXXX' showCompare={false} />
         </div>
       </PricesContainer>
     </CommerceLayer>
@@ -91,7 +91,7 @@ export const ChildrenProps: StoryFn<typeof Price> = (args) => {
 }
 
 ChildrenProps.args = {
-  skuCode: 'BABYONBU000000E63E7412MX'
+  skuCode: 'POST6191FFFFFF000000XXXX'
 }
 ChildrenProps.decorators = [
   (Story) => {

diff --git a/packages/docs/stories/prices/PricesContainer.stories.tsx b/packages/docs/stories/prices/PricesContainer.stories.tsx
@@ -25,5 +25,5 @@ const Template: StoryFn<typeof PricesContainer> = (args) => {
 
 export const Default = Template.bind({})
 Default.args = {
-  skuCode: 'BABYONBU000000E63E7412MX'
+  skuCode: 'POST6191FFFFFF000000XXXX'
 }
diff --git a/packages/docs/stories/skus/Availability.stories.tsx b/packages/docs/stories/skus/Availability.stories.tsx
@@ -29,7 +29,7 @@ const Template: StoryFn<typeof AvailabilityTemplate> = (args) => {
       accessToken='my-access-token'
       endpoint='https://demo-store.commercelayer.io'
     >
-      <AvailabilityContainer skuCode='BABYONBU000000E63E7412MX'>
+      <AvailabilityContainer skuCode='POLOMXXX000000FFFFFFLXXX'>
         <AvailabilityTemplate {...args} />
       </AvailabilityContainer>
     </CommerceLayer>
@@ -62,7 +62,7 @@ export const NotAvailable: StoryFn<typeof AvailabilityTemplate> = (args) => {
       accessToken='my-access-token'
       endpoint='https://demo-store.commercelayer.io'
     >
-      <AvailabilityContainer skuCode='BABYONBU000000FFFFFFNBXX'>
+      <AvailabilityContainer skuCode='TSHIRTWV000000FFFFFFSXXX'>
         <AvailabilityTemplate
           timeFormat='days'
           showShippingMethodName
@@ -86,7 +86,7 @@ export const ChildrenProps: StoryObj = () => {
       accessToken='my-access-token'
       endpoint='https://demo-store.commercelayer.io'
     >
-      <AvailabilityContainer skuCode='BABYONBU000000E63E7412MX'>
+      <AvailabilityContainer skuCode='POLOMXXX000000FFFFFFLXXX'>
         <AvailabilityTemplate>
           {(childrenProps) => {
             return (

diff --git a/packages/docs/stories/skus/AvailabilityContainer.stories.tsx b/packages/docs/stories/skus/AvailabilityContainer.stories.tsx
@@ -28,7 +28,7 @@ const Template: StoryFn<typeof AvailabilityContainer> = (args) => {
 
 export const Default = Template.bind({})
 Default.args = {
-  skuCode: 'BABYONBU000000E63E7412MX',
+  skuCode: 'POLOMXXX000000FFFFFFLXXX',
   getQuantity: (quantity) => {
     console.log('quantity', quantity)
   }