@commercelayer/react-components 4.6.0-beta.1 → 4.7.0

package/README.md

@@ -0,0 +1,302 @@
+# Commerce Layer React Components
+
+A collection of reusable React components that makes it super fast and simple to build your own custom commerce UI, leveraging [Commerce Layer API](https://docs.commercelayer.io/api/).
+
+### What is Commerce Layer?
+
+[Commerce Layer](https://commercelayer.io) is a multi-market commerce API and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable, anywhere, through a blazing-fast, enterprise-grade, and secure API.
+
+# Getting started
+
+To get started with Commerce Layer React Components you need to install them and then get the credentials that will allow you to perform the API calls they wrap.
+
+- [Installation](#installation)
+- [Authentication](#authentication)
+- [Import](#import)
+
+## Installation
+
+Commerce Layer React Components are available as an [npm package](https://www.npmjs.com/package/@commercelayer/react-components):
+
+```
+// npm
+npm install @commercelayer/react-components
+
+// yarn
+yarn add @commercelayer/react-components
+```
+
+## Authentication
+
+All requests to Commerce Layer API must be authenticated with an [OAuth2](https://oauth.net/2/) bearer token. Hence, to use these components, you need to get a valid access token. Once you got it, you can pass it as prop — together with the endpoint of your Commerce Layer organization — to the `CommerceLayer` component, as follow:
+
+```
+<CommerceLayer
+  accessToken="your-access-token"
+  endpoint="https://yourdomain.commercelayer.io">
+
+  {/* ... child components */}
+
+</CommerceLayer>
+```
+
+This token will be used to authorize the API calls of all its child components. That's why the presence of (at least) one `CommerceLayer` component is mandatory — it must wrap every other component you need to use.
+
+> Please note that — in case you need to fetch data with different tokens (i.e. from different organizations or using apps with different roles and permissions) — nothing prevents you from putting as many `CommerceLayer` components you want in the same page.
+
+You can check [our documentation](https://docs.commercelayer.io/api/authentication) for more information about the available authorization flows and leverage [Commerce Layer JS Auth](https://github.com/commercelayer/commercelayer-js-auth) to easily interact with our authentication API.
+
+## Import
+
+You can use ES6 named import with every single component you plan to use (in addition to `CommerceLayer` one), as follow:
+
+```
+import { CommerceLayer, ...otherComponents } from '@commercelayer/react-components'
+```
+
+Check [this summary table](#list-of-components) for the complete (and constantly updated) list of available components.
+
+# Usage
+
+The code snippets below show how to put into action Commerce Layer React Components in some common use cases. Check the [`pages`](/pages) folder of this repository for more detailed examples.
+
+- [Prices](#prices)
+- [Add to cart](#add-to-cart)
+- [Shopping cart](#shopping-cart)
+- [Cart summary](#cart-summary)
+
+Under the hood, our React components are built on top of [Commerce Layer JS SDK](https://github.com/commercelayer/commercelayer-sdk) — feel free to use it if you want to develop your custom ones.
+
+## Prices
+
+This example shows how to use Commerce Layer React Components to display the prices of some SKUs, identified by their SKU codes:
+
+```
+import {
+  CommerceLayer,
+  PricesContainer,
+  Price
+} from '@commercelayer/react-components'
+
+// your code [...]
+
+<CommerceLayer accessToken="your-access-token" endpoint="https://yourdomain.commercelayer.io">
+  <PricesContainer>
+    <Price
+      skuCode="BABYONBU000000E63E7412MX"
+      className="your-custom-class"
+      compareClassName="your-custom-class"
+    />
+    <Price
+      skuCode="CANVASAU000000FFFFFF1824"
+      className="your-custom-class"
+      compareClassName="your-custom-class"
+    />
+    <Price
+      skuCode="LSLEEVMM000000E63E74LXXX"
+      className="your-custom-class"
+      compareClassName="your-custom-class"
+    />
+  </PricesContainer>
+</CommerceLayer>
+
+// your code [...]
+```
+
+You can style the selling price and the full price as you like by passing the `className` and `compareClassName` props to the `Price` component. You can choose not to show the full price by passing `showCompare={false}` (default is `true`).
+
+If you need to paginate the list of prices, pass the `perPage` prop to the `PricesContainer` component (default is `10`) — to learn how pagination works, check our [documentation](https://docs.commercelayer.io/api/pagination).
+
+## Add to cart
+
+This example shows how to use Commerce Layer React Components to implement the "add to cart" functionality on your page, showing the price of the chosen SKU, the possibility to select a variant and its quantity, the information about its availability, and the related button to perform the action:
+
+```
+import {
+  CommerceLayer,
+  OrderContainer,
+  OrderStorage,
+  PricesContainer,
+  Price,
+  AddToCartButton,
+  AvailabilityContainer,
+  AvailabilityTemplate
+} from '@commercelayer/react-components'
+
+// your code [...]
+
+<CommerceLayer accessToken="your-access-token" endpoint="https://yourdomain.commercelayer.io">
+  <OrderStorage persistKey="your-persist-key">
+    <OrderContainer
+      attributes={{
+        cart_url: 'https://yourdomain.com/cart',
+        return_url: 'https://yourdomain.com/return',
+        privacy_url: 'https://yourdomain.com/privacy'
+      }}>
+        <PricesContainer>
+          <Price skuCode="BABYONBU000000E63E746MXX" />
+        </PricesContainer>
+        <AddToCartButton quantity={1} skuCode="BABYONBU000000E63E746MXX" />
+        <AvailabilityContainer skuCode="BABYONBU000000E63E746MXX">
+          <AvailabilityTemplate />
+        </AvailabilityContainer>
+      </ItemContainer>
+    </OrderContainer>
+  </OrderStorage>
+</CommerceLayer>
+
+// your code [...]
+```
+
+For each variant you can define the custom name (i.e. its translation based on location) and image that will be shown on the corresponding line item, by passing the `lineItem` prop to the `AddToCartButton` component and properly setting the `lineItem` key — all these content data are usually taken from your CMS, since Commerce Layer doesn't manage any kind of content.
+
+When you add a product to your shopping cart:
+
+- if there is an order stored in the Local Storage identified by a key that matches the `persistKey` property, a line item is created and it is associated with that order;
+- if no order in the Local Storage matches the `persistKey` property, a new order is created and stored.
+
+> A common best practice — especially for multi-country ecommerce — is to use as `persistKey` a key containing the country code, so that you have a different shopping cart for each country.
+
+If you need to set some of the [order object](https://docs.commercelayer.io/developers/v/api-reference/orders/object) attributes at the moment of the order creation, pass to the optional prop `attributes` to the `OrderContainer` component.
+
+## Shopping cart
+
+This example shows how to use Commerce Layer React Components to build a shopping cart UI, containing the items that are going to be purchased with all their information (image, name, quantity, price) and the option to possibly remove some of them:
+
+```
+import {
+  CommerceLayer,
+  OrderContainer,
+  OrderStorage,
+  LineItemsContainer,
+  LineItemsCount,
+  LineItem,
+  LineItemImage,
+  LineItemName,
+  LineItemQuantity,
+  LineItemAmount,
+  LineItemRemoveLink,
+  Errors
+} from '@commercelayer/react-components'
+
+// your code [...]
+
+<CommerceLayer accessToken="your-access-token" endpoint="https://yourdomain.commercelayer.io">
+  <OrderStorage persistKey="your-persist-key">
+      <OrderContainer>
+        <LineItemsContainer>
+          <p className="your-custom-class">
+            Your shopping cart contains <LineItemsCount /> items
+          </p>
+          <LineItem>
+            <LineItemImage width={50} />
+            <LineItemName />
+            <LineItemQuantity max={10} />
+            <Errors resource="lineItem" field="quantity" />
+            <LineItemAmount />
+            <LineItemRemoveLink />
+          </LineItem>
+        </LineItemsContainer>
+      </OrderContainer>
+  </OrderStorage>
+</CommerceLayer>
+
+// your code [...]
+```
+
+The `Errors` component lets you show the error (if present) returned by our API on a single attribute of a specific resource. You can customize the error message as you like by passing the `messages` prop to the component.
+
+## Cart summary
+
+This example shows how to use Commerce Layer React Components to show a sample order summary with all the order line items (including discounts, shipping costs, taxes, and gift cards — if present) and totals:
+
+```
+import {
+  CommerceLayer,
+  OrderContainer,
+  OrderStorage,
+  SubTotalAmount,
+  DiscountAmount,
+  ShippingAmount,
+  TaxesAmount,
+  GiftCardAmount,
+  TotalAmount,
+  CheckoutLink
+} from '@commercelayer/react-components'
+
+// your code [...]
+
+<CommerceLayer accessToken="your-access-token" endpoint="https://yourdomain.commercelayer.io">
+  <OrderStorage persistKey="your-persist-key">
+    <OrderContainer>
+      <SubTotalAmount />
+      <DiscountAmount />
+      <ShippingAmount />
+      <TaxesAmount />
+      <GiftCardAmount />
+      <TotalAmount />
+      <CheckoutLink />
+    </OrderContainer>
+  </OrderStorage>
+</CommerceLayer>
+
+// your code [...]
+```
+
+You can change the amount format of each line of the summary by passing the `format` prop to the desired component (default is `formatted`).
+
+The `CheckoutLink` component lets you proceed to checkout and links to the checkout URL configured on Commerce Layer (_Settings → Markets_).
+
+# List of components
+
+These are the currently available Commerce Layer React Components.
+
+> Please note that not every Commerce Layer React component can be nested into any other one.
+
+For each component, the table below shows its props and the list of the permitted children (if any):
+
+>
+
+| Name                       | Props                                                                            | Children                                                                                                                                                                                                             |
+| -------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `AddToCartButton`          | `disabled`<br />`label`<br />`skuCode`<br />`lineItem`<br/>`lineItemOption`<br/>`quantity`                           |
+| `AvailabilityContainer`    | `skuCode`                                                                        | `AvailabilityTemplate`                                                                                                                                                                                               |
+| `AvailabilityTemplate`     | `showShippingMethodName`<br />`timeFormat`                                       |
+| `CheckoutLink`             | `label`                                                                          |
+| `CommerceLayer`            | `accessToken`<br />`endpoint`                                                    | `GiftCardContainer`<br />`OrderContainer`<br />`PricesContainer`                                                                                                                                                     |
+| `DiscountAmount`           | `className`<br />`format`<br />`id`<br />`name`<br />`style`                     |
+| `Errors`                   | `field`<br />`messages`<br />`resource`                                          |
+| `ExternalFunction`         | `url`                                                                            | `AddToCartButton`                                                                                                                                                                                                    |
+| `GiftCard`                 | `onSubmit`                                                                       | `Errors`<br />`GiftCardCurrencySelector`<br />`GiftCardInput`<br />`MetadataInput`<br />`SubmitButton`                                                                                                               |
+| `GiftCardAmount`           | `className`<br />`format`<br />`id`<br />`name`<br />`style`                     |
+| `GiftCardContainer`        |                                                                                  | `GiftCard`<br/>`Errors`                                                                                                                                                                                              |
+| `GiftCardCurrencySelector` | `placeholder`<br />`required`<br />`value`                                       |
+| `GiftCardInput`            | `name`<br />`placeholder`<br />`type`                                            |
+ `LineItem`                 | `type`                                                                           | `Errors`<br />`LineItemAmount`<br />`LineItemImage`<br />`LineItemName`<br />`LineItemOptions`<br />`LineItemQuantity`<br />`LineItemRemoveLink`                                                                     |
+| `LineItemAmount`           | `className`<br />`format`<br />`id`<br />`name`<br />`style`<br />`type`         |
+| `LineItemImage`            | `width`                                                                          |
+| `LineItemName`             |                                                                                  |
+| `LineItemOption`           | `keyClassName`<br />`keyId`<br />`keyStyle`<br />`name`<br />`valueClassName`    |
+| `LineItemOptions`          | `title`<br /> `showName`<br />`skuOptionId`                                      | `LineItemOption`                                                                                                                                                                                                     |
+| `LineItemQuantity`         | `disabled`<br />`max`                                                            |
+| `LineItemRemoveLink`       | `label`                                                                          |
+| `LineItemsContainer`       | `filters`<br />`loader`                                                          | `LineItem`<br />`LineItemsCount`                                                                                                                                                                                     |
+| `LineItemsCount`           | `className`<br />`id`<br />`name`<br />`style`                                   |
+| `MetadataInput`            | `name`<br />`onChange`<br />`placeholder`<br />`type`                            |
+| `OrderContainer`           | `attributes`<br />`metadata`<br />`orderId`                                      | `CheckoutLink`<br />`DiscountAmount`<br />`GiftCardAmount`<br />`GiftCardContainer`<br />`ItemContainer`<br />`LineItemsContainer`<br />`ShippingAmount`<br />`SubTotalAmount`<br />`TaxesAmount`<br />`TotalAmount` |
+| `OrderStorage`             | `clearWhenPlaced`<br />`persistKey`                                              | `OrderContainer`                                                                                                                                                                                                     |
+| `Price`                    | `compareClassName`<br />`showCompare`<br />`skuCode`                             |
+| `PricesContainer`          | `filters`<br />`loader`<br />`perPage`<br />`skuCode`                            | `Price`                                                                                                                                                                                                              |
+ `ShippingAmount`           | `className`<br />`format`<br />`id`<br />`name`<br />`style`                     |
+| `SubmitButton`             | `label`                                                                          |
+| `SubTotalAmount`           | `className`<br />`format`<br />`id`<br />`name`<br />`style`                     |
+| `TaxesAmount`              | `className`<br />`format`<br />`id`<br />`name`<br />`style`                     |
+| `TotalAmount`              | `className`<br />`format`<br />`id`<br />`name`<br />`style`                     |
+
+For more detailed information on each components (i.e. prop types and default values, required props, etc.), have a look at the components folder [`packages/react-components/src/components`](/packages/react-components/src/components).
+
+---
+
+### License
+
+This repository is published under the [MIT](LICENSE) license.

package/lib/cjs/components/customers/MyAccountLink.d.ts

@@ -18,6 +18,10 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
      * The label of the link
      */
     label?: string | JSX.Element;
+    /**
+     * The domain of your forked application
+     */
+    customDomain?: string;
 }
 export declare function MyAccountLink(props: Props): JSX.Element;
 export default MyAccountLink;

package/lib/cjs/components/customers/MyAccountLink.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MyAccountLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain"),jwt_1=tslib_1.__importDefault(require("../../utils/jwt"));function MyAccountLink(props){const{label="Go to my account",children}=props,p=tslib_1.__rest(props,["label","children"]),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyAccountLink` outside of `CommerceLayer`");const{domain,slug}=(0,getDomain_1.getDomain)(endpoint),disabled=!("owner"in(0,jwt_1.default)(accessToken)),href=(0,getApplicationLink_1.getApplicationLink)({slug,accessToken,applicationType:"my-account",domain}),parentProps=Object.assign({disabled,label,href},p);function handleClick(e){disabled&&e.preventDefault()}return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("a",Object.assign({"aria-disabled":disabled,onClick:handleClick,href},p,{children:label}))}exports.MyAccountLink=MyAccountLink,exports.default=MyAccountLink;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MyAccountLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain"),jwt_1=tslib_1.__importDefault(require("../../utils/jwt"));function MyAccountLink(props){const{label="Go to my account",children,customDomain}=props,p=tslib_1.__rest(props,["label","children","customDomain"]),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyAccountLink` outside of `CommerceLayer`");const{domain,slug}=(0,getDomain_1.getDomain)(endpoint),disabled=!("owner"in(0,jwt_1.default)(accessToken)),href=(0,getApplicationLink_1.getApplicationLink)({slug,accessToken,applicationType:"my-account",domain,customDomain}),parentProps=Object.assign({disabled,label,href},p);function handleClick(e){disabled&&e.preventDefault()}return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("a",Object.assign({"aria-disabled":disabled,onClick:handleClick,href},p,{children:label}))}exports.MyAccountLink=MyAccountLink,exports.default=MyAccountLink;

package/lib/cjs/components/customers/MyIdentityLink.d.ts

@@ -30,6 +30,10 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
      * The return url to redirect the user after the login/signup
      */
     returnUrl?: string;
+    /**
+     * The domain of your forked application
+     */
+    customDomain?: string;
 }
 export declare function MyIdentityLink(props: Props): JSX.Element;
 export default MyIdentityLink;

package/lib/cjs/components/customers/MyIdentityLink.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MyIdentityLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain");function MyIdentityLink(props){const{label,children,type,clientId,scope,returnUrl}=props,p=tslib_1.__rest(props,["label","children","type","clientId","scope","returnUrl"]),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyIdentityLink` outside of `CommerceLayer`");const{domain,slug}=(0,getDomain_1.getDomain)(endpoint),href=(0,getApplicationLink_1.getApplicationLink)({slug,accessToken,applicationType:"identity",domain,modeType:type,clientId,scope,returnUrl:returnUrl??window.location.href}),parentProps=Object.assign({label,href,clientId,scope},p);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("a",Object.assign({href},p,{children:label}))}exports.MyIdentityLink=MyIdentityLink,exports.default=MyIdentityLink;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MyIdentityLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain");function MyIdentityLink(props){const{label,children,type,clientId,scope,returnUrl,customDomain}=props,p=tslib_1.__rest(props,["label","children","type","clientId","scope","returnUrl","customDomain"]),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyIdentityLink` outside of `CommerceLayer`");const{domain,slug}=(0,getDomain_1.getDomain)(endpoint),href=(0,getApplicationLink_1.getApplicationLink)({slug,accessToken,applicationType:"identity",domain,modeType:type,clientId,scope,returnUrl:returnUrl??window.location.href,customDomain}),parentProps=Object.assign({label,href,clientId,scope},p);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("a",Object.assign({href},p,{children:label}))}exports.MyIdentityLink=MyIdentityLink,exports.default=MyIdentityLink;

package/lib/cjs/components/line_items/LineItemQuantity.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
+import { type LineItem } from '@commercelayer/sdk';
 interface ChildrenProps extends Omit<Props, 'children'> {
     quantity: number;
     handleChange: (event: React.MouseEvent<HTMLSelectElement>) => void;
+    lineItem?: LineItem;
 }
 type Props = {
     children?: ChildrenFunction<ChildrenProps>;

package/lib/cjs/components/line_items/LineItemQuantity.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineItemQuantity=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),LineItemChildrenContext_1=tslib_1.__importDefault(require("../../context/LineItemChildrenContext")),LineItemContext_1=tslib_1.__importDefault(require("../../context/LineItemContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent"));function LineItemQuantity(props){var _a;const{max=50,readonly=!1}=props,p=tslib_1.__rest(props,["max","readonly"]),{lineItem}=(0,react_1.useContext)(LineItemChildrenContext_1.default),{updateLineItem}=(0,react_1.useContext)(LineItemContext_1.default),options=[];for(let i=1;i<=max;i++)options.push((0,jsx_runtime_1.jsx)("option",{value:`${i}`,children:i},i));const handleChange=e=>{const quantity2=Number(e.target.value);updateLineItem&&lineItem&&updateLineItem(lineItem.id,quantity2)},quantity=lineItem?.quantity,parentProps=Object.assign({handleChange,quantity},props);return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.children})):readonly?(0,jsx_runtime_1.jsx)("span",Object.assign({},p,{children:quantity})):(0,jsx_runtime_1.jsx)("select",Object.assign({"data-testid":lineItem?.sku_code,title:(_a=lineItem?.name)!==null&&_a!==void 0?_a:"",value:quantity,onChange:handleChange},p,{children:options}))}exports.LineItemQuantity=LineItemQuantity,exports.default=LineItemQuantity;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineItemQuantity=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),LineItemChildrenContext_1=tslib_1.__importDefault(require("../../context/LineItemChildrenContext")),LineItemContext_1=tslib_1.__importDefault(require("../../context/LineItemContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent"));function LineItemQuantity(props){var _a;const{max=50,readonly=!1}=props,p=tslib_1.__rest(props,["max","readonly"]),{lineItem}=(0,react_1.useContext)(LineItemChildrenContext_1.default),{updateLineItem}=(0,react_1.useContext)(LineItemContext_1.default),options=[];for(let i=1;i<=max;i++)options.push((0,jsx_runtime_1.jsx)("option",{value:`${i}`,children:i},i));const handleChange=e=>{const quantity2=Number(e.target.value);updateLineItem&&lineItem&&updateLineItem(lineItem.id,quantity2)},quantity=lineItem?.quantity,parentProps=Object.assign({handleChange,quantity,lineItem},props);return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.children})):readonly?(0,jsx_runtime_1.jsx)("span",Object.assign({},p,{children:quantity})):(0,jsx_runtime_1.jsx)("select",Object.assign({"data-testid":lineItem?.sku_code,title:(_a=lineItem?.name)!==null&&_a!==void 0?_a:"",value:quantity,onChange:handleChange},p,{children:options}))}exports.LineItemQuantity=LineItemQuantity,exports.default=LineItemQuantity;

package/lib/cjs/components/line_items/LineItemRemoveLink.d.ts

@@ -1,8 +1,10 @@
 import { type PropsWithoutRef } from 'react';
 import { type ChildrenFunction } from '../../typings/index';
+import { type LineItem } from '@commercelayer/sdk';
 interface ChildrenProps extends Omit<Props, 'children'> {
     handleRemove: (event: React.MouseEvent<HTMLAnchorElement>) => void;
     label?: string;
+    lineItem?: LineItem;
 }
 interface Props extends PropsWithoutRef<Omit<JSX.IntrinsicElements['a'], 'children'>> {
     children?: ChildrenFunction<ChildrenProps>;

package/lib/cjs/components/line_items/LineItemRemoveLink.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineItemRemoveLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),LineItemChildrenContext_1=tslib_1.__importDefault(require("../../context/LineItemChildrenContext")),LineItemContext_1=tslib_1.__importDefault(require("../../context/LineItemContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),useCustomContext_1=tslib_1.__importDefault(require("../../utils/hooks/useCustomContext"));function LineItemRemoveLink(props){var _a;const{label="Remove",onClick}=props,{lineItem}=(0,useCustomContext_1.default)({context:LineItemChildrenContext_1.default,contextComponentName:"LineItem",currentComponentName:"LineItemRemoveLink",key:"lineItem"}),{deleteLineItem}=(0,react_1.useContext)(LineItemContext_1.default),handleRemove=e=>{e.preventDefault(),deleteLineItem!=null&&lineItem!=null&&deleteLineItem(lineItem.id),onClick?.(e)},parentProps=Object.assign({handleRemove},props);return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.children})):(0,jsx_runtime_1.jsx)("a",Object.assign({"data-testid":`line-item-remove-link-${(_a=lineItem?.sku_code)!==null&&_a!==void 0?_a:""}`},props,{href:"#",onClick:handleRemove,children:label}))}exports.LineItemRemoveLink=LineItemRemoveLink,exports.default=LineItemRemoveLink;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineItemRemoveLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),LineItemChildrenContext_1=tslib_1.__importDefault(require("../../context/LineItemChildrenContext")),LineItemContext_1=tslib_1.__importDefault(require("../../context/LineItemContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),useCustomContext_1=tslib_1.__importDefault(require("../../utils/hooks/useCustomContext"));function LineItemRemoveLink(props){var _a;const{label="Remove",onClick}=props,{lineItem}=(0,useCustomContext_1.default)({context:LineItemChildrenContext_1.default,contextComponentName:"LineItem",currentComponentName:"LineItemRemoveLink",key:"lineItem"}),{deleteLineItem}=(0,react_1.useContext)(LineItemContext_1.default),handleRemove=e=>{e.preventDefault(),deleteLineItem!=null&&lineItem!=null&&deleteLineItem(lineItem.id),onClick?.(e)},parentProps=Object.assign({handleRemove,lineItem},props);return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.children})):(0,jsx_runtime_1.jsx)("a",Object.assign({"data-testid":`line-item-remove-link-${(_a=lineItem?.sku_code)!==null&&_a!==void 0?_a:""}`},props,{href:"#",onClick:handleRemove,children:label}))}exports.LineItemRemoveLink=LineItemRemoveLink,exports.default=LineItemRemoveLink;

package/lib/cjs/components/orders/CartLink.d.ts

@@ -30,6 +30,10 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
      * The type of the cart. Defaults to undefined. If set to 'mini', the cart will open in a modal.
      */
     type?: 'mini';
+    /**
+     * The domain of your forked application
+     */
+    customDomain?: string;
 }
 export declare function CartLink(props: Props): JSX.Element | null;
 export default CartLink;

package/lib/cjs/components/orders/CartLink.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CartLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain"),events_1=require("../../utils/events");function CartLink(props){const{label,children,type}=props,p=tslib_1.__rest(props,["label","children","type"]),{order,createOrder}=(0,react_1.useContext)(OrderContext_1.default),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default);if(accessToken==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");if(endpoint==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");const{domain,slug}=(0,getDomain_1.getDomain)(endpoint),href=slug&&order?.id?(0,getApplicationLink_1.getApplicationLink)({slug,orderId:order?.id,accessToken,domain,applicationType:"cart"}):"",handleClick=event=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(event.preventDefault(),type!=="mini")if(order?.id)location.href=href;else{const orderId=yield createOrder({});slug&&(location.href=(0,getApplicationLink_1.getApplicationLink)({slug,orderId,accessToken,domain,applicationType:"cart"}))}else(0,events_1.publish)("open-cart")}),parentProps=Object.assign({handleClick,label,href,orderId:order?.id,accessToken},p);return accessToken?children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("a",Object.assign({href},p,{onClick:e=>{handleClick(e)},children:label})):null}exports.CartLink=CartLink,exports.default=CartLink;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CartLink=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain"),events_1=require("../../utils/events");function CartLink(props){const{label,children,type,customDomain}=props,p=tslib_1.__rest(props,["label","children","type","customDomain"]),{order,createOrder}=(0,react_1.useContext)(OrderContext_1.default),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default);if(accessToken==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");if(endpoint==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");const{domain,slug}=(0,getDomain_1.getDomain)(endpoint),href=slug&&order?.id?(0,getApplicationLink_1.getApplicationLink)({slug,orderId:order?.id,accessToken,domain,applicationType:"cart",customDomain}):"",handleClick=event=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(event.preventDefault(),type!=="mini")if(order?.id)location.href=href;else{const orderId=yield createOrder({});slug&&(location.href=(0,getApplicationLink_1.getApplicationLink)({slug,orderId,accessToken,domain,applicationType:"cart",customDomain}))}else(0,events_1.publish)("open-cart")}),parentProps=Object.assign({handleClick,label,href,orderId:order?.id,accessToken},p);return accessToken?children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("a",Object.assign({href},p,{onClick:e=>{handleClick(e)},children:label})):null}exports.CartLink=CartLink,exports.default=CartLink;

package/lib/cjs/components/orders/HostedCart.d.ts

@@ -27,6 +27,10 @@ interface Props extends Omit<JSX.IntrinsicElements['div'], 'children' | 'style'>
      * A function that will be called when the cart is open and the background is clicked.
      */
     handleOpen?: () => void;
+    /**
+     * The domain of your forked application.
+     */
+    customDomain?: string;
 }
-export declare function HostedCart({ type, openAdd, style, open, handleOpen, ...props }: Props): JSX.Element | null;
+export declare function HostedCart({ type, openAdd, style, open, handleOpen, customDomain, ...props }: Props): JSX.Element | null;
 export {};

package/lib/cjs/components/orders/HostedCart.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HostedCart=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),OrderStorageContext_1=tslib_1.__importDefault(require("../../context/OrderStorageContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain"),useCustomContext_1=tslib_1.__importDefault(require("../../utils/hooks/useCustomContext")),react_1=require("react"),iframe_resizer_1=require("iframe-resizer"),events_1=require("../../utils/events"),defaultIframeStyle={width:"1px",minWidth:"100%",minHeight:"100%",border:"none"},defaultContainerStyle={position:"fixed",top:"0",right:"-25rem",height:"100%",width:"23rem",transition:"right 0.5s ease-in-out",zIndex:"0",overflow:"auto"},defaultBackgroundStyle={opacity:"0",position:"fixed",top:"0",left:"0",height:"100%",width:"100vw",transition:"opacity 0.5s ease-in-out",zIndex:"-10",backgroundColor:"black"},defaultIconStyle={width:"1.25rem",height:"1.25rem"},defaultIconContainer={textAlign:"left",paddingLeft:"20px",paddingTop:"20px",background:"#ffffff",color:"#686E6E"},defaultStyle={cart:defaultIframeStyle,container:defaultContainerStyle,background:defaultBackgroundStyle,icon:defaultIconStyle,iconContainer:defaultIconContainer};function HostedCart(_a){var _b,_c,_d,_e,{type,openAdd=!1,style,open=!1,handleOpen}=_a,props=tslib_1.__rest(_a,["type","openAdd","style","open","handleOpen"]);const[isOpen,setOpen]=(0,react_1.useState)(!1),ref=(0,react_1.useRef)(null),{accessToken,endpoint}=(0,useCustomContext_1.default)({context:CommerceLayerContext_1.default,contextComponentName:"CommerceLayer",currentComponentName:"HostedCart",key:"accessToken"}),[src,setSrc]=(0,react_1.useState)();if(accessToken==null||endpoint==null)return null;const{order,createOrder}=(0,react_1.useContext)(OrderContext_1.default),{persistKey}=(0,react_1.useContext)(OrderStorageContext_1.default),{domain,slug}=(0,getDomain_1.getDomain)(endpoint);function setOrder(openCart){var _a2;return tslib_1.__awaiter(this,void 0,void 0,function*(){const orderId=(_a2=localStorage.getItem(persistKey))!==null&&_a2!==void 0?_a2:yield createOrder({});orderId!=null&&accessToken&&(setSrc((0,getApplicationLink_1.getApplicationLink)({slug,orderId,accessToken,domain,applicationType:"cart"})),openCart&&setTimeout(()=>{handleOpen!=null?handleOpen():setOpen(!0)},300))})}function onMessage(data){var _a2;switch(data.message.type){case"update":break;case"close":type==="mini"&&(handleOpen!=null?handleOpen():setOpen(!1));break;case"blur":type==="mini"&&isOpen&&((_a2=ref.current)===null||_a2===void 0||_a2.focus());break}}(0,react_1.useEffect)(()=>{var _a2;const orderId=localStorage.getItem(persistKey);let ignore=!1;return open!=null&&open!==isOpen&&setOpen(open),openAdd&&type==="mini"&&(0,events_1.subscribe)("open-cart",()=>{window.document.body.style.overflow="hidden",src==null&&order?.id==null&&orderId==null?setOrder(!0):(src!=null&&ref.current!=null&&(ref.current.src=src),setTimeout(()=>{handleOpen!=null?handleOpen():setOpen(!0)},300))}),src==null&&order?.id==null&&orderId==null&&accessToken!=null&&!ignore&&isOpen?setOrder():src==null&&(order?.id!=null||orderId!=null)&&accessToken&&setSrc((0,getApplicationLink_1.getApplicationLink)({slug,orderId:(_a2=order?.id)!==null&&_a2!==void 0?_a2:orderId,accessToken,domain,applicationType:"cart"})),src!=null&&ref.current!=null&&(ref.current.src=src),()=>{ignore=!0,openAdd&&type==="mini"&&(0,events_1.unsubscribe)("open-cart",()=>{})}},[src,open,order?.id,accessToken]),(0,react_1.useEffect)(()=>{ref.current!=null&&(0,iframe_resizer_1.iframeResizer)({checkOrigin:!1,bodyPadding:"20px",onMessage},ref.current)},[ref.current!=null]);function onCloseCart(){window.document.body.style.removeProperty("overflow"),handleOpen!=null?handleOpen():setOpen(!1)}return src==null?null:type==="mini"?(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)("div",{style:Object.assign(Object.assign(Object.assign({},defaultStyle.background),style?.background),{opacity:isOpen?"0.5":(_b=defaultStyle.background)===null||_b===void 0?void 0:_b.opacity,zIndex:isOpen?"1":(_c=defaultStyle.background)===null||_c===void 0?void 0:_c.zIndex}),onClick:onCloseCart}),(0,jsx_runtime_1.jsxs)("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},defaultStyle.container),style?.container),{right:isOpen?"0":(_d=defaultStyle.container)===null||_d===void 0?void 0:_d.right,zIndex:isOpen?"100":(_e=defaultStyle.container)===null||_e===void 0?void 0:_e.zIndex})},props,{children:[(0,jsx_runtime_1.jsx)("div",{style:Object.assign(Object.assign({},defaultStyle.iconContainer),style?.iconContainer),children:(0,jsx_runtime_1.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",style:Object.assign(Object.assign({},defaultStyle.icon),style?.icon),onClick:onCloseCart,children:(0,jsx_runtime_1.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})}),(0,jsx_runtime_1.jsx)("iframe",{title:"Cart",ref,style:Object.assign(Object.assign({},defaultStyle.cart),style?.cart),src,width:"100%",height:"100%"})]}))]}):(0,jsx_runtime_1.jsx)("iframe",{title:"Cart",ref,style:Object.assign(Object.assign({},defaultStyle.cart),style?.cart),src,width:"100%",height:"100%"})}exports.HostedCart=HostedCart;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HostedCart=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),OrderStorageContext_1=tslib_1.__importDefault(require("../../context/OrderStorageContext")),getApplicationLink_1=require("../../utils/getApplicationLink"),getDomain_1=require("../../utils/getDomain"),useCustomContext_1=tslib_1.__importDefault(require("../../utils/hooks/useCustomContext")),react_1=require("react"),iframe_resizer_1=require("iframe-resizer"),events_1=require("../../utils/events"),defaultIframeStyle={width:"1px",minWidth:"100%",minHeight:"100%",border:"none"},defaultContainerStyle={position:"fixed",top:"0",right:"-25rem",height:"100%",width:"23rem",transition:"right 0.5s ease-in-out",zIndex:"0",overflow:"auto"},defaultBackgroundStyle={opacity:"0",position:"fixed",top:"0",left:"0",height:"100%",width:"100vw",transition:"opacity 0.5s ease-in-out",zIndex:"-10",backgroundColor:"black"},defaultIconStyle={width:"1.25rem",height:"1.25rem"},defaultIconContainer={textAlign:"left",paddingLeft:"20px",paddingTop:"20px",background:"#ffffff",color:"#686E6E"},defaultStyle={cart:defaultIframeStyle,container:defaultContainerStyle,background:defaultBackgroundStyle,icon:defaultIconStyle,iconContainer:defaultIconContainer};function HostedCart(_a){var _b,_c,_d,_e,{type,openAdd=!1,style,open=!1,handleOpen,customDomain}=_a,props=tslib_1.__rest(_a,["type","openAdd","style","open","handleOpen","customDomain"]);const[isOpen,setOpen]=(0,react_1.useState)(!1),ref=(0,react_1.useRef)(null),{accessToken,endpoint}=(0,useCustomContext_1.default)({context:CommerceLayerContext_1.default,contextComponentName:"CommerceLayer",currentComponentName:"HostedCart",key:"accessToken"}),[src,setSrc]=(0,react_1.useState)();if(accessToken==null||endpoint==null)return null;const{order,createOrder}=(0,react_1.useContext)(OrderContext_1.default),{persistKey}=(0,react_1.useContext)(OrderStorageContext_1.default),{domain,slug}=(0,getDomain_1.getDomain)(endpoint);function setOrder(openCart){var _a2;return tslib_1.__awaiter(this,void 0,void 0,function*(){const orderId=(_a2=localStorage.getItem(persistKey))!==null&&_a2!==void 0?_a2:yield createOrder({});orderId!=null&&accessToken&&(setSrc((0,getApplicationLink_1.getApplicationLink)({slug,orderId,accessToken,domain,applicationType:"cart",customDomain})),openCart&&setTimeout(()=>{handleOpen!=null?handleOpen():setOpen(!0)},300))})}function onMessage(data){var _a2;switch(data.message.type){case"update":break;case"close":type==="mini"&&(handleOpen!=null?handleOpen():setOpen(!1));break;case"blur":type==="mini"&&isOpen&&((_a2=ref.current)===null||_a2===void 0||_a2.focus());break}}(0,react_1.useEffect)(()=>{var _a2;const orderId=localStorage.getItem(persistKey);let ignore=!1;return open!=null&&open!==isOpen&&setOpen(open),openAdd&&type==="mini"&&(0,events_1.subscribe)("open-cart",()=>{window.document.body.style.overflow="hidden",src==null&&order?.id==null&&orderId==null?setOrder(!0):(src!=null&&ref.current!=null&&(ref.current.src=src),setTimeout(()=>{handleOpen!=null?handleOpen():setOpen(!0)},300))}),src==null&&order?.id==null&&orderId==null&&accessToken!=null&&!ignore&&isOpen?setOrder():src==null&&(order?.id!=null||orderId!=null)&&accessToken&&setSrc((0,getApplicationLink_1.getApplicationLink)({slug,orderId:(_a2=order?.id)!==null&&_a2!==void 0?_a2:orderId,accessToken,domain,applicationType:"cart"})),src!=null&&ref.current!=null&&(ref.current.src=src),()=>{ignore=!0,openAdd&&type==="mini"&&(0,events_1.unsubscribe)("open-cart",()=>{})}},[src,open,order?.id,accessToken]),(0,react_1.useEffect)(()=>{ref.current!=null&&(0,iframe_resizer_1.iframeResizer)({checkOrigin:!1,bodyPadding:"20px",onMessage},ref.current)},[ref.current!=null]);function onCloseCart(){window.document.body.style.removeProperty("overflow"),handleOpen!=null?handleOpen():setOpen(!1)}return src==null?null:type==="mini"?(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)("div",{style:Object.assign(Object.assign(Object.assign({},defaultStyle.background),style?.background),{opacity:isOpen?"0.5":(_b=defaultStyle.background)===null||_b===void 0?void 0:_b.opacity,zIndex:isOpen?"1":(_c=defaultStyle.background)===null||_c===void 0?void 0:_c.zIndex}),onClick:onCloseCart}),(0,jsx_runtime_1.jsxs)("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},defaultStyle.container),style?.container),{right:isOpen?"0":(_d=defaultStyle.container)===null||_d===void 0?void 0:_d.right,zIndex:isOpen?"100":(_e=defaultStyle.container)===null||_e===void 0?void 0:_e.zIndex})},props,{children:[(0,jsx_runtime_1.jsx)("div",{style:Object.assign(Object.assign({},defaultStyle.iconContainer),style?.iconContainer),children:(0,jsx_runtime_1.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",style:Object.assign(Object.assign({},defaultStyle.icon),style?.icon),onClick:onCloseCart,children:(0,jsx_runtime_1.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})}),(0,jsx_runtime_1.jsx)("iframe",{title:"Cart",ref,style:Object.assign(Object.assign({},defaultStyle.cart),style?.cart),src,width:"100%",height:"100%"})]}))]}):(0,jsx_runtime_1.jsx)("iframe",{title:"Cart",ref,style:Object.assign(Object.assign({},defaultStyle.cart),style?.cart),src,width:"100%",height:"100%"})}exports.HostedCart=HostedCart;

package/lib/cjs/components/prices/PricesContainer.d.ts

@@ -1,10 +1,39 @@
 import { type LoaderType } from '../../typings/index';
 interface Props {
+    /**
+     * Any valid JSX.Element(s).
+     * A single `<Price>` component or a list of them is expected to render the prices.
+     */
     children: JSX.Element | JSX.Element[];
+    /**
+     * SDK query filter to fetch the prices when multiple prices are requested.
+     */
     filters?: object;
+    /**
+     * Loader component or string to be rendered while the prices are being fetched.
+     * @default 'Loading...'
+     */
     loader?: LoaderType;
+    /**
+     * Prices per page to be fetched
+     */
     perPage?: number;
+    /**
+     * SKU code to fetch the prices for. If not provided, the `sku_code` will be retrieved from the `<Price>` component(s) nested as children.
+     */
     skuCode?: string;
 }
+/**
+ * Main container for the Prices components. It stores the prices context.
+ *
+ * It can be used to fetch the prices for a specific `sku_code` passed as prop
+ * or for the `sku_code` retrieved from all `<Price>` components nested as children.
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<CommerceLayer>` component.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<Price>`
+ * </span>
+ */
 export declare function PricesContainer(props: Props): JSX.Element;
 export default PricesContainer;

package/lib/cjs/hooks/useOrderContainer.d.ts

@@ -1,7 +1,7 @@
 import { type createOrder, type OrderState, type addToCart } from '../reducers/OrderReducer';
 type TAddToCartParams = Omit<Parameters<typeof addToCart>[number], 'buyNowMode' | 'state' | 'dispatch' | 'setLocalOrder' | 'errors' | 'checkoutUrl' | 'persistKey' | 'config'>;
 type TCreateCartParams = Pick<Parameters<typeof createOrder>[number], 'orderAttributes' | 'orderMetadata'>;
-interface TReturnOrder extends Omit<OrderState, 'loading' | 'include' | 'includeLoaded' | 'withoutIncludes'> {
+interface TReturnOrder extends Omit<OrderState, 'loading' | 'include' | 'includeLoaded' | 'withoutIncludes' | 'orderId'> {
     reloadOrder: () => Promise<OrderState['order']>;
     addToCart: (params: TAddToCartParams) => ReturnType<typeof addToCart>;
     createOrder: (params: TCreateCartParams) => Promise<string | undefined>;

package/lib/cjs/utils/getApplicationLink.d.ts

@@ -25,7 +25,8 @@ interface TArgs {
     accessToken: string;
     slug: string;
     domain: string;
+    customDomain?: string;
 }
 type Props = ApplicationTypeProps & TArgs;
-export declare function getApplicationLink({ orderId, accessToken, slug, domain, applicationType, modeType, clientId, scope, returnUrl }: Props): string;
+export declare function getApplicationLink({ orderId, accessToken, slug, domain, applicationType, modeType, clientId, scope, returnUrl, customDomain }: Props): string;
 export {};

package/lib/cjs/utils/getApplicationLink.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getApplicationLink=void 0;function getApplicationLink({orderId,accessToken,slug,domain,applicationType,modeType,clientId,scope,returnUrl}){var _a;const env=domain==="commercelayer.io"?"":"stg.",t=modeType==="login"?"":"signup",c=clientId?`&clientId=${clientId}`:"",s=scope?`&scope=${scope}`:"",r=returnUrl?`&returnUrl=${returnUrl}`:"",params=applicationType==="identity"?`${c}${s}${r}`:"";return`https://${slug}.${env}commercelayer.app/${applicationType.toString()}/${(_a=orderId??t)!==null&&_a!==void 0?_a:""}?accessToken=${accessToken}${params}`}exports.getApplicationLink=getApplicationLink;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getApplicationLink=void 0;function getApplicationLink({orderId,accessToken,slug,domain,applicationType,modeType,clientId,scope,returnUrl,customDomain}){var _a;const env=domain==="commercelayer.io"?"":"stg.",t=applicationType==="identity"?modeType==="login"?"":"signup":"",c=clientId?`&clientId=${clientId}`:"",s=scope?`&scope=${scope}`:"",r=returnUrl?`&returnUrl=${returnUrl}`:"",params=applicationType==="identity"?`${c}${s}${r}`:"",domainName=customDomain??`${slug}.${env}commercelayer.app`,application=customDomain?"":`/${applicationType.toString()}`;return`https://${domainName}${application}/${(_a=orderId??t)!==null&&_a!==void 0?_a:""}?accessToken=${accessToken}${params}`}exports.getApplicationLink=getApplicationLink;

package/lib/esm/components/customers/MyAccountLink.d.ts

@@ -18,6 +18,10 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
      * The label of the link
      */
     label?: string | JSX.Element;
+    /**
+     * The domain of your forked application
+     */
+    customDomain?: string;
 }
 export declare function MyAccountLink(props: Props): JSX.Element;
 export default MyAccountLink;

package/lib/esm/components/customers/MyAccountLink.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import Parent from"../utils/Parent";import CommerceLayerContext from"../../context/CommerceLayerContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";import jwt from"../../utils/jwt";export function MyAccountLink(props){const{label="Go to my account",children,...p}=props,{accessToken,endpoint}=useContext(CommerceLayerContext);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyAccountLink` outside of `CommerceLayer`");const{domain,slug}=getDomain(endpoint),disabled=!("owner"in jwt(accessToken)),href=getApplicationLink({slug,accessToken,applicationType:"my-account",domain}),parentProps={disabled,label,href,...p};function handleClick(e){disabled&&e.preventDefault()}return children?_jsx(Parent,{...parentProps,children}):_jsx("a",{"aria-disabled":disabled,onClick:handleClick,href,...p,children:label})}export default MyAccountLink;
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import Parent from"../utils/Parent";import CommerceLayerContext from"../../context/CommerceLayerContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";import jwt from"../../utils/jwt";export function MyAccountLink(props){const{label="Go to my account",children,customDomain,...p}=props,{accessToken,endpoint}=useContext(CommerceLayerContext);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyAccountLink` outside of `CommerceLayer`");const{domain,slug}=getDomain(endpoint),disabled=!("owner"in jwt(accessToken)),href=getApplicationLink({slug,accessToken,applicationType:"my-account",domain,customDomain}),parentProps={disabled,label,href,...p};function handleClick(e){disabled&&e.preventDefault()}return children?_jsx(Parent,{...parentProps,children}):_jsx("a",{"aria-disabled":disabled,onClick:handleClick,href,...p,children:label})}export default MyAccountLink;

package/lib/esm/components/customers/MyIdentityLink.d.ts

@@ -30,6 +30,10 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
      * The return url to redirect the user after the login/signup
      */
     returnUrl?: string;
+    /**
+     * The domain of your forked application
+     */
+    customDomain?: string;
 }
 export declare function MyIdentityLink(props: Props): JSX.Element;
 export default MyIdentityLink;

package/lib/esm/components/customers/MyIdentityLink.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import Parent from"../utils/Parent";import CommerceLayerContext from"../../context/CommerceLayerContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";export function MyIdentityLink(props){const{label,children,type,clientId,scope,returnUrl,...p}=props,{accessToken,endpoint}=useContext(CommerceLayerContext);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyIdentityLink` outside of `CommerceLayer`");const{domain,slug}=getDomain(endpoint),href=getApplicationLink({slug,accessToken,applicationType:"identity",domain,modeType:type,clientId,scope,returnUrl:returnUrl??window.location.href}),parentProps={label,href,clientId,scope,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("a",{href,...p,children:label})}export default MyIdentityLink;
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import Parent from"../utils/Parent";import CommerceLayerContext from"../../context/CommerceLayerContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";export function MyIdentityLink(props){const{label,children,type,clientId,scope,returnUrl,customDomain,...p}=props,{accessToken,endpoint}=useContext(CommerceLayerContext);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyIdentityLink` outside of `CommerceLayer`");const{domain,slug}=getDomain(endpoint),href=getApplicationLink({slug,accessToken,applicationType:"identity",domain,modeType:type,clientId,scope,returnUrl:returnUrl??window.location.href,customDomain}),parentProps={label,href,clientId,scope,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("a",{href,...p,children:label})}export default MyIdentityLink;

package/lib/esm/components/line_items/LineItemQuantity.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
+import { type LineItem } from '@commercelayer/sdk';
 interface ChildrenProps extends Omit<Props, 'children'> {
     quantity: number;
     handleChange: (event: React.MouseEvent<HTMLSelectElement>) => void;
+    lineItem?: LineItem;
 }
 type Props = {
     children?: ChildrenFunction<ChildrenProps>;

package/lib/esm/components/line_items/LineItemQuantity.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import LineItemChildrenContext from"../../context/LineItemChildrenContext";import LineItemContext from"../../context/LineItemContext";import Parent from"../utils/Parent";export function LineItemQuantity(props){const{max=50,readonly=!1,...p}=props,{lineItem}=useContext(LineItemChildrenContext),{updateLineItem}=useContext(LineItemContext),options=[];for(let i=1;i<=max;i++)options.push(_jsx("option",{value:`${i}`,children:i},i));const handleChange=e=>{const quantity2=Number(e.target.value);updateLineItem&&lineItem&&updateLineItem(lineItem.id,quantity2)},quantity=lineItem?.quantity,parentProps={handleChange,quantity,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):readonly?_jsx("span",{...p,children:quantity}):_jsx("select",{"data-testid":lineItem?.sku_code,title:lineItem?.name??"",value:quantity,onChange:handleChange,...p,children:options})}export default LineItemQuantity;
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import LineItemChildrenContext from"../../context/LineItemChildrenContext";import LineItemContext from"../../context/LineItemContext";import Parent from"../utils/Parent";export function LineItemQuantity(props){const{max=50,readonly=!1,...p}=props,{lineItem}=useContext(LineItemChildrenContext),{updateLineItem}=useContext(LineItemContext),options=[];for(let i=1;i<=max;i++)options.push(_jsx("option",{value:`${i}`,children:i},i));const handleChange=e=>{const quantity2=Number(e.target.value);updateLineItem&&lineItem&&updateLineItem(lineItem.id,quantity2)},quantity=lineItem?.quantity,parentProps={handleChange,quantity,lineItem,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):readonly?_jsx("span",{...p,children:quantity}):_jsx("select",{"data-testid":lineItem?.sku_code,title:lineItem?.name??"",value:quantity,onChange:handleChange,...p,children:options})}export default LineItemQuantity;

package/lib/esm/components/line_items/LineItemRemoveLink.d.ts

@@ -1,8 +1,10 @@
 import { type PropsWithoutRef } from 'react';
 import { type ChildrenFunction } from '../../typings/index';
+import { type LineItem } from '@commercelayer/sdk';
 interface ChildrenProps extends Omit<Props, 'children'> {
     handleRemove: (event: React.MouseEvent<HTMLAnchorElement>) => void;
     label?: string;
+    lineItem?: LineItem;
 }
 interface Props extends PropsWithoutRef<Omit<JSX.IntrinsicElements['a'], 'children'>> {
     children?: ChildrenFunction<ChildrenProps>;

package/lib/esm/components/line_items/LineItemRemoveLink.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import LineItemChildrenContext from"../../context/LineItemChildrenContext";import LineItemContext from"../../context/LineItemContext";import Parent from"../utils/Parent";import useCustomContext from"../../utils/hooks/useCustomContext";export function LineItemRemoveLink(props){const{label="Remove",onClick}=props,{lineItem}=useCustomContext({context:LineItemChildrenContext,contextComponentName:"LineItem",currentComponentName:"LineItemRemoveLink",key:"lineItem"}),{deleteLineItem}=useContext(LineItemContext),handleRemove=e=>{e.preventDefault(),deleteLineItem!=null&&lineItem!=null&&deleteLineItem(lineItem.id),onClick?.(e)},parentProps={handleRemove,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("a",{"data-testid":`line-item-remove-link-${lineItem?.sku_code??""}`,...props,href:"#",onClick:handleRemove,children:label})}export default LineItemRemoveLink;
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import LineItemChildrenContext from"../../context/LineItemChildrenContext";import LineItemContext from"../../context/LineItemContext";import Parent from"../utils/Parent";import useCustomContext from"../../utils/hooks/useCustomContext";export function LineItemRemoveLink(props){const{label="Remove",onClick}=props,{lineItem}=useCustomContext({context:LineItemChildrenContext,contextComponentName:"LineItem",currentComponentName:"LineItemRemoveLink",key:"lineItem"}),{deleteLineItem}=useContext(LineItemContext),handleRemove=e=>{e.preventDefault(),deleteLineItem!=null&&lineItem!=null&&deleteLineItem(lineItem.id),onClick?.(e)},parentProps={handleRemove,lineItem,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("a",{"data-testid":`line-item-remove-link-${lineItem?.sku_code??""}`,...props,href:"#",onClick:handleRemove,children:label})}export default LineItemRemoveLink;

package/lib/esm/components/orders/CartLink.d.ts

@@ -30,6 +30,10 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
      * The type of the cart. Defaults to undefined. If set to 'mini', the cart will open in a modal.
      */
     type?: 'mini';
+    /**
+     * The domain of your forked application
+     */
+    customDomain?: string;
 }
 export declare function CartLink(props: Props): JSX.Element | null;
 export default CartLink;

package/lib/esm/components/orders/CartLink.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import OrderContext from"../../context/OrderContext";import Parent from"../utils/Parent";import CommerceLayerContext from"../../context/CommerceLayerContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";import{publish}from"../../utils/events";export function CartLink(props){const{label,children,type,...p}=props,{order,createOrder}=useContext(OrderContext),{accessToken,endpoint}=useContext(CommerceLayerContext);if(accessToken==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");if(endpoint==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");const{domain,slug}=getDomain(endpoint),href=slug&&order?.id?getApplicationLink({slug,orderId:order?.id,accessToken,domain,applicationType:"cart"}):"",handleClick=async event=>{if(event.preventDefault(),type!=="mini")if(order?.id)location.href=href;else{const orderId=await createOrder({});slug&&(location.href=getApplicationLink({slug,orderId,accessToken,domain,applicationType:"cart"}))}else publish("open-cart")},parentProps={handleClick,label,href,orderId:order?.id,accessToken,...p};return accessToken?children?_jsx(Parent,{...parentProps,children}):_jsx("a",{href,...p,onClick:e=>{handleClick(e)},children:label}):null}export default CartLink;
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import OrderContext from"../../context/OrderContext";import Parent from"../utils/Parent";import CommerceLayerContext from"../../context/CommerceLayerContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";import{publish}from"../../utils/events";export function CartLink(props){const{label,children,type,customDomain,...p}=props,{order,createOrder}=useContext(OrderContext),{accessToken,endpoint}=useContext(CommerceLayerContext);if(accessToken==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");if(endpoint==null)throw new Error("Cannot use `CartLink` outside of `CommerceLayer`");const{domain,slug}=getDomain(endpoint),href=slug&&order?.id?getApplicationLink({slug,orderId:order?.id,accessToken,domain,applicationType:"cart",customDomain}):"",handleClick=async event=>{if(event.preventDefault(),type!=="mini")if(order?.id)location.href=href;else{const orderId=await createOrder({});slug&&(location.href=getApplicationLink({slug,orderId,accessToken,domain,applicationType:"cart",customDomain}))}else publish("open-cart")},parentProps={handleClick,label,href,orderId:order?.id,accessToken,...p};return accessToken?children?_jsx(Parent,{...parentProps,children}):_jsx("a",{href,...p,onClick:e=>{handleClick(e)},children:label}):null}export default CartLink;

package/lib/esm/components/orders/HostedCart.d.ts

@@ -27,6 +27,10 @@ interface Props extends Omit<JSX.IntrinsicElements['div'], 'children' | 'style'>
      * A function that will be called when the cart is open and the background is clicked.
      */
     handleOpen?: () => void;
+    /**
+     * The domain of your forked application.
+     */
+    customDomain?: string;
 }
-export declare function HostedCart({ type, openAdd, style, open, handleOpen, ...props }: Props): JSX.Element | null;
+export declare function HostedCart({ type, openAdd, style, open, handleOpen, customDomain, ...props }: Props): JSX.Element | null;
 export {};

package/lib/esm/components/orders/HostedCart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import CommerceLayerContext from"../../context/CommerceLayerContext";import OrderContext from"../../context/OrderContext";import OrderStorageContext from"../../context/OrderStorageContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";import useCustomContext from"../../utils/hooks/useCustomContext";import{useContext,useEffect,useState,useRef}from"react";import{iframeResizer}from"iframe-resizer";import{subscribe,unsubscribe}from"../../utils/events";const defaultIframeStyle={width:"1px",minWidth:"100%",minHeight:"100%",border:"none"},defaultContainerStyle={position:"fixed",top:"0",right:"-25rem",height:"100%",width:"23rem",transition:"right 0.5s ease-in-out",zIndex:"0",overflow:"auto"},defaultBackgroundStyle={opacity:"0",position:"fixed",top:"0",left:"0",height:"100%",width:"100vw",transition:"opacity 0.5s ease-in-out",zIndex:"-10",backgroundColor:"black"},defaultIconStyle={width:"1.25rem",height:"1.25rem"},defaultIconContainer={textAlign:"left",paddingLeft:"20px",paddingTop:"20px",background:"#ffffff",color:"#686E6E"},defaultStyle={cart:defaultIframeStyle,container:defaultContainerStyle,background:defaultBackgroundStyle,icon:defaultIconStyle,iconContainer:defaultIconContainer};export function HostedCart({type,openAdd=!1,style,open=!1,handleOpen,...props}){const[isOpen,setOpen]=useState(!1),ref=useRef(null),{accessToken,endpoint}=useCustomContext({context:CommerceLayerContext,contextComponentName:"CommerceLayer",currentComponentName:"HostedCart",key:"accessToken"}),[src,setSrc]=useState();if(accessToken==null||endpoint==null)return null;const{order,createOrder}=useContext(OrderContext),{persistKey}=useContext(OrderStorageContext),{domain,slug}=getDomain(endpoint);async function setOrder(openCart){const orderId=localStorage.getItem(persistKey)??await createOrder({});orderId!=null&&accessToken&&(setSrc(getApplicationLink({slug,orderId,accessToken,domain,applicationType:"cart"})),openCart&&setTimeout(()=>{handleOpen!=null?handleOpen():setOpen(!0)},300))}function onMessage(data){switch(data.message.type){case"update":break;case"close":type==="mini"&&(handleOpen!=null?handleOpen():setOpen(!1));break;case"blur":type==="mini"&&isOpen&&ref.current?.focus();break}}useEffect(()=>{const orderId=localStorage.getItem(persistKey);let ignore=!1;return open!=null&&open!==isOpen&&setOpen(open),openAdd&&type==="mini"&&subscribe("open-cart",()=>{window.document.body.style.overflow="hidden",src==null&&order?.id==null&&orderId==null?setOrder(!0):(src!=null&&ref.current!=null&&(ref.current.src=src),setTimeout(()=>{handleOpen!=null?handleOpen():setOpen(!0)},300))}),src==null&&order?.id==null&&orderId==null&&accessToken!=null&&!ignore&&isOpen?setOrder():src==null&&(order?.id!=null||orderId!=null)&&accessToken&&setSrc(getApplicationLink({slug,orderId:order?.id??orderId,accessToken,domain,applicationType:"cart"})),src!=null&&ref.current!=null&&(ref.current.src=src),()=>{ignore=!0,openAdd&&type==="mini"&&unsubscribe("open-cart",()=>{})}},[src,open,order?.id,accessToken]),useEffect(()=>{ref.current!=null&&iframeResizer({checkOrigin:!1,bodyPadding:"20px",onMessage},ref.current)},[ref.current!=null]);function onCloseCart(){window.document.body.style.removeProperty("overflow"),handleOpen!=null?handleOpen():setOpen(!1)}return src==null?null:type==="mini"?_jsxs(_Fragment,{children:[_jsx("div",{style:{...defaultStyle.background,...style?.background,opacity:isOpen?"0.5":defaultStyle.background?.opacity,zIndex:isOpen?"1":defaultStyle.background?.zIndex},onClick:onCloseCart}),_jsxs("div",{style:{...defaultStyle.container,...style?.container,right:isOpen?"0":defaultStyle.container?.right,zIndex:isOpen?"100":defaultStyle.container?.zIndex},...props,children:[_jsx("div",{style:{...defaultStyle.iconContainer,...style?.iconContainer},children:_jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",style:{...defaultStyle.icon,...style?.icon},onClick:onCloseCart,children:_jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})}),_jsx("iframe",{title:"Cart",ref,style:{...defaultStyle.cart,...style?.cart},src,width:"100%",height:"100%"})]})]}):_jsx("iframe",{title:"Cart",ref,style:{...defaultStyle.cart,...style?.cart},src,width:"100%",height:"100%"})}
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import CommerceLayerContext from"../../context/CommerceLayerContext";import OrderContext from"../../context/OrderContext";import OrderStorageContext from"../../context/OrderStorageContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";import useCustomContext from"../../utils/hooks/useCustomContext";import{useContext,useEffect,useState,useRef}from"react";import{iframeResizer}from"iframe-resizer";import{subscribe,unsubscribe}from"../../utils/events";const defaultIframeStyle={width:"1px",minWidth:"100%",minHeight:"100%",border:"none"},defaultContainerStyle={position:"fixed",top:"0",right:"-25rem",height:"100%",width:"23rem",transition:"right 0.5s ease-in-out",zIndex:"0",overflow:"auto"},defaultBackgroundStyle={opacity:"0",position:"fixed",top:"0",left:"0",height:"100%",width:"100vw",transition:"opacity 0.5s ease-in-out",zIndex:"-10",backgroundColor:"black"},defaultIconStyle={width:"1.25rem",height:"1.25rem"},defaultIconContainer={textAlign:"left",paddingLeft:"20px",paddingTop:"20px",background:"#ffffff",color:"#686E6E"},defaultStyle={cart:defaultIframeStyle,container:defaultContainerStyle,background:defaultBackgroundStyle,icon:defaultIconStyle,iconContainer:defaultIconContainer};export function HostedCart({type,openAdd=!1,style,open=!1,handleOpen,customDomain,...props}){const[isOpen,setOpen]=useState(!1),ref=useRef(null),{accessToken,endpoint}=useCustomContext({context:CommerceLayerContext,contextComponentName:"CommerceLayer",currentComponentName:"HostedCart",key:"accessToken"}),[src,setSrc]=useState();if(accessToken==null||endpoint==null)return null;const{order,createOrder}=useContext(OrderContext),{persistKey}=useContext(OrderStorageContext),{domain,slug}=getDomain(endpoint);async function setOrder(openCart){const orderId=localStorage.getItem(persistKey)??await createOrder({});orderId!=null&&accessToken&&(setSrc(getApplicationLink({slug,orderId,accessToken,domain,applicationType:"cart",customDomain})),openCart&&setTimeout(()=>{handleOpen!=null?handleOpen():setOpen(!0)},300))}function onMessage(data){switch(data.message.type){case"update":break;case"close":type==="mini"&&(handleOpen!=null?handleOpen():setOpen(!1));break;case"blur":type==="mini"&&isOpen&&ref.current?.focus();break}}useEffect(()=>{const orderId=localStorage.getItem(persistKey);let ignore=!1;return open!=null&&open!==isOpen&&setOpen(open),openAdd&&type==="mini"&&subscribe("open-cart",()=>{window.document.body.style.overflow="hidden",src==null&&order?.id==null&&orderId==null?setOrder(!0):(src!=null&&ref.current!=null&&(ref.current.src=src),setTimeout(()=>{handleOpen!=null?handleOpen():setOpen(!0)},300))}),src==null&&order?.id==null&&orderId==null&&accessToken!=null&&!ignore&&isOpen?setOrder():src==null&&(order?.id!=null||orderId!=null)&&accessToken&&setSrc(getApplicationLink({slug,orderId:order?.id??orderId,accessToken,domain,applicationType:"cart"})),src!=null&&ref.current!=null&&(ref.current.src=src),()=>{ignore=!0,openAdd&&type==="mini"&&unsubscribe("open-cart",()=>{})}},[src,open,order?.id,accessToken]),useEffect(()=>{ref.current!=null&&iframeResizer({checkOrigin:!1,bodyPadding:"20px",onMessage},ref.current)},[ref.current!=null]);function onCloseCart(){window.document.body.style.removeProperty("overflow"),handleOpen!=null?handleOpen():setOpen(!1)}return src==null?null:type==="mini"?_jsxs(_Fragment,{children:[_jsx("div",{style:{...defaultStyle.background,...style?.background,opacity:isOpen?"0.5":defaultStyle.background?.opacity,zIndex:isOpen?"1":defaultStyle.background?.zIndex},onClick:onCloseCart}),_jsxs("div",{style:{...defaultStyle.container,...style?.container,right:isOpen?"0":defaultStyle.container?.right,zIndex:isOpen?"100":defaultStyle.container?.zIndex},...props,children:[_jsx("div",{style:{...defaultStyle.iconContainer,...style?.iconContainer},children:_jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",style:{...defaultStyle.icon,...style?.icon},onClick:onCloseCart,children:_jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})}),_jsx("iframe",{title:"Cart",ref,style:{...defaultStyle.cart,...style?.cart},src,width:"100%",height:"100%"})]})]}):_jsx("iframe",{title:"Cart",ref,style:{...defaultStyle.cart,...style?.cart},src,width:"100%",height:"100%"})}

package/lib/esm/components/prices/PricesContainer.d.ts

@@ -1,10 +1,39 @@
 import { type LoaderType } from '../../typings/index';
 interface Props {
+    /**
+     * Any valid JSX.Element(s).
+     * A single `<Price>` component or a list of them is expected to render the prices.
+     */
     children: JSX.Element | JSX.Element[];
+    /**
+     * SDK query filter to fetch the prices when multiple prices are requested.
+     */
     filters?: object;
+    /**
+     * Loader component or string to be rendered while the prices are being fetched.
+     * @default 'Loading...'
+     */
     loader?: LoaderType;
+    /**
+     * Prices per page to be fetched
+     */
     perPage?: number;
+    /**
+     * SKU code to fetch the prices for. If not provided, the `sku_code` will be retrieved from the `<Price>` component(s) nested as children.
+     */
     skuCode?: string;
 }
+/**
+ * Main container for the Prices components. It stores the prices context.
+ *
+ * It can be used to fetch the prices for a specific `sku_code` passed as prop
+ * or for the `sku_code` retrieved from all `<Price>` components nested as children.
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<CommerceLayer>` component.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<Price>`
+ * </span>
+ */
 export declare function PricesContainer(props: Props): JSX.Element;
 export default PricesContainer;

package/lib/esm/hooks/useOrderContainer.d.ts

@@ -1,7 +1,7 @@
 import { type createOrder, type OrderState, type addToCart } from '../reducers/OrderReducer';
 type TAddToCartParams = Omit<Parameters<typeof addToCart>[number], 'buyNowMode' | 'state' | 'dispatch' | 'setLocalOrder' | 'errors' | 'checkoutUrl' | 'persistKey' | 'config'>;
 type TCreateCartParams = Pick<Parameters<typeof createOrder>[number], 'orderAttributes' | 'orderMetadata'>;
-interface TReturnOrder extends Omit<OrderState, 'loading' | 'include' | 'includeLoaded' | 'withoutIncludes'> {
+interface TReturnOrder extends Omit<OrderState, 'loading' | 'include' | 'includeLoaded' | 'withoutIncludes' | 'orderId'> {
     reloadOrder: () => Promise<OrderState['order']>;
     addToCart: (params: TAddToCartParams) => ReturnType<typeof addToCart>;
     createOrder: (params: TCreateCartParams) => Promise<string | undefined>;

package/lib/esm/utils/getApplicationLink.d.ts

@@ -25,7 +25,8 @@ interface TArgs {
     accessToken: string;
     slug: string;
     domain: string;
+    customDomain?: string;
 }
 type Props = ApplicationTypeProps & TArgs;
-export declare function getApplicationLink({ orderId, accessToken, slug, domain, applicationType, modeType, clientId, scope, returnUrl }: Props): string;
+export declare function getApplicationLink({ orderId, accessToken, slug, domain, applicationType, modeType, clientId, scope, returnUrl, customDomain }: Props): string;
 export {};

package/lib/esm/utils/getApplicationLink.js

@@ -1,2 +1,2 @@
 "use client";
-export function getApplicationLink({orderId,accessToken,slug,domain,applicationType,modeType,clientId,scope,returnUrl}){const env=domain==="commercelayer.io"?"":"stg.",t=modeType==="login"?"":"signup",c=clientId?`&clientId=${clientId}`:"",s=scope?`&scope=${scope}`:"",r=returnUrl?`&returnUrl=${returnUrl}`:"",params=applicationType==="identity"?`${c}${s}${r}`:"";return`https://${slug}.${env}commercelayer.app/${applicationType.toString()}/${orderId??t??""}?accessToken=${accessToken}${params}`}
+export function getApplicationLink({orderId,accessToken,slug,domain,applicationType,modeType,clientId,scope,returnUrl,customDomain}){const env=domain==="commercelayer.io"?"":"stg.",t=applicationType==="identity"?modeType==="login"?"":"signup":"",c=clientId?`&clientId=${clientId}`:"",s=scope?`&scope=${scope}`:"",r=returnUrl?`&returnUrl=${returnUrl}`:"",params=applicationType==="identity"?`${c}${s}${r}`:"",domainName=customDomain??`${slug}.${env}commercelayer.app`,application=customDomain?"":`/${applicationType.toString()}`;return`https://${domainName}${application}/${orderId??t??""}?accessToken=${accessToken}${params}`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.6.0-beta.1",
+  "version": "4.7.0",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",