chore: add a digital product

commercelayer · Jul 3, 2024 · c08933c · c08933c
1 parent 8c389ff
commit c08933c
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 29 deletions.
diff --git a/packages/docs/stories/assets/constants.ts b/packages/docs/stories/assets/constants.ts
@@ -5,7 +5,7 @@ export const codes = {
   noDiscount: 'BACKPACKFFFFFF000000XXXX',
   outOfStock: '5PANECAP9D9CA1FFFFFFXXXX',
   doNotTrack: 'BOTT17OZFFFFFF000000XXXX',
-  doNotShip: 'DUFFLBAG000000FFFFFFXXXX',
+  digitalProduct: 'EBOOKECOMPLAYBOOKED1XXXX',
   subscription: 'POLOMXXX000000FFFFFFMXXX',
   bundleAvailable: 'CLGETTINGSTARTED',
   bundleOutOfStock: 'CLOUTOFSTOCK'

diff --git a/packages/docs/stories/availability/cl-availability-info.stories.ts b/packages/docs/stories/availability/cl-availability-info.stories.ts
@@ -5,18 +5,24 @@ import { create } from '../../utils'
 import { codes } from '../assets/constants'
 
 type Args = DropInArgs['cl-availability-info'] & {
-  ['Use an available product']: boolean
+  ['Product availability']: string
 }
 
 const meta: Meta<Args> = {
   title: 'Components/Availability/cl-availability-info',
   component: 'cl-availability-info',
   argTypes: {
-    'Use an available product': {
+    'Product availability': {
       description:
-        'Toggle this switch to swap from an out-of-stock to an available product in the example above.',
-      type: {
-        name: 'boolean'
+        'Select one of the options to swap between products with different availability in the example above.',
+      options: [codes.available, codes.digitalProduct, codes.outOfStock],
+      control: {
+        type: 'select',
+        labels: {
+          [codes.available]: 'Shippable product',
+          [codes.digitalProduct]: 'Digital product',
+          [codes.outOfStock]: 'Out of stock product'
+        }
       },
       table: {
         category: 'storybook'
@@ -29,17 +35,17 @@ export default meta
 
 export const Basic: StoryFn<Args> = (args) => {
   return create(html`
-    <cl-availability
-      code=${args['Use an available product']
-        ? codes.available
-        : codes.outOfStock}
-    >
-      <cl-availability-info type=${args.type ?? nothing}></cl-availability-info>
+    <cl-availability code=${args['Product availability']}>
+      <cl-availability-status type="available-with-info">
+        <cl-availability-info
+          type=${args.type ?? nothing}
+        ></cl-availability-info>
+      </cl-availability-status>
     </cl-availability>
   `)
 }
 Basic.args = {
-  'Use an available product': true,
+  'Product availability': codes.available,
   type: 'min-days'
 }
 

diff --git a/packages/docs/stories/availability/cl-availability-status.stories.ts b/packages/docs/stories/availability/cl-availability-status.stories.ts
@@ -5,18 +5,24 @@ import { create } from '../../utils'
 import { codes } from '../assets/constants'
 
 type Args = DropInArgs['cl-availability-status'] & {
-  ['Use an available product']: boolean
+  ['Product availability']: string
 }
 
 const meta: Meta<Args> = {
   title: 'Components/Availability/cl-availability-status',
   component: 'cl-availability-status',
   argTypes: {
-    'Use an available product': {
+    'Product availability': {
       description:
-        'Toggle this switch to swap from an out-of-stock to an available product in the example above.',
-      type: {
-        name: 'boolean'
+        'Select one of the options to swap between products with different availability in the example above.',
+      options: [codes.available, codes.digitalProduct, codes.outOfStock],
+      control: {
+        type: 'select',
+        labels: {
+          [codes.available]: 'Shippable product',
+          [codes.digitalProduct]: 'Digital product',
+          [codes.outOfStock]: 'Out of stock product'
+        }
       },
       table: {
         category: 'storybook'
@@ -29,18 +35,14 @@ export default meta
 
 export const Basic: StoryFn<Args> = (args) => {
   return create(html`
-    <cl-availability
-      code=${args['Use an available product']
-        ? codes.available
-        : codes.outOfStock}
-    >
+    <cl-availability code=${args['Product availability']}>
       <cl-availability-status type=${args.type ?? nothing}>
         • message
       </cl-availability-status>
     </cl-availability>
   `)
 }
 Basic.args = {
-  'Use an available product': true,
+  'Product availability': codes.available,
   type: 'available'
 }
diff --git a/packages/drop-in/seed/data/prices.json b/packages/drop-in/seed/data/prices.json
@@ -313,5 +313,26 @@
     "amount_cents": 3110,
     "compare_at_amount_cents": 3550,
     "price_list": "price_list_3"
+  },
+  {
+    "reference": "price_751",
+    "sku_code": "EBOOKECOMPLAYBOOKED1XXXX",
+    "amount_cents": 3110,
+    "compare_at_amount_cents": 3550,
+    "price_list": "price_list_1"
+  },
+  {
+    "reference": "price_752",
+    "sku_code": "EBOOKECOMPLAYBOOKED1XXXX",
+    "amount_cents": 3110,
+    "compare_at_amount_cents": 3550,
+    "price_list": "price_list_2"
+  },
+  {
+    "reference": "price_753",
+    "sku_code": "EBOOKECOMPLAYBOOKED1XXXX",
+    "amount_cents": 3110,
+    "compare_at_amount_cents": 3550,
+    "price_list": "price_list_3"
   }
 ]
diff --git a/packages/drop-in/seed/data/shipping_categories.json b/packages/drop-in/seed/data/shipping_categories.json
@@ -2,5 +2,9 @@
   {
     "reference": "shipping_category_1",
     "name": "Merchandising"
+  },
+  {
+    "reference": "shipping_category_2",
+    "name": "Digital"
   }
 ]
diff --git a/packages/drop-in/seed/data/skus.json b/packages/drop-in/seed/data/skus.json
@@ -56,7 +56,6 @@
     "name": "Black Duffle Bag with White Logo",
     "description": "The perfect spacious bag no matter the occasion. It’s great for packing exercise gear when heading to the gym, or throwing in necessities and going on an adventure.",
     "image_url": "https://data.commercelayer.app/seed/images/skus/DUFFLBAG000000FFFFFFXXXX_FLAT.png",
-    "do_not_ship": true,
     "shipping_category": "shipping_category_1"
   },
   {
@@ -122,5 +121,14 @@
     "description": "This is THE classic t-shirt. Its fine jersey cotton construction makes it extremely soft and comfortable to wear, so it's a good choice for a day-to-day outfit — it's durable and can withstand several washings while retaining its shape and color.",
     "image_url": "https://data.commercelayer.app/seed/images/skus/TSHIRTMSFFFFFF000000XLXX_FLAT.png",
     "shipping_category": "shipping_category_1"
+  },
+  {
+    "reference": "sku_251",
+    "code": "EBOOKECOMPLAYBOOKED1XXXX",
+    "name": "The Ecommerce Playbook (Ebook ed.1)",
+    "description": "How to get started with a composable commerce approach, powered by Commerce Layer. Download the ebook for free.",
+    "image_url": "https://data.commercelayer.app/seed/images/skus/EBOOKECOMPLAYBOOKED1XXXX_FLAT.png",
+    "do_not_ship": true,
+    "shipping_category": "shipping_category_2"
   }
 ]
diff --git a/packages/drop-in/seed/data/stock_items.json b/packages/drop-in/seed/data/stock_items.json
@@ -142,5 +142,17 @@
     "sku_code": "TSHIRTMSFFFFFF000000XLXX",
     "quantity": 166,
     "stock_location": "stock_location_2"
+  },
+  {
+    "reference": "stock_item_501",
+    "sku_code": "EBOOKECOMPLAYBOOKED1XXXX",
+    "quantity": 500,
+    "stock_location": "stock_location_1"
+  },
+  {
+    "reference": "stock_item_502",
+    "sku_code": "EBOOKECOMPLAYBOOKED1XXXX",
+    "quantity": 500,
+    "stock_location": "stock_location_2"
   }
 ]
diff --git a/packages/drop-in/seed/drop_in.json b/packages/drop-in/seed/drop_in.json
@@ -69,7 +69,8 @@
   {
     "resourceType": "shipping_categories",
     "referenceKeys": [
-      "shipping_category_1"
+      "shipping_category_1",
+      "shipping_category_2"
     ]
   },
   {

diff --git a/packages/drop-in/seed/reset_stock_items.json b/packages/drop-in/seed/reset_stock_items.json
@@ -6,8 +6,8 @@
       "stock_item_60",
       "stock_item_358",
       "stock_item_108",
-      "stock_item_41",
-      "stock_item_291"
+      "stock_item_501",
+      "stock_item_502"
     ]
   }
 ]
diff --git a/packages/drop-in/src/index.html b/packages/drop-in/src/index.html
@@ -142,7 +142,7 @@
                   <option value="5PANECAP9D9CA1FFFFFFXXXX">Out Of Stock</option>
                   <option value="GMUG11OZFFFFFF000000XXXX">Overselling</option>
                   <option value="BOTT17OZFFFFFF000000XXXX">Do Not Track</option>
-                  <option value="DUFFLBAG000000FFFFFFXXXX">Do Not Ship</option>
+                  <option value="EBOOKECOMPLAYBOOKED1XXXX">Digital Product</option>
                   <option value="POLOMXXX000000FFFFFFMXXX" data-quantity="2" data-frequency="three-month">Subscription (3 months)</option>
                   <option value="SKU1234">Non-Existing SKU</option>
                   <option value="">Without Attributes</option>