@commercelayer/react-components 4.5.0-beta.11 → 4.5.0-beta.12

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

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

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

@@ -13,7 +13,7 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
     /**
      * The label of the link
      */
-    label: string;
+    label: string | JSX.Element;
     /**
      * The type of the link
      */

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"},defaultBackgroundStyle={opacity:"0",position:"fixed",top:"0",left:"0",height:"100%",width:"100vw",transition:"opacity 0.5s ease-in-out",zIndex:"-10",backgroundColor:"black"},defaultStyle={cart:defaultIframeStyle,container:defaultContainerStyle,background:defaultBackgroundStyle};function HostedCart(_a){var _b,_c,_d,_e,{type,openAdd=!1,style=defaultStyle,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!=null&&(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}}return(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",()=>{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!=null&&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!=null]),(0,react_1.useEffect)(()=>{ref.current!=null&&(0,iframe_resizer_1.iframeResizer)({checkOrigin:!1,bodyPadding:"20px",onMessage},ref.current)},[ref.current!=null]),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({},style.background),{opacity:isOpen?"0.5":(_b=style.background)===null||_b===void 0?void 0:_b.opacity,zIndex:isOpen?"1":(_c=style.background)===null||_c===void 0?void 0:_c.zIndex}),onClick:()=>{handleOpen!=null?handleOpen():setOpen(!1)}}),(0,jsx_runtime_1.jsx)("div",Object.assign({style:Object.assign(Object.assign({},style.container),{right:isOpen?"0":(_d=style.container)===null||_d===void 0?void 0:_d.right,zIndex:isOpen?"10":(_e=style.container)===null||_e===void 0?void 0:_e.zIndex})},props,{children:(0,jsx_runtime_1.jsx)("iframe",{title:"Cart",ref,style:style.cart,src,width:"100%",height:"100%"})}))]}):(0,jsx_runtime_1.jsx)("iframe",{title:"Cart",ref,style: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"},defaultBackgroundStyle={opacity:"0",position:"fixed",top:"0",left:"0",height:"100%",width:"100vw",transition:"opacity 0.5s ease-in-out",zIndex:"-10",backgroundColor:"black"},defaultStyle={cart:defaultIframeStyle,container:defaultContainerStyle,background:defaultBackgroundStyle};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}}return(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",()=>{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]),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:()=>{handleOpen!=null?handleOpen():setOpen(!1)}}),(0,jsx_runtime_1.jsx)("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)("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/esm/components/customers/MyAccountLink.d.ts

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

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

@@ -13,7 +13,7 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
     /**
      * The label of the link
      */
-    label: string;
+    label: string | JSX.Element;
     /**
      * The type of the link
      */

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

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}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"},defaultBackgroundStyle={opacity:"0",position:"fixed",top:"0",left:"0",height:"100%",width:"100vw",transition:"opacity 0.5s ease-in-out",zIndex:"-10",backgroundColor:"black"},defaultStyle={cart:defaultIframeStyle,container:defaultContainerStyle,background:defaultBackgroundStyle};export function HostedCart({type,openAdd=!1,style=defaultStyle,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!=null&&(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}}return useEffect(()=>{const orderId=localStorage.getItem(persistKey);let ignore=!1;return open!=null&&open!==isOpen&&setOpen(open),openAdd&&type==="mini"&&subscribe("open-cart",()=>{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!=null&&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!=null]),useEffect(()=>{ref.current!=null&&iframeResizer({checkOrigin:!1,bodyPadding:"20px",onMessage},ref.current)},[ref.current!=null]),src==null?null:type==="mini"?_jsxs(_Fragment,{children:[_jsx("div",{style:{...style.background,opacity:isOpen?"0.5":style.background?.opacity,zIndex:isOpen?"1":style.background?.zIndex},onClick:()=>{handleOpen!=null?handleOpen():setOpen(!1)}}),_jsx("div",{style:{...style.container,right:isOpen?"0":style.container?.right,zIndex:isOpen?"10":style.container?.zIndex},...props,children:_jsx("iframe",{title:"Cart",ref,style:style.cart,src,width:"100%",height:"100%"})})]}):_jsx("iframe",{title:"Cart",ref,style:style.cart,src,width:"100%",height:"100%"})}
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}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"},defaultBackgroundStyle={opacity:"0",position:"fixed",top:"0",left:"0",height:"100%",width:"100vw",transition:"opacity 0.5s ease-in-out",zIndex:"-10",backgroundColor:"black"},defaultStyle={cart:defaultIframeStyle,container:defaultContainerStyle,background:defaultBackgroundStyle};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}}return useEffect(()=>{const orderId=localStorage.getItem(persistKey);let ignore=!1;return open!=null&&open!==isOpen&&setOpen(open),openAdd&&type==="mini"&&subscribe("open-cart",()=>{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]),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:()=>{handleOpen!=null?handleOpen():setOpen(!1)}}),_jsx("div",{style:{...defaultStyle.container,...style?.container,right:isOpen?"0":defaultStyle.container?.right,zIndex:isOpen?"100":defaultStyle.container?.zIndex},...props,children:_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/package.json

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