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

package/lib/cjs/components/auth/CommerceLayer.d.ts

@@ -1,8 +1,24 @@
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props {
+    /**
+     * Accept a React node as children.
+     */
     children: DefaultChildrenType;
+    /**
+     * The access token to authenticate the API calls.
+     */
     accessToken: string;
-    endpoint: string;
+    /**
+     * The endpoint to make the API calls. e.g. https://yourdomain.commercelayer.io
+     */
+    endpoint?: string;
+    /**
+     * The domain to make the API calls. e.g. commercelayer.io
+     */
+    domain?: string;
 }
+/**
+ * CommerceLayer component
+ */
 export declare function CommerceLayer(props: Props): JSX.Element;
 export default CommerceLayer;

package/lib/cjs/components/auth/CommerceLayer.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CommerceLayer=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),ErrorBoundary_1=tslib_1.__importDefault(require("../utils/ErrorBoundary"));function CommerceLayer(props){const{children}=props,p=tslib_1.__rest(props,["children"]);return(0,jsx_runtime_1.jsx)(ErrorBoundary_1.default,{children:(0,jsx_runtime_1.jsx)(CommerceLayerContext_1.default.Provider,{value:Object.assign({},p),children})})}exports.CommerceLayer=CommerceLayer,exports.default=CommerceLayer;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CommerceLayer=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),ErrorBoundary_1=tslib_1.__importDefault(require("../utils/ErrorBoundary")),jwt_1=tslib_1.__importDefault(require("../../utils/jwt"));function CommerceLayer(props){var _a;const{children}=props,p=tslib_1.__rest(props,["children"]);if(!p.endpoint){const{organization}=(0,jwt_1.default)(p.accessToken);p.endpoint=`https://${organization.slug}.${(_a=p.domain)!==null&&_a!==void 0?_a:"commercelayer.io"}`}return(0,jsx_runtime_1.jsx)(ErrorBoundary_1.default,{children:(0,jsx_runtime_1.jsx)(CommerceLayerContext_1.default.Provider,{value:Object.assign({},p),children})})}exports.CommerceLayer=CommerceLayer,exports.default=CommerceLayer;

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

@@ -7,9 +7,28 @@ interface PriceChildrenProps extends Omit<PriceProps, 'children'> {
 }
 export interface PriceProps extends Omit<JSX.IntrinsicElements['span'], 'children'> {
     children?: ChildrenFunction<PriceChildrenProps>;
+    /**
+     * CSS class name to be added for the compare price
+     */
     compareClassName?: string;
+    /**
+     * When `false` the compare_at price will not be displayed
+     * @default true
+     */
     showCompare?: boolean;
+    /**
+     * The `sku_code` of the price to be fetched
+     */
     skuCode?: string | null;
 }
+/**
+ * To display the price of your products with localized currency, discounts, and personalization rules, as shown in the code snippets below.
+ *
+ * Each price has an amount (the actual selling price) and an optional compare-at amount (the full price that you want to display to the customer — typically with a strikethrough).
+ * This component is the owner of the price information. It fetches the price of the specified SKU and dispatches it to the cl-price-amount children.
+ * <span type='info'>
+ * By default it shows the `formatted_amount` and `formatted_compare_at_amount` of the first price object, but it also allows to access to the full `Price`object via children props.
+ * </span>
+ */
 export declare function Price(props: PriceProps): JSX.Element;
 export default Price;

package/lib/esm/components/auth/CommerceLayer.d.ts

@@ -1,8 +1,24 @@
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props {
+    /**
+     * Accept a React node as children.
+     */
     children: DefaultChildrenType;
+    /**
+     * The access token to authenticate the API calls.
+     */
     accessToken: string;
-    endpoint: string;
+    /**
+     * The endpoint to make the API calls. e.g. https://yourdomain.commercelayer.io
+     */
+    endpoint?: string;
+    /**
+     * The domain to make the API calls. e.g. commercelayer.io
+     */
+    domain?: string;
 }
+/**
+ * CommerceLayer component
+ */
 export declare function CommerceLayer(props: Props): JSX.Element;
 export default CommerceLayer;

package/lib/esm/components/auth/CommerceLayer.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx}from"react/jsx-runtime";import CommerceLayerContext from"../../context/CommerceLayerContext";import ErrorBoundary from"../utils/ErrorBoundary";export function CommerceLayer(props){const{children,...p}=props;return _jsx(ErrorBoundary,{children:_jsx(CommerceLayerContext.Provider,{value:{...p},children})})}export default CommerceLayer;
+import{jsx as _jsx}from"react/jsx-runtime";import CommerceLayerContext from"../../context/CommerceLayerContext";import ErrorBoundary from"../utils/ErrorBoundary";import jwt from"../../utils/jwt";export function CommerceLayer(props){const{children,...p}=props;if(!p.endpoint){const{organization}=jwt(p.accessToken);p.endpoint=`https://${organization.slug}.${p.domain??"commercelayer.io"}`}return _jsx(ErrorBoundary,{children:_jsx(CommerceLayerContext.Provider,{value:{...p},children})})}export default CommerceLayer;

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

@@ -7,9 +7,28 @@ interface PriceChildrenProps extends Omit<PriceProps, 'children'> {
 }
 export interface PriceProps extends Omit<JSX.IntrinsicElements['span'], 'children'> {
     children?: ChildrenFunction<PriceChildrenProps>;
+    /**
+     * CSS class name to be added for the compare price
+     */
     compareClassName?: string;
+    /**
+     * When `false` the compare_at price will not be displayed
+     * @default true
+     */
     showCompare?: boolean;
+    /**
+     * The `sku_code` of the price to be fetched
+     */
     skuCode?: string | null;
 }
+/**
+ * To display the price of your products with localized currency, discounts, and personalization rules, as shown in the code snippets below.
+ *
+ * Each price has an amount (the actual selling price) and an optional compare-at amount (the full price that you want to display to the customer — typically with a strikethrough).
+ * This component is the owner of the price information. It fetches the price of the specified SKU and dispatches it to the cl-price-amount children.
+ * <span type='info'>
+ * By default it shows the `formatted_amount` and `formatted_compare_at_amount` of the first price object, but it also allows to access to the full `Price`object via children props.
+ * </span>
+ */
 export declare function Price(props: PriceProps): JSX.Element;
 export default Price;

package/package.json

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