Add support to "bundles"

.github/workflows/gh-pages.yaml

@@ -29,9 +29,9 @@ jobs:
         uses: actions/checkout@v4
 
       - name: pnpm 🧰
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9.1.3
 
       - name: Node 🧰
         uses: actions/setup-node@v4
@@ -46,7 +46,7 @@ jobs:
         run: pnpm build
 
       - name: Setup Pages 🧰
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v5
 
       - name: Upload artifact 🚀
         uses: actions/upload-pages-artifact@v3

.github/workflows/publish.yaml

@@ -13,9 +13,9 @@ jobs:
         uses: actions/checkout@v4
 
       - name: pnpm 🧰
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9.1.3
 
       - name: Node 🧰
         uses: actions/setup-node@v4
@@ -47,7 +47,7 @@ jobs:
 
       - name: Post to a Slack channel
         id: slack
-        uses: slackapi/slack-github-action@v1.25.0
+        uses: slackapi/slack-github-action@v1.26
         with:
           # Slack channel id, channel name, or user id to post message.
           # See also: https://api.slack.com/methods/chat.postMessage#channels

.github/workflows/release.yaml

@@ -1,5 +1,9 @@
 name: Release
 
+permissions:
+  contents: write
+  discussions: write
+
 on:
   push:
     tags: ["v*"]
@@ -13,7 +17,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Create a draft GitHub release 🎁
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         with:
           token: ${{ secrets.COMMERCELAYER_CI_TOKEN }}
           draft: true

.github/workflows/test.yaml

@@ -17,9 +17,9 @@ jobs:
         uses: actions/checkout@v4
 
       - name: pnpm 🧰
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9.1.3
 
       - name: Node 🧰
         uses: actions/setup-node@v4

package.json

@@ -27,16 +27,17 @@
   "license": "MIT",
   "engines": {
     "node": ">=18.18.0",
-    "pnpm": ">=8"
+    "pnpm": "9.1.3"
   },
+  "packageManager": "pnpm@9.1.3",
   "devDependencies": {
     "@commercelayer/eslint-config-ts": "^1.4.5",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "husky": "^9.0.11",
     "lerna": "^8.1.3",
-    "lint-staged": "^15.2.4",
-    "replace-in-file": "^7.1.0",
+    "lint-staged": "^15.2.5",
+    "replace-in-file": "^7.2.0",
     "typescript": "^5.4.5"
   }
 }

packages/docs/.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
   "*.{js,jsx,ts,tsx}": [
-    "eslint ./ --ext ts,tsx"
+    "eslint ./ --ext ts,tsx --fix"
   ]
 }

packages/docs/.storybook/manager-head.html

@@ -1,3 +1,2 @@
 <meta name="description" content="Commerce Layer drop-in.js lets you transform any plain HTML page into an enterprise-grade static commerce website, with almost no coding required, thanks to a set of micro frontends that handle the main ecommerce functionalities." key="desc" />
-<link rel="shortcut icon" href="favicon.ico" />
 <link rel="stylesheet" href="https://data.commercelayer.app/assets/css/storybook-manager-v8.css" />

packages/docs/package.json

@@ -8,41 +8,41 @@
     "build:sass": "sass ./stories/assets/styles/:./public/",
     "build:sass:watch": "nodemon --watch ./node_modules/@commercelayer/drop-in.js -e scss --exec 'pnpm build:sass'",
     "build": "pnpm build:sass && pnpm build:copy && storybook build --docs && pnpm replace:title",
-    "replace:title": "sed -i -e 's/Webpack App/Commerce Layer drop-in library/g' ./storybook-static/index.html",
+    "replace:title": "sed -i -e 's#@storybook/cli - Storybook#Commerce Layer drop-in library#g' ./storybook-static/index.html",
     "serve": "http-server storybook-static -o"
   },
   "author": {
     "name": "Marco Montalbano",
     "email": "marco.montalbano@commercelayer.io"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@storybook/addon-essentials": "^8.1.2",
-    "@storybook/addon-interactions": "^8.1.2",
-    "@storybook/addon-links": "^8.1.2",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "^8.1.2",
-    "@storybook/components": "^8.1.2",
-    "@storybook/core-common": "^8.1.2",
-    "@storybook/html": "^8.1.2",
-    "@storybook/html-webpack5": "^8.1.2",
+    "@babel/core": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/components": "^8.1.5",
+    "@storybook/core-common": "^8.1.5",
+    "@storybook/html": "^8.1.5",
+    "@storybook/html-webpack5": "^8.1.5",
     "@storybook/icons": "^1.2.9",
-    "@storybook/manager-api": "^8.1.2",
-    "@storybook/test": "^8.1.2",
-    "@storybook/theming": "^8.1.2",
-    "@storybook/types": "^8.1.2",
+    "@storybook/manager-api": "^8.1.5",
+    "@storybook/test": "^8.1.5",
+    "@storybook/theming": "^8.1.5",
+    "@storybook/types": "^8.1.5",
     "@types/common-tags": "^1.8.4",
     "@types/react": "^18",
     "babel-loader": "^9.1.3",
     "common-tags": "^1.8.2",
     "http-server": "^14.1.1",
-    "nodemon": "^3.1.0",
+    "nodemon": "^3.1.2",
     "remark-gfm": "^4.0.0",
-    "sass": "^1.77.2",
-    "storybook": "^8.1.2",
+    "sass": "^1.77.3",
+    "storybook": "^8.1.5",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0"
   },

packages/docs/stories/add-to-cart/cl-add-to-cart.mdx

@@ -1,19 +1,24 @@
 import { Canvas, Meta, Story, Controls } from '@storybook/blocks'
-import * as Stories from './cl-add-to-cart.stories.ts';
+import * as Stories from './cl-add-to-cart.stories.ts'
 import { codes } from '../assets/constants.ts'
+import { Alert } from '../assets/components'
 
 <Meta of={Stories} />
 
 # Add to cart
 
-Once you have correctly set up your organization in Commerce Layer and imported the drop-in library as described [here](?path=/docs/getting-started--docs), you can use the `cl-add-to-cart` component to display a buy button on any page with embedded validation rules. By clicking the button, you will be able to add to the shopping cart a specified quantity of a specific product, as shown in the code snippets below.
+Once you have correctly set up your organization in Commerce Layer and imported the drop-in library as described [here](?path=/docs/getting-started--docs), you can use the `cl-add-to-cart` component to display a buy button on any page with embedded validation rules. By clicking the button, you will be able to add to the shopping cart a specified quantity of a specific product or bundle, as shown in the code snippets below.
 
 To enable the buy button, the `quantity` value must be greater than `0`. If the quantity isn't specified the default value will be used and just one unit of the selected product will be added to the shopping cart.
 
 <Canvas of={Stories.Basic} />
 
 <Controls of={Stories.Basic} />
 
+<Alert title="Bundles" type="info">
+  The pre-filled code in the *Control* field refers to an SKU. If you select <code>bundle</code> as the kind of item, make sure to change it with a bundle code (e.g. <code>{codes.bundleAvailable}</code>) so that the button in the example above is enabled.
+</Alert>
+
 ## Validation rules
 
 As mentioned, the buy button provided by the `cl-add-to-cart` component comes with a set of embedded validation rules, meaning that the button is enabled or disabled based on whether those rules are met or not. Please find here below some common use cases.
@@ -30,6 +35,10 @@ The <code>cl-add-to-cart</code> component checks the inventory for the product i
 
 <Canvas of={Stories.OutOfStock} />
 
+The same happens when the item you want to add to the shopping cart is a bundle that contains one or more products that are out of stock (e.g. <code>{codes.bundleOutOfStock}</code>), like in the example below:
+
+<Canvas of={Stories.BundleOutOfStock} />
+
 ### Non-existing code
 
 The provided code must exist among the products of your organization. If you set as the <code>code</code> attribute a non-existing one (e.g. <code>{codes.nonexisting}</code>) the button will be rendered as disabled, as shown in the example below:
@@ -42,6 +51,10 @@ In order to prevent overselling errors, the <code>cl-add-to-cart</code> componen
 
 <Canvas of={Stories.OversellingPrevention} />
 
+The same happens if the available quantity of a product is exceeded across bundles, as shown in the example below where the bundle with code <code>{codes.bundleAvailable}</code> contains <code>10</code> units of the product with code <code>{codes.noOverselling}</code> that has a stock quantity less than <code>100</code>. If you try to add to the shopping cart <code>10</code> of those bundles (<code>10*10=100</code>), the button will be rendered as disabled:
+
+<Canvas of={Stories.BundleOversellingPrevention} />
+
 ### Virtually infinite stock
 
 Some products (e.g.<code>{codes.doNotTrack}</code>) can be assigned a virtually infinite stock (to do that, you just need to set the <code>do_not_track</code> attribute of the SKU to <code>true</code>). In this case, the component will let you add as many units as you want and the button will be rendered as enabled for any value of the  <code>quantity</code> attribute (as long as it's greater than  <code>0</code>), as shown in the example below:

packages/docs/stories/add-to-cart/cl-add-to-cart.stories.ts

@@ -16,6 +16,7 @@ export default meta
 const Template: StoryFn<Args> = (args) => {
   return create(html`
     <cl-add-to-cart
+      kind=${args.kind ?? nothing}
       code=${args.code ?? nothing}
       quantity=${args.quantity ?? nothing}
       frequency=${args.frequency ?? nothing}
@@ -30,19 +31,19 @@ Basic.args = {
   code: codes.available
 }
 
-export const Subscription = Template.bind({})
-Subscription.args = {
-  code: codes.subscription,
-  frequency: 'three-month'
-}
-
 export const WithoutAttributes = Template.bind({})
 
 export const OutOfStock = Template.bind({})
 OutOfStock.args = {
   code: codes.outOfStock
 }
 
+export const BundleOutOfStock = Template.bind({})
+BundleOutOfStock.args = {
+  kind: 'bundle',
+  code: codes.bundleOutOfStock
+}
+
 export const Nonexisting = Template.bind({})
 Nonexisting.args = {
   code: codes.nonexisting
@@ -54,8 +55,21 @@ OversellingPrevention.args = {
   quantity: 100
 }
 
+export const BundleOversellingPrevention = Template.bind({})
+BundleOversellingPrevention.args = {
+  kind: 'bundle',
+  code: codes.bundleAvailable,
+  quantity: 10
+}
+
 export const DoNotTrack = Template.bind({})
 DoNotTrack.args = {
   code: codes.doNotTrack,
   quantity: 9999
 }
+
+export const Subscription = Template.bind({})
+Subscription.args = {
+  code: codes.subscription,
+  frequency: 'three-month'
+}

packages/docs/stories/assets/constants.ts

@@ -5,7 +5,9 @@ export const codes = {
   noDiscount: 'BACKPACKFFFFFF000000XXXX',
   outOfStock: '5PANECAP9D9CA1FFFFFFXXXX',
   doNotTrack: 'BOTT17OZFFFFFF000000XXXX',
-  subscription: 'POLOMXXX000000FFFFFFMXXX'
+  subscription: 'POLOMXXX000000FFFFFFMXXX',
+  bundleAvailable: 'CLGETTINGSTARTED',
+  bundleOutOfStock: 'CLOUTOFSTOCK'
 }
 
 // // stg

packages/docs/stories/availability/cl-availability.stories.ts

@@ -16,7 +16,7 @@ export default meta
 const Template: StoryFn<Args> = (args) => {
   return create(
     html`
-      <cl-availability code=${args.code ?? nothing} rule=${args.rule ?? nothing}>
+      <cl-availability kind=${args.kind ?? nothing} code=${args.code ?? nothing} rule=${args.rule ?? nothing}>
         <cl-availability-status type="available">
           <span style="color: green;">• available</span>
           ready to be shipped in