@commercelayer/react-components 2.53.2 → 3.0.0-alpha.2

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 Commerce Layer SRL
+Copyright (c) 2020 Commerce Layer Inc.
 https://commercelayer.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -19,4 +19,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

package/README.md

@@ -65,7 +65,7 @@ The code snippets below show how to put into action Commerce Layer React Compone
 - [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-js-sdk) — feel free to use it if you want to develop your custom ones.
+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
 
@@ -105,7 +105,7 @@ import {
 
 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 [API reference](https://docs.commercelayer.io/api/pagination) or our [SDK documentation](https://github.com/commercelayer/commercelayer-js-sdk#how-to-paginate-a-collection-of-skus).
+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
 
@@ -186,7 +186,7 @@ When you add a product to your shopping cart:
 
 > 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/api/resources/orders/create_order) attributes at the moment of the order creation, pass to the optional prop `attributes` to the `OrderContainer` component.
+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
 

package/lib/cjs/components/AdjustmentAmount.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),BaseOrderPrice_1=(0,tslib_1.__importDefault)(require("./utils/BaseOrderPrice")),components_1=(0,tslib_1.__importDefault)(require("../config/components")),propTypes=components_1.default.AdjustmentAmount.propTypes,defaultProps=components_1.default.AdjustmentAmount.defaultProps,displayName=components_1.default.AdjustmentAmount.displayName,AdjustmentAmount=props=>(0,jsx_runtime_1.jsx)(BaseOrderPrice_1.default,Object.assign({base:"amount",type:"adjustment"},props),void 0);AdjustmentAmount.propTypes=propTypes,AdjustmentAmount.defaultProps=defaultProps,AdjustmentAmount.displayName=displayName,exports.default=AdjustmentAmount;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),BaseOrderPrice_1=tslib_1.__importDefault(require("./utils/BaseOrderPrice")),components_1=tslib_1.__importDefault(require("../config/components")),propTypes=components_1.default.AdjustmentAmount.propTypes,defaultProps=components_1.default.AdjustmentAmount.defaultProps,displayName=components_1.default.AdjustmentAmount.displayName,AdjustmentAmount=props=>(0,jsx_runtime_1.jsx)(BaseOrderPrice_1.default,{base:"amount",type:"adjustment",...props});AdjustmentAmount.propTypes=propTypes,AdjustmentAmount.defaultProps=defaultProps,AdjustmentAmount.displayName=displayName,exports.default=AdjustmentAmount;

package/lib/cjs/components/AdyenPayment.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FunctionComponent } from 'react';
+import { CSSProperties } from 'react';
 import { PaymentSourceProps } from './PaymentSource';
 declare type Styles = Partial<{
     base: CSSProperties;
@@ -14,12 +14,12 @@ export declare type AdyenPaymentConfig = {
     }) => void;
     styles?: Styles;
 };
-declare type AdyenPaymentProps = {
+declare type Props = {
     clientKey?: string;
     config?: AdyenPaymentConfig;
     templateCustomerSaveToWallet?: PaymentSourceProps['templateCustomerSaveToWallet'];
     locale?: string;
     environment?: string;
 };
-declare const AdyenPayment: FunctionComponent<AdyenPaymentProps>;
+export declare function AdyenPayment({ clientKey, config, templateCustomerSaveToWallet, environment, locale, }: Props): JSX.Element | null;
 export default AdyenPayment;

package/lib/cjs/components/AdyenPayment.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodContext_1=(0,tslib_1.__importDefault)(require("../context/PaymentMethodContext")),isEmpty_1=(0,tslib_1.__importDefault)(require("lodash/isEmpty")),localStorage_1=require("../utils/localStorage"),Parent_1=(0,tslib_1.__importDefault)(require("./utils/Parent")),browserInfo_1=(0,tslib_1.__importDefault)(require("../utils/browserInfo")),PlaceOrderContext_1=(0,tslib_1.__importDefault)(require("../context/PlaceOrderContext")),threeDSConfiguration={challengeWindowSize:"05"},defaultConfig={},AdyenPayment=({clientKey,config,templateCustomerSaveToWallet,environment="test",locale="en_US"})=>{const{cardContainerClassName,threeDSecureContainerClassName,placeOrderCallback,styles}=Object.assign(Object.assign({},defaultConfig),config),[loadAdyen,setLoadAdyen]=(0,react_1.useState)(!1),[checkout,setCheckout]=(0,react_1.useState)({}),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),{setPlaceOrder}=(0,react_1.useContext)(PlaceOrderContext_1.default),ref=(0,react_1.useRef)(null),handleSubmit=async(e,checkout2)=>{var _a,_b,_c,_d,_e,_f,_g;const savePaymentSourceToCustomerWallet=(_b=(_a=e==null?void 0:e.elements)===null||_a===void 0?void 0:_a.save_payment_source_to_customer_wallet)===null||_b===void 0?void 0:_b.checked;savePaymentSourceToCustomerWallet&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet);const attributes={_authorize:1};try{const pSource=paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes}),adyenAction=(_c=pSource==null?void 0:pSource.payment_response)===null||_c===void 0?void 0:_c.action,resultCode=(_d=pSource==null?void 0:pSource.payment_response)===null||_d===void 0?void 0:_d.resultCode;if(adyenAction&&["IdentifyShopper","RedirectShopper"].includes(resultCode))checkout2.createFromAction(adyenAction,threeDSConfiguration).mount("#adyen-action");else if(["Authorised","Pending","Received"].includes(resultCode)){const brand=(_f=(_e=pSource==null?void 0:pSource.payment_request_data)===null||_e===void 0?void 0:_e.payment_method)===null||_f===void 0?void 0:_f.brand;if(brand){const attributes2={metadata:{card:{brand}}};await setPaymentSource({paymentSourceId:pSource==null?void 0:pSource.id,paymentResource:"adyen_payments",attributes:attributes2})}return!0}const message=(_g=pSource==null?void 0:pSource.payment_response)===null||_g===void 0?void 0:_g.refusalReason;return setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}]),!1}catch(error){return setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}},handleChange=async(state,_component,config2,paySource)=>{if(state.isValid){if(ref.current){const adyenCheckout=await require("@adyen/adyen-web")(config2);ref.current.onsubmit=()=>handleSubmit(ref.current,adyenCheckout),setPaymentRef({ref})}let browserInfo=(0,browserInfo_1.default)();const attributes={payment_request_data:{payment_method:state.data.paymentMethod,shopperInteraction:"Ecommerce",recurringProcessingModel:"CardOnFile",origin:window.location.origin,return_url:window.location.href,redirect_from_issuer_method:"GET",browser_info:Object.assign({acceptHeader:"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"},browserInfo)}};paySource&&await setPaymentSource({paymentSourceId:paySource.id,paymentResource:"adyen_payments",attributes})}},handleOnAdditionalDetails=async(state,_component,config2)=>{var _a,_b;const attributes={payment_request_details:state.data,_details:1};try{const pSource=paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes}),adyenAction=(_a=pSource==null?void 0:pSource.payment_response)===null||_a===void 0?void 0:_a.action,resultCode=(_b=pSource==null?void 0:pSource.payment_response)===null||_b===void 0?void 0:_b.resultCode,AdyenCheckout=require("@adyen/adyen-web");if(adyenAction&&(await AdyenCheckout(config2)).createFromAction(adyenAction,threeDSConfiguration).mount("#adyen-action"),["Authorised","Pending","Received"].includes(resultCode)){const{placed}=setPlaceOrder&&await setPlaceOrder({paymentSource:pSource})||{placed:!1};placed&&placeOrderCallback&&placeOrderCallback({placed})}}catch(error){console.error("Adyen additional details error:",error)}};return(0,react_1.useEffect)(()=>{const paymentMethodsResponse=(0,isEmpty_1.default)(paymentSource==null?void 0:paymentSource.payment_methods)?{}:paymentSource==null?void 0:paymentSource.payment_methods;(0,isEmpty_1.default)(paymentMethodsResponse)&&console.error("Payment methods are not available. Please, check your Adyen configuration.");const options={locale,environment,clientKey,paymentMethodsResponse};return options.onChange=(s,c)=>handleChange(s,c,options,paymentSource),options.onAdditionalDetails=(s,c)=>handleOnAdditionalDetails(s,c,options),!ref&&clientKey&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet","false"),clientKey&&!loadAdyen&&!(0,isEmpty_1.default)(window)&&require("@adyen/adyen-web")(options).then(adyenCheckout=>{adyenCheckout.create("card",{styles}).mount("#adyen-card")&&(setCheckout(adyenCheckout),setLoadAdyen(!0))}),()=>{setPaymentRef({ref:{current:null}}),setLoadAdyen(!1)}},[clientKey,ref]),!clientKey&&!loadAdyen&&!checkout?null:(0,jsx_runtime_1.jsxs)("form",Object.assign({ref,onSubmit:e=>handleSubmit(e,checkout)},{children:[(0,jsx_runtime_1.jsx)("div",{className:cardContainerClassName,id:"adyen-card"},void 0),templateCustomerSaveToWallet&&(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},{name:"save_payment_source_to_customer_wallet"},{children:templateCustomerSaveToWallet}),void 0),(0,jsx_runtime_1.jsx)("div",{className:threeDSecureContainerClassName,id:"adyen-action"},void 0)]}),void 0)};exports.default=AdyenPayment;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AdyenPayment=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodContext_1=tslib_1.__importDefault(require("../context/PaymentMethodContext")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),localStorage_1=require("../utils/localStorage"),Parent_1=tslib_1.__importDefault(require("./utils/Parent")),browserInfo_1=tslib_1.__importDefault(require("../utils/browserInfo")),PlaceOrderContext_1=tslib_1.__importDefault(require("../context/PlaceOrderContext")),threeDSConfiguration={challengeWindowSize:"05"},defaultConfig={};function AdyenPayment({clientKey,config,templateCustomerSaveToWallet,environment="test",locale="en_US"}){const{cardContainerClassName,threeDSecureContainerClassName,placeOrderCallback,styles}={...defaultConfig,...config},[loadAdyen,setLoadAdyen]=(0,react_1.useState)(!1),[checkout,setCheckout]=(0,react_1.useState)({}),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),{setPlaceOrder}=(0,react_1.useContext)(PlaceOrderContext_1.default),ref=(0,react_1.useRef)(null),handleSubmit=async(e,checkout2)=>{const savePaymentSourceToCustomerWallet=e?.elements?.save_payment_source_to_customer_wallet?.checked;savePaymentSourceToCustomerWallet&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet);const attributes={_authorize:1};try{const pSource=paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes}),adyenAction=pSource?.payment_response?.action,resultCode=pSource?.payment_response?.resultCode;if(adyenAction&&["IdentifyShopper","RedirectShopper"].includes(resultCode))checkout2.createFromAction(adyenAction,threeDSConfiguration).mount("#adyen-action");else if(["Authorised","Pending","Received"].includes(resultCode)){const brand=pSource?.payment_request_data?.payment_method?.brand;if(brand){const attributes2={metadata:{card:{brand}}};await setPaymentSource({paymentSourceId:pSource?.id,paymentResource:"adyen_payments",attributes:attributes2})}return!0}const message=pSource?.payment_response?.refusalReason;return setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}]),!1}catch(error){return setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}},handleChange=async(state,_component,config2,paySource)=>{if(state.isValid){if(ref.current){const adyenCheckout=await require("@adyen/adyen-web")(config2);ref.current.onsubmit=()=>handleSubmit(ref.current,adyenCheckout),setPaymentRef({ref})}const browserInfo=(0,browserInfo_1.default)(),attributes={payment_request_data:{payment_method:state.data.paymentMethod,shopperInteraction:"Ecommerce",recurringProcessingModel:"CardOnFile",origin:window.location.origin,return_url:window.location.href,redirect_from_issuer_method:"GET",browser_info:{acceptHeader:"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",...browserInfo}}};paySource&&await setPaymentSource({paymentSourceId:paySource.id,paymentResource:"adyen_payments",attributes})}},handleOnAdditionalDetails=async(state,_component,config2)=>{const attributes={payment_request_details:state.data,_details:1};try{const pSource=paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes}),adyenAction=pSource?.payment_response?.action,resultCode=pSource?.payment_response?.resultCode,AdyenCheckout=require("@adyen/adyen-web");if(adyenAction&&(await AdyenCheckout(config2)).createFromAction(adyenAction,threeDSConfiguration).mount("#adyen-action"),["Authorised","Pending","Received"].includes(resultCode)){const{placed}=setPlaceOrder&&await setPlaceOrder({paymentSource:pSource})||{placed:!1};placed&&placeOrderCallback&&placeOrderCallback({placed})}}catch(error){console.error("Adyen additional details error:",error)}};return(0,react_1.useEffect)(()=>{const paymentMethodsResponse=(0,isEmpty_1.default)(paymentSource?.payment_methods)?{}:paymentSource?.payment_methods;(0,isEmpty_1.default)(paymentMethodsResponse)&&console.error("Payment methods are not available. Please, check your Adyen configuration.");const options={locale,environment,clientKey,paymentMethodsResponse};return options.onChange=(s,c)=>handleChange(s,c,options,paymentSource),options.onAdditionalDetails=(s,c)=>handleOnAdditionalDetails(s,c,options),!ref&&clientKey&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet","false"),clientKey&&!loadAdyen&&!(0,isEmpty_1.default)(window)&&require("@adyen/adyen-web")(options).then(adyenCheckout=>{adyenCheckout.create("card",{styles}).mount("#adyen-card")&&(setCheckout(adyenCheckout),setLoadAdyen(!0))}),()=>{setPaymentRef({ref:{current:null}}),setLoadAdyen(!1)}},[clientKey,ref]),!clientKey&&!loadAdyen&&!checkout?null:(0,jsx_runtime_1.jsxs)("form",{ref,onSubmit:e=>handleSubmit(e,checkout),children:[(0,jsx_runtime_1.jsx)("div",{className:cardContainerClassName,id:"adyen-card"}),templateCustomerSaveToWallet&&(0,jsx_runtime_1.jsx)(Parent_1.default,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet}),(0,jsx_runtime_1.jsx)("div",{className:threeDSecureContainerClassName,id:"adyen-action"})]})}exports.AdyenPayment=AdyenPayment,exports.default=AdyenPayment;

package/lib/cjs/components/AvailabilityContainer.d.ts

@@ -1,7 +1,14 @@
-import { FunctionComponent, ReactNode } from 'react';
-declare type AvailabilityContainerProps = {
+import { ReactNode } from 'react';
+declare type Props = {
     children: ReactNode;
     skuCode?: string;
 };
-declare const AvailabilityContainer: FunctionComponent<AvailabilityContainerProps>;
+export declare function AvailabilityContainer(props: Props): JSX.Element;
+export declare namespace AvailabilityContainer {
+    var propTypes: {
+        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        skuCode: import("prop-types").Requireable<string>;
+    };
+    var displayName: string;
+}
 export default AvailabilityContainer;

package/lib/cjs/components/AvailabilityContainer.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),AvailabilityReducer_1=(0,tslib_1.__importStar)(require("../reducers/AvailabilityReducer")),AvailabilityContext_1=(0,tslib_1.__importDefault)(require("../context/AvailabilityContext")),lodash_1=require("lodash"),ItemContext_1=(0,tslib_1.__importDefault)(require("../context/ItemContext")),getCurrentItemKey_1=(0,tslib_1.__importDefault)(require("../utils/getCurrentItemKey")),components_1=(0,tslib_1.__importDefault)(require("../config/components")),CommerceLayerContext_1=(0,tslib_1.__importDefault)(require("../context/CommerceLayerContext")),LineItemChildrenContext_1=(0,tslib_1.__importDefault)(require("../context/LineItemChildrenContext")),propTypes=components_1.default.AvailabilityContainer.propTypes,displayName=components_1.default.AvailabilityContainer.displayName,AvailabilityContainer=props=>{const{children,skuCode}=props,{item,skuCode:itemSkuCode,setItem}=(0,react_1.useContext)(ItemContext_1.default),{lineItem}=(0,react_1.useContext)(LineItemChildrenContext_1.default),config=(0,react_1.useContext)(CommerceLayerContext_1.default),[state,dispatch]=(0,react_1.useReducer)(AvailabilityReducer_1.default,AvailabilityReducer_1.availabilityInitialState),sCode=skuCode||(0,getCurrentItemKey_1.default)(item)||itemSkuCode||(lineItem==null?void 0:lineItem.sku_code);return(0,react_1.useEffect)(()=>{var _a,_b,_c,_d,_e,_f,_g;if(sCode){const available=(_b=(_a=item[sCode])===null||_a===void 0?void 0:_a.inventory)===null||_b===void 0?void 0:_b.available,quantity=(_d=(_c=item[sCode])===null||_c===void 0?void 0:_c.inventory)===null||_d===void 0?void 0:_d.quantity,[level]=((_f=(_e=item[sCode])===null||_e===void 0?void 0:_e.inventory)===null||_f===void 0?void 0:_f.levels)||[{quantity:null,delivery_lead_times:[]}];if(!(0,lodash_1.isEmpty)(level)&&((_g=level==null?void 0:level.delivery_lead_times)===null||_g===void 0?void 0:_g.length)>0){const[delivery]=level==null?void 0:level.delivery_lead_times;dispatch({type:"setAvailability",payload:Object.assign(Object.assign({},delivery),{quantity:level==null?void 0:level.quantity})})}else config.accessToken&&!(item==null?void 0:item[sCode])?(0,AvailabilityReducer_1.getAvailability)({skuCode:sCode,config,dispatch,setItem}):available||dispatch({type:"setAvailability",payload:{quantity}})}return()=>{dispatch({type:"setAvailability",payload:{}})}},[config.accessToken,item,sCode]),(0,jsx_runtime_1.jsx)(AvailabilityContext_1.default.Provider,Object.assign({value:Object.assign({},state)},{children}),void 0)};AvailabilityContainer.propTypes=propTypes,AvailabilityContainer.displayName=displayName,exports.default=AvailabilityContainer;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AvailabilityContainer=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),AvailabilityReducer_1=tslib_1.__importStar(require("../reducers/AvailabilityReducer")),AvailabilityContext_1=tslib_1.__importDefault(require("../context/AvailabilityContext")),ItemContext_1=tslib_1.__importDefault(require("../context/ItemContext")),getCurrentItemKey_1=tslib_1.__importDefault(require("../utils/getCurrentItemKey")),components_1=tslib_1.__importDefault(require("../config/components")),CommerceLayerContext_1=tslib_1.__importDefault(require("../context/CommerceLayerContext")),LineItemChildrenContext_1=tslib_1.__importDefault(require("../context/LineItemChildrenContext")),SkuChildrenContext_1=tslib_1.__importDefault(require("../context/SkuChildrenContext")),SkuContext_1=tslib_1.__importDefault(require("../context/SkuContext")),isEqual_1=tslib_1.__importDefault(require("lodash/isEqual")),propTypes=components_1.default.AvailabilityContainer.propTypes,displayName=components_1.default.AvailabilityContainer.displayName;function AvailabilityContainer(props){const{children,skuCode}=props,{item,skuCode:itemSkuCode,setItem}=(0,react_1.useContext)(ItemContext_1.default),{lineItem}=(0,react_1.useContext)(LineItemChildrenContext_1.default),{sku}=(0,react_1.useContext)(SkuChildrenContext_1.default),{skus}=(0,react_1.useContext)(SkuContext_1.default),config=(0,react_1.useContext)(CommerceLayerContext_1.default),[state,dispatch]=(0,react_1.useReducer)(AvailabilityReducer_1.default,AvailabilityReducer_1.availabilityInitialState),sCode=skuCode||(0,getCurrentItemKey_1.default)(item)||itemSkuCode||lineItem?.sku_code||sku?.code;return(0,react_1.useEffect)(()=>{if(sCode&&!skus){const available=item[sCode]?.inventory?.available,quantity=item[sCode]?.inventory?.quantity,[level]=item[sCode]?.inventory?.levels||[{quantity:null,delivery_lead_times:[]}];if(level!==void 0&&level?.delivery_lead_times?.length>0){const[delivery]=level.delivery_lead_times;dispatch({type:"setAvailability",payload:{...delivery,quantity:level?.quantity}})}else config.accessToken&&!item?.[sCode]?(0,AvailabilityReducer_1.getAvailability)({skuCode:sCode,config,dispatch,setItem,item}):available||dispatch({type:"setAvailability",payload:{quantity}})}else if(skus&&config.accessToken){const itemKeys=Object.keys(item).sort(),skuCodes=skus.map(s=>s?.code).sort();if(!(0,isEqual_1.default)(skuCodes,itemKeys)){const skusIds=skus.map(s=>s.id);(0,AvailabilityReducer_1.getAvailabilityByIds)({skusIds,config,dispatch,setItem})}}return()=>{dispatch({type:"setAvailability",payload:{}})}},[config.accessToken,item,sCode,skus]),(0,jsx_runtime_1.jsx)(AvailabilityContext_1.default.Provider,{value:{...state},children})}exports.AvailabilityContainer=AvailabilityContainer,AvailabilityContainer.propTypes=propTypes,AvailabilityContainer.displayName=displayName,exports.default=AvailabilityContainer;

package/lib/cjs/components/AvailabilityTemplate.d.ts

@@ -1,15 +1,24 @@
-import { FunctionComponent } from 'react';
+/// <reference types="react" />
 import { TimeFormat, FunctionChildren } from '../typings/index';
 import { DeliveryLeadTime } from '../reducers/AvailabilityReducer';
-declare type AvailabilityTemplateChildrenProps = FunctionChildren<Omit<AvailabilityTemplateProps, 'children'> & DeliveryLeadTime & {
+declare type AvailabilityTemplateChildrenProps = FunctionChildren<Omit<Props, 'children'> & DeliveryLeadTime & {
     text: string;
     quantity: number;
 }>;
-declare type AvailabilityTemplateProps = {
+declare type Props = {
     children?: AvailabilityTemplateChildrenProps;
     timeFormat?: TimeFormat;
     showShippingMethodName?: boolean;
     showShippingMethodPrice?: boolean;
 } & JSX.IntrinsicElements['p'];
-declare const AvailabilityTemplate: FunctionComponent<AvailabilityTemplateProps>;
+export declare function AvailabilityTemplate(props: Props): JSX.Element;
+export declare namespace AvailabilityTemplate {
+    var propTypes: {
+        timeFormat: import("prop-types").Requireable<TimeFormat>;
+        showShippingMethodName: import("prop-types").Requireable<boolean>;
+        children: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+    var defaultProps: Props;
+    var displayName: string;
+}
 export default AvailabilityTemplate;

package/lib/cjs/components/AvailabilityTemplate.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),AvailabilityContext_1=(0,tslib_1.__importDefault)(require("../context/AvailabilityContext")),Parent_1=(0,tslib_1.__importDefault)(require("./utils/Parent")),lodash_1=require("lodash"),components_1=(0,tslib_1.__importDefault)(require("../config/components")),propTypes=components_1.default.AvailabilityTemplate.propTypes,defaultProps=components_1.default.AvailabilityTemplate.defaultProps,displayName=components_1.default.AvailabilityTemplate.displayName,AvailabilityTemplate=props=>{const{timeFormat,showShippingMethodName,showShippingMethodPrice,children}=props,p=(0,tslib_1.__rest)(props,["timeFormat","showShippingMethodName","showShippingMethodPrice","children"]),{min,max,shipping_method,quantity}=(0,react_1.useContext)(AvailabilityContext_1.default),mn=!(0,lodash_1.isEmpty)(min)&&timeFormat?min==null?void 0:min[timeFormat]:"",mx=!(0,lodash_1.isEmpty)(max)&&timeFormat?max==null?void 0:max[timeFormat]:"",text=[],shippingMethodPrice=showShippingMethodPrice&&(shipping_method==null?void 0:shipping_method.formatted_price_amount)?`(${shipping_method==null?void 0:shipping_method.formatted_price_amount})`:"",name=showShippingMethodName&&shipping_method?`with ${shipping_method.name}`:"";quantity&&quantity>0?(text.push("Available"),mn&&mx&&text.push(`in ${mn} - ${mx} ${timeFormat} ${name} ${shippingMethodPrice}`)):quantity===0&&text.push("Out of stock");const parentProps=Object.assign({min,max,shipping_method,quantity,text:text.join(" ")},props);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children}),void 0):(0,jsx_runtime_1.jsx)("p",Object.assign({},p,{children:text.join(" ")}),void 0)};AvailabilityTemplate.propTypes=propTypes,AvailabilityTemplate.defaultProps=defaultProps,AvailabilityTemplate.displayName=displayName,exports.default=AvailabilityTemplate;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AvailabilityTemplate=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),AvailabilityContext_1=tslib_1.__importDefault(require("../context/AvailabilityContext")),Parent_1=tslib_1.__importDefault(require("./utils/Parent")),lodash_1=require("lodash"),components_1=tslib_1.__importDefault(require("../config/components")),ItemContext_1=tslib_1.__importDefault(require("../context/ItemContext")),SkuChildrenContext_1=tslib_1.__importDefault(require("../context/SkuChildrenContext")),propTypes=components_1.default.AvailabilityTemplate.propTypes,defaultProps=components_1.default.AvailabilityTemplate.defaultProps,displayName=components_1.default.AvailabilityTemplate.displayName;function AvailabilityTemplate(props){const{timeFormat,showShippingMethodName,showShippingMethodPrice,children,...p}=props;let{min,max,shipping_method,quantity}=(0,react_1.useContext)(AvailabilityContext_1.default);const{item}=(0,react_1.useContext)(ItemContext_1.default),{sku}=(0,react_1.useContext)(SkuChildrenContext_1.default),text=[];if(item&&sku){const code=sku.code,currentItem=item[code];if(currentItem){const[level]=currentItem.inventory?.levels||[],[delivery]=level?.delivery_lead_times||[];delivery&&(min=delivery?.min,max=delivery?.max,shipping_method=delivery?.shipping_method),quantity=currentItem.inventory.quantity}}const mn=!(0,lodash_1.isEmpty)(min)&&timeFormat?min?.[timeFormat]:"",mx=!(0,lodash_1.isEmpty)(max)&&timeFormat?max?.[timeFormat]:"",shippingMethodPrice=showShippingMethodPrice&&shipping_method?.formatted_price_amount?`(${shipping_method?.formatted_price_amount})`:"",name=showShippingMethodName&&shipping_method?`with ${shipping_method.name}`:"";quantity&&quantity>0?(text.push("Available"),mn&&mx&&text.push(`in ${mn} - ${mx} ${timeFormat} ${name} ${shippingMethodPrice}`)):quantity===0&&text.push("Out of stock");const parentProps={min,max,shipping_method,quantity,text:text.join(" "),...props};return children?(0,jsx_runtime_1.jsx)(Parent_1.default,{...parentProps,children}):(0,jsx_runtime_1.jsx)("p",{...p,children:text.join(" ")})}exports.AvailabilityTemplate=AvailabilityTemplate,AvailabilityTemplate.propTypes=propTypes,AvailabilityTemplate.defaultProps=defaultProps,AvailabilityTemplate.displayName=displayName,exports.default=AvailabilityTemplate;

package/lib/cjs/components/BillingAddressContainer.d.ts

@@ -1,6 +1,11 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { ReactNode } from 'react';
 declare type Props = {
     children: ReactNode;
 };
-declare const BillingAddressContainer: FunctionComponent<Props>;
+export declare function BillingAddressContainer(props: Props): JSX.Element;
+export declare namespace BillingAddressContainer {
+    var propTypes: {
+        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+    };
+}
 export default BillingAddressContainer;

package/lib/cjs/components/BillingAddressContainer.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),BillingAddressContext_1=(0,tslib_1.__importDefault)(require("../context/BillingAddressContext")),react_1=require("react"),BillingAddressReducer_1=(0,tslib_1.__importStar)(require("../reducers/BillingAddressReducer")),CommerceLayerContext_1=(0,tslib_1.__importDefault)(require("../context/CommerceLayerContext")),components_1=(0,tslib_1.__importDefault)(require("../config/components")),OrderContext_1=(0,tslib_1.__importDefault)(require("../context/OrderContext")),AddressContext_1=(0,tslib_1.__importDefault)(require("../context/AddressContext")),propTypes=components_1.default.BillingAddressContainer.propTypes,BillingAddressContainer=props=>{const{children}=props,[state,dispatch]=(0,react_1.useReducer)(BillingAddressReducer_1.default,BillingAddressReducer_1.billingAddressInitialState),config=(0,react_1.useContext)(CommerceLayerContext_1.default),{order,include,addResourceToInclude}=(0,react_1.useContext)(OrderContext_1.default),{shipToDifferentAddress,setCloneAddress}=(0,react_1.useContext)(AddressContext_1.default);(0,react_1.useEffect)(()=>((include==null?void 0:include.includes("billing_address"))||addResourceToInclude({newResource:"billing_address",resourcesIncluded:include}),order&&config&&(0,BillingAddressReducer_1.setBillingCustomerAddressId)({dispatch,order,setCloneAddress}),()=>{dispatch({type:"cleanup",payload:{}})}),[order,include]);const contextValue=Object.assign(Object.assign({},state),{setBillingAddress:async(id,options)=>{await(0,BillingAddressReducer_1.setBillingAddress)(id,{config,dispatch,order,shipToDifferentAddress,customerAddressId:options==null?void 0:options.customerAddressId}),setCloneAddress(id,"billing_address")}});return(0,jsx_runtime_1.jsx)(BillingAddressContext_1.default.Provider,Object.assign({value:contextValue},{children}),void 0)};BillingAddressContainer.propTypes=propTypes,exports.default=BillingAddressContainer;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BillingAddressContainer=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),BillingAddressContext_1=tslib_1.__importDefault(require("../context/BillingAddressContext")),react_1=require("react"),BillingAddressReducer_1=tslib_1.__importStar(require("../reducers/BillingAddressReducer")),CommerceLayerContext_1=tslib_1.__importDefault(require("../context/CommerceLayerContext")),components_1=tslib_1.__importDefault(require("../config/components")),OrderContext_1=tslib_1.__importDefault(require("../context/OrderContext")),AddressContext_1=tslib_1.__importDefault(require("../context/AddressContext")),propTypes=components_1.default.BillingAddressContainer.propTypes;function BillingAddressContainer(props){const{children}=props,[state,dispatch]=(0,react_1.useReducer)(BillingAddressReducer_1.default,BillingAddressReducer_1.billingAddressInitialState),config=(0,react_1.useContext)(CommerceLayerContext_1.default),{order,include,addResourceToInclude}=(0,react_1.useContext)(OrderContext_1.default),{shipToDifferentAddress,setCloneAddress}=(0,react_1.useContext)(AddressContext_1.default);(0,react_1.useEffect)(()=>(include?.includes("billing_address")||addResourceToInclude({newResource:"billing_address",resourcesIncluded:include}),order&&config&&(0,BillingAddressReducer_1.setBillingCustomerAddressId)({dispatch,order,setCloneAddress}),()=>{dispatch({type:"cleanup",payload:{}})}),[order,include]);const contextValue={...state,setBillingAddress:async(id,options)=>{await(0,BillingAddressReducer_1.setBillingAddress)(id,{config,dispatch,order,shipToDifferentAddress,customerAddressId:options?.customerAddressId}),setCloneAddress(id,"billing_address")}};return(0,jsx_runtime_1.jsx)(BillingAddressContext_1.default.Provider,{value:contextValue,children})}exports.BillingAddressContainer=BillingAddressContainer,BillingAddressContainer.propTypes=propTypes,exports.default=BillingAddressContainer;

package/lib/cjs/components/BillingAddressForm.d.ts

@@ -1,8 +1,13 @@
-import { FunctionComponent, ReactNode } from 'react';
-declare type BillingAddressFormProps = {
+import { ReactNode } from 'react';
+declare type Props = {
     children: ReactNode;
     reset?: boolean;
     errorClassName?: string;
 } & Omit<JSX.IntrinsicElements['form'], 'onSubmit'>;
-declare const BillingAddressForm: FunctionComponent<BillingAddressFormProps>;
+export declare function BillingAddressForm(props: Props): JSX.Element;
+export declare namespace BillingAddressForm {
+    var propTypes: {
+        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+    };
+}
 export default BillingAddressForm;

package/lib/cjs/components/BillingAddressForm.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),AddressContext_1=(0,tslib_1.__importDefault)(require("../context/AddressContext")),rapid_form_1=(0,tslib_1.__importDefault)(require("rapid-form")),react_1=require("react"),BillingAddressFormContext_1=(0,tslib_1.__importDefault)(require("../context/BillingAddressFormContext")),lodash_1=require("lodash"),components_1=(0,tslib_1.__importDefault)(require("../config/components")),OrderContext_1=(0,tslib_1.__importDefault)(require("../context/OrderContext")),localStorage_1=require("../utils/localStorage"),propTypes=components_1.default.BillingAddressForm.propTypes,BillingAddressForm=props=>{const{children,errorClassName,autoComplete="on",reset=!1}=props,p=(0,tslib_1.__rest)(props,["children","errorClassName","autoComplete","reset"]),{validation,values,errors,reset:resetForm}=(0,rapid_form_1.default)(),{setAddressErrors,setAddress}=(0,react_1.useContext)(AddressContext_1.default),{saveAddressToCustomerAddressBook,order,include,addResourceToInclude,includeLoaded}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{var _a,_b,_c;if((include==null?void 0:include.includes("billing_address"))?(includeLoaded==null?void 0:includeLoaded.billing_address)||addResourceToInclude({newResourceLoaded:{billing_address:!0}}):addResourceToInclude({newResource:"billing_address"}),(0,lodash_1.isEmpty)(errors)){if(!(0,lodash_1.isEmpty)(values)){setAddressErrors([],"billing_address");for(const name in values){const field=values[name];(field==null?void 0:field.value)&&(values[name.replace("billing_address_","")]=field.value,delete values[name]),(field==null?void 0:field.type)==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"billing_address",value:field.checked}))}setAddress({values,resource:"billing_address"})}}else{const formErrors=[];for(const fieldName in errors){const{code,message}=errors[fieldName];["billing_address_state_code"].includes(fieldName)?(0,lodash_1.isEmpty)(values.state_code)?delete errors[fieldName]:formErrors.push({code,message,resource:"billing_address",field:fieldName}):formErrors.push({code,message,resource:"billing_address",field:fieldName})}setAddressErrors(formErrors,"billing_address")}const checkboxChecked=((_b=(_a=ref.current)===null||_a===void 0?void 0:_a.querySelector('[name="billing_address_save_to_customer_book"]'))===null||_b===void 0?void 0:_b.checked)||(0,localStorage_1.getSaveBillingAddressToAddressBook)();reset&&(!(0,lodash_1.isEmpty)(values)||!(0,lodash_1.isEmpty)(errors)||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"billing_address",value:!1}),ref&&((_c=ref.current)===null||_c===void 0||_c.reset(),resetForm({target:ref.current}),setAddressErrors([],"billing_address"),setAddress({values:{},resource:"billing_address"})))},[errors,values,reset,include,includeLoaded]);const providerValues={values,validation,setValue:(name,value)=>{const field={[name.replace("billing_address_","")]:value};setAddress({values:Object.assign(Object.assign({},values),field),resource:"billing_address"})},errorClassName,requiresBillingInfo:(order==null?void 0:order.requires_billing_info)||!1,errors,resetField:name=>resetForm({currentTarget:ref.current},name)};return(0,jsx_runtime_1.jsx)(BillingAddressFormContext_1.default.Provider,Object.assign({value:providerValues},{children:(0,jsx_runtime_1.jsx)("form",Object.assign({ref,autoComplete},p,{children}),void 0)}),void 0)};BillingAddressForm.propTypes=propTypes,exports.default=BillingAddressForm;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BillingAddressForm=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),AddressContext_1=tslib_1.__importDefault(require("../context/AddressContext")),rapid_form_1=require("rapid-form"),react_1=require("react"),BillingAddressFormContext_1=tslib_1.__importDefault(require("../context/BillingAddressFormContext")),lodash_1=require("lodash"),components_1=tslib_1.__importDefault(require("../config/components")),OrderContext_1=tslib_1.__importDefault(require("../context/OrderContext")),localStorage_1=require("../utils/localStorage"),validateFormFields_1=require("../utils/validateFormFields"),propTypes=components_1.default.BillingAddressForm.propTypes;function BillingAddressForm(props){const{children,errorClassName,autoComplete="on",reset=!1,...p}=props;console.log("useRapidForm",rapid_form_1.useRapidForm);debugger;const{validation,values,errors,reset:resetForm}=(0,rapid_form_1.useRapidForm)(),{setAddressErrors,setAddress,isBusiness}=(0,react_1.useContext)(AddressContext_1.default),{saveAddressToCustomerAddressBook,order,include,addResourceToInclude,includeLoaded}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{if(include?.includes("billing_address")?includeLoaded?.billing_address||addResourceToInclude({newResourceLoaded:{billing_address:!0}}):addResourceToInclude({newResource:"billing_address"}),(0,lodash_1.isEmpty)(errors)){if(values&&Object.keys(values).length>0){setAddressErrors([],"billing_address");for(const name in values){const field=values[name];(0,validateFormFields_1.businessMandatoryField)(name,isBusiness)||delete values[name],(field?.value||field?.required===!1&&field?.type!=="checkbox")&&(values[name.replace("billing_address_","")]=field.value,delete values[name]),field?.type==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"billing_address",value:field.checked}))}setAddress({values:{...values,...isBusiness&&{business:isBusiness}},resource:"billing_address"})}}else{const formErrors=[];for(const fieldName in errors){const code=errors[fieldName]?.code,message=errors[fieldName]?.message;["billing_address_state_code"].includes(fieldName)?values?.state_code?formErrors.push({code,message:message||"",resource:"billing_address",field:fieldName}):delete errors[fieldName]:formErrors.push({code,message:message||"",resource:"billing_address",field:fieldName})}setAddressErrors(formErrors,"billing_address")}const checkboxChecked=ref.current?.querySelector('[name="billing_address_save_to_customer_book"]')?.checked||(0,localStorage_1.getSaveBillingAddressToAddressBook)();reset&&(!(0,lodash_1.isEmpty)(values)||!(0,lodash_1.isEmpty)(errors)||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"billing_address",value:!1}),ref&&(ref.current?.reset(),resetForm({target:ref.current}),setAddressErrors([],"billing_address"),setAddress({values:{},resource:"billing_address"})))},[errors,values,reset,include,includeLoaded,isBusiness]);const providerValues={isBusiness,values,validation,setValue:(name,value)=>{const field={[name.replace("billing_address_","")]:value};setAddress({values:{...values,...field,...isBusiness&&{business:isBusiness}},resource:"billing_address"})},errorClassName,requiresBillingInfo:order?.requires_billing_info||!1,errors,resetField:name=>resetForm({currentTarget:ref.current},name)};return(0,jsx_runtime_1.jsx)(BillingAddressFormContext_1.default.Provider,{value:providerValues,children:(0,jsx_runtime_1.jsx)("form",{ref,autoComplete,...p,children})})}exports.BillingAddressForm=BillingAddressForm,BillingAddressForm.propTypes=propTypes,exports.default=BillingAddressForm;

package/lib/cjs/components/BraintreePayment.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+/// <reference types="react" />
 import { HostedFieldFieldOptions } from 'braintree-web/modules/hosted-fields';
 import { PaymentSourceProps } from './PaymentSource';
 declare type BraintreeHostedFields<Type> = {
@@ -20,11 +20,11 @@ export declare type BraintreeConfig = {
         [key: string]: Record<string, string>;
     };
 };
-declare type BraintreePaymentProps = {
+declare type Props = {
     authorization: string;
     config?: BraintreeConfig;
     templateCustomerSaveToWallet?: PaymentSourceProps['templateCustomerSaveToWallet'];
     locale?: string;
 };
-declare const BraintreePayment: FunctionComponent<BraintreePaymentProps>;
+export declare function BraintreePayment({ authorization, config, templateCustomerSaveToWallet, }: Props): JSX.Element | null;
 export default BraintreePayment;

package/lib/cjs/components/BraintreePayment.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodContext_1=(0,tslib_1.__importDefault)(require("../context/PaymentMethodContext")),isEmpty_1=(0,tslib_1.__importDefault)(require("lodash/isEmpty")),OrderContext_1=(0,tslib_1.__importDefault)(require("../context/OrderContext")),Parent_1=(0,tslib_1.__importDefault)(require("./utils/Parent")),localStorage_1=require("../utils/localStorage"),promisify_1=(0,tslib_1.__importDefault)(require("../utils/promisify")),defaultConfig={styles:{input:{"font-size":"16px",color:"#3A3A3A"},".number":{"font-family":"monospace"},":focus":{color:"blue"},".valid":{color:"green"},".invalid":{color:"red"},"@media screen and (max-width: 700px)":{input:{"font-size":"14px"}}},fields:{number:{label:"Card Number",selector:"#card-number",placeholder:"4111 1111 1111 1111"},cvv:{label:"CVV",selector:"#cvv",placeholder:"123"},expirationDate:{label:"Expiration Date",selector:"#expiration-date",placeholder:"10/2022"}},submitLabel:"Set payment method"},BraintreePayment=({authorization,config,templateCustomerSaveToWallet})=>{var _a,_b,_c;const{fields,styles,containerClassName,cardContainerClassName,fieldsContainerClassName,expDateContainerClassName,fieldLabelClassName,cvvContainerClassName,inputWrapperClassName,cardDetailsContainerClassName}=Object.assign(Object.assign({},defaultConfig),config),[loadBraintree,setLoadBraintree]=(0,react_1.useState)(!1),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null),handleSubmitForm=async(event,hostedFieldsInstance,threeDSInstance)=>{var _a2,_b2;const savePaymentSourceToCustomerWallet=(_b2=(_a2=event==null?void 0:event.elements)===null||_a2===void 0?void 0:_a2.save_payment_source_to_customer_wallet)===null||_b2===void 0?void 0:_b2.checked;if(savePaymentSourceToCustomerWallet&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),hostedFieldsInstance)try{const payload=await(0,promisify_1.default)(hostedFieldsInstance).then(payload2=>payload2),billingAddress=order==null?void 0:order.billing_address,verifyCardOptions={nonce:payload.nonce,bin:payload.details.bin,amount:order==null?void 0:order.total_amount_with_taxes_float,email:order==null?void 0:order.customer_email,billingAddress:{givenName:billingAddress==null?void 0:billingAddress.first_name,surname:billingAddress==null?void 0:billingAddress.last_name,phoneNumber:billingAddress==null?void 0:billingAddress.phone,streetAddress:billingAddress==null?void 0:billingAddress.line_1,countryCodeAlpha2:billingAddress==null?void 0:billingAddress.country_code,postalCode:billingAddress==null?void 0:billingAddress.zip_code,region:billingAddress==null?void 0:billingAddress.state_code,locality:billingAddress==null?void 0:billingAddress.city},onLookupComplete:(_data,next)=>{next()}},response=await threeDSInstance.verifyCard(verifyCardOptions);return response.rawCardinalSDKVerificationData.Validated&&paymentSource?(paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"braintree_payments",attributes:{payment_method_nonce:response.nonce,options:{id:response.nonce,card:{last4:response.details.lastFour,exp_year:response.details.expirationYear,exp_month:response.details.expirationMonth,brand:response.details.cardType.toLowerCase()}}}}),!0):!1}catch(error){return console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}return!1};return(0,react_1.useEffect)(()=>{if(!ref&&authorization&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet","false"),authorization&&!loadBraintree&&!(0,isEmpty_1.default)(window)){const braintreeClient=require("braintree-web/client"),hostedFields=require("braintree-web/hosted-fields"),threeDSecure=require("braintree-web/three-d-secure");braintreeClient.create({authorization},(clientErr,clientInstance)=>{if(clientErr){console.error(clientErr);return}hostedFields.create({client:clientInstance,fields,styles},(hostedFieldsErr,hostedFieldsInstance)=>{if(hostedFieldsErr){console.error(hostedFieldsErr);return}setLoadBraintree(!0),threeDSecure.create({authorization,version:2},(threeDSecureErr,threeDSecureInstance)=>{threeDSecureErr&&(console.error("3DSecure error",threeDSecureErr),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:threeDSecureErr.message}])),ref.current&&(ref.current.onsubmit=()=>handleSubmitForm(ref.current,hostedFieldsInstance,threeDSecureInstance),setPaymentRef({ref}))})})})}return()=>{setPaymentRef({ref:{current:null}}),setLoadBraintree(!1)}},[authorization,ref]),!authorization&&!loadBraintree?null:(0,jsx_runtime_1.jsx)("div",Object.assign({className:containerClassName},{children:(0,jsx_runtime_1.jsxs)("form",Object.assign({ref,id:"braintree-form",onSubmit:handleSubmitForm,className:containerClassName},{children:[(0,jsx_runtime_1.jsxs)("div",Object.assign({className:fieldsContainerClassName},{children:[(0,jsx_runtime_1.jsxs)("div",Object.assign({className:cardContainerClassName},{children:[(0,jsx_runtime_1.jsx)("label",Object.assign({className:fieldLabelClassName,htmlFor:"card-number"},{children:(_a=fields==null?void 0:fields.number)===null||_a===void 0?void 0:_a.label}),void 0),(0,jsx_runtime_1.jsx)("div",{className:inputWrapperClassName,id:"card-number"},void 0)]}),void 0),(0,jsx_runtime_1.jsxs)("div",Object.assign({className:cardDetailsContainerClassName},{children:[(0,jsx_runtime_1.jsxs)("div",Object.assign({className:expDateContainerClassName},{children:[(0,jsx_runtime_1.jsx)("label",Object.assign({className:fieldLabelClassName,htmlFor:"expiration-date"},{children:(_b=fields==null?void 0:fields.expirationDate)===null||_b===void 0?void 0:_b.label}),void 0),(0,jsx_runtime_1.jsx)("div",{className:inputWrapperClassName,id:"expiration-date"},void 0)]}),void 0),(0,jsx_runtime_1.jsxs)("div",Object.assign({className:cvvContainerClassName},{children:[(0,jsx_runtime_1.jsx)("label",Object.assign({className:fieldLabelClassName,htmlFor:"cvv"},{children:(_c=fields==null?void 0:fields.cvv)===null||_c===void 0?void 0:_c.label}),void 0),(0,jsx_runtime_1.jsx)("div",{className:inputWrapperClassName,id:"cvv"},void 0)]}),void 0)]}),void 0)]}),void 0),(0,jsx_runtime_1.jsx)("div",Object.assign({className:fieldsContainerClassName},{children:templateCustomerSaveToWallet&&(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},{name:"save_payment_source_to_customer_wallet"},{children:templateCustomerSaveToWallet}),void 0)}),void 0)]}),void 0)}),void 0)};exports.default=BraintreePayment;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BraintreePayment=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodContext_1=tslib_1.__importDefault(require("../context/PaymentMethodContext")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),OrderContext_1=tslib_1.__importDefault(require("../context/OrderContext")),Parent_1=tslib_1.__importDefault(require("./utils/Parent")),localStorage_1=require("../utils/localStorage"),promisify_1=tslib_1.__importDefault(require("../utils/promisify")),defaultConfig={styles:{input:{"font-size":"16px",color:"#3A3A3A"},".number":{"font-family":"monospace"},":focus":{color:"blue"},".valid":{color:"green"},".invalid":{color:"red"},"@media screen and (max-width: 700px)":{input:{"font-size":"14px"}}},fields:{number:{label:"Card Number",selector:"#card-number",placeholder:"4111 1111 1111 1111"},cvv:{label:"CVV",selector:"#cvv",placeholder:"123"},expirationDate:{label:"Expiration Date",selector:"#expiration-date",placeholder:"10/2022"}},submitLabel:"Set payment method"};function BraintreePayment({authorization,config,templateCustomerSaveToWallet}){const{fields,styles,containerClassName,cardContainerClassName,fieldsContainerClassName,expDateContainerClassName,fieldLabelClassName,cvvContainerClassName,inputWrapperClassName,cardDetailsContainerClassName}={...defaultConfig,...config},[loadBraintree,setLoadBraintree]=(0,react_1.useState)(!1),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null),handleSubmitForm=async({event,hostedFieldsInstance,threeDSInstance})=>{const savePaymentSourceToCustomerWallet=event?.elements?.save_payment_source_to_customer_wallet?.checked;if(savePaymentSourceToCustomerWallet&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),hostedFieldsInstance)try{const payload=await(0,promisify_1.default)(hostedFieldsInstance).then(payload2=>payload2),billingAddress=order?.billing_address,verifyCardOptions={nonce:payload.nonce,bin:payload.details.bin,amount:order?.total_amount_with_taxes_float,email:order?.customer_email,billingAddress:{givenName:billingAddress?.first_name,surname:billingAddress?.last_name,phoneNumber:billingAddress?.phone,streetAddress:billingAddress?.line_1,countryCodeAlpha2:billingAddress?.country_code,postalCode:billingAddress?.zip_code,region:billingAddress?.state_code,locality:billingAddress?.city},onLookupComplete:(_data,next)=>{next()}},response=await threeDSInstance.verifyCard(verifyCardOptions);return response.rawCardinalSDKVerificationData.Validated&&paymentSource?(paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"braintree_payments",attributes:{payment_method_nonce:response.nonce,options:{id:response.nonce,card:{last4:response.details.lastFour,exp_year:response.details.expirationYear,exp_month:response.details.expirationMonth,brand:response.details.cardType.toLowerCase()}}}}),!0):!1}catch(error){return console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}return!1};return(0,react_1.useEffect)(()=>{if(!ref&&authorization&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet","false"),authorization&&!loadBraintree&&!(0,isEmpty_1.default)(window)){const braintreeClient=require("braintree-web/client"),hostedFields=require("braintree-web/hosted-fields"),threeDSecure=require("braintree-web/three-d-secure");braintreeClient.create({authorization},(clientErr,clientInstance)=>{if(clientErr){console.error(clientErr);return}hostedFields.create({client:clientInstance,fields,styles},(hostedFieldsErr,hostedFieldsInstance)=>{if(hostedFieldsErr){console.error(hostedFieldsErr);return}setLoadBraintree(!0),threeDSecure.create({authorization,version:2},(threeDSecureErr,threeDSInstance)=>{threeDSecureErr&&(console.error("3DSecure error",threeDSecureErr),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:threeDSecureErr.message}])),ref.current&&(ref.current.onsubmit=paymentSource2=>handleSubmitForm({event:ref.current,hostedFieldsInstance,threeDSInstance,paymentSource:paymentSource2}),setPaymentRef({ref}))})})})}return()=>{setPaymentRef({ref:{current:null}}),setLoadBraintree(!1)}},[authorization,ref]),!authorization&&!loadBraintree?null:(0,jsx_runtime_1.jsx)("div",{className:containerClassName,children:(0,jsx_runtime_1.jsxs)("form",{ref,id:"braintree-form",onSubmit:handleSubmitForm,className:containerClassName,children:[(0,jsx_runtime_1.jsxs)("div",{className:fieldsContainerClassName,children:[(0,jsx_runtime_1.jsxs)("div",{className:cardContainerClassName,children:[(0,jsx_runtime_1.jsx)("label",{className:fieldLabelClassName,htmlFor:"card-number",children:fields?.number?.label}),(0,jsx_runtime_1.jsx)("div",{className:inputWrapperClassName,id:"card-number"})]}),(0,jsx_runtime_1.jsxs)("div",{className:cardDetailsContainerClassName,children:[(0,jsx_runtime_1.jsxs)("div",{className:expDateContainerClassName,children:[(0,jsx_runtime_1.jsx)("label",{className:fieldLabelClassName,htmlFor:"expiration-date",children:fields?.expirationDate?.label}),(0,jsx_runtime_1.jsx)("div",{className:inputWrapperClassName,id:"expiration-date"})]}),(0,jsx_runtime_1.jsxs)("div",{className:cvvContainerClassName,children:[(0,jsx_runtime_1.jsx)("label",{className:fieldLabelClassName,htmlFor:"cvv",children:fields?.cvv?.label}),(0,jsx_runtime_1.jsx)("div",{className:inputWrapperClassName,id:"cvv"})]})]})]}),(0,jsx_runtime_1.jsx)("div",{className:fieldsContainerClassName,children:templateCustomerSaveToWallet&&(0,jsx_runtime_1.jsx)(Parent_1.default,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})})]})})}exports.BraintreePayment=BraintreePayment,exports.default=BraintreePayment;

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

@@ -0,0 +1,12 @@
+import { MouseEvent, ReactNode } from 'react';
+import { FunctionChildren } from '../typings/index';
+declare type TChildren = FunctionChildren<Omit<Props, 'children'> & {
+    href: string;
+    handleClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<void>;
+}>;
+declare type Props = {
+    children?: TChildren;
+    label?: string | ReactNode;
+} & JSX.IntrinsicElements['a'];
+export default function CartLink(props: Props): JSX.Element | null;
+export {};

package/lib/cjs/components/CartLink.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!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")),getCartLink_1=tslib_1.__importDefault(require("../utils/getCartLink"));function CartLink(props){const{label,children,...p}=props,{order,createOrder}=(0,react_1.useContext)(OrderContext_1.default),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default),[slug]=endpoint.split(".commercelayer"),href=slug&&order?.id?(0,getCartLink_1.default)({slug,orderId:order?.id,accessToken}):"",handleClick=async event=>{if(event.preventDefault(),order?.id)location.href=href;else{const orderId=await createOrder();slug&&(location.href=(0,getCartLink_1.default)({slug,orderId,accessToken}))}},parentProps={handleClick,label,href,...p};return accessToken?children?(0,jsx_runtime_1.jsx)(Parent_1.default,{...parentProps,children}):(0,jsx_runtime_1.jsx)("a",{href,...p,onClick:handleClick,children:typeof label=="function"?label():label}):null}exports.default=CartLink;

package/lib/cjs/components/CheckoutComPayment.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { PaymentMethodConfig } from '../reducers/PaymentMethodReducer';
+import { PaymentSourceProps } from './PaymentSource';
+import { FramesStyle } from 'frames-react';
+export declare type CheckoutComConfig = {
+    containerClassName?: string;
+    hintLabel?: string;
+    name?: string;
+    success_url?: string;
+    failure_url?: string;
+    options?: {
+        style: FramesStyle;
+    };
+    [key: string]: unknown;
+};
+declare type Props = PaymentMethodConfig['checkoutComPayment'] & JSX.IntrinsicElements['div'] & {
+    show?: boolean;
+    publicKey: string;
+    locale?: string;
+    templateCustomerSaveToWallet?: PaymentSourceProps['templateCustomerSaveToWallet'];
+};
+export declare function CheckoutComPayment({ publicKey, options, locale, ...p }: Props): JSX.Element | null;
+export default CheckoutComPayment;

package/lib/cjs/components/CheckoutComPayment.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckoutComPayment=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),useExternalScript_1=tslib_1.__importDefault(require("../utils/hooks/useExternalScript")),PaymentMethodContext_1=tslib_1.__importDefault(require("../context/PaymentMethodContext")),frames_react_1=require("frames-react"),OrderContext_1=tslib_1.__importDefault(require("../context/OrderContext")),Parent_1=tslib_1.__importDefault(require("./utils/Parent")),localStorage_1=require("../utils/localStorage"),scriptUrl="https://cdn.checkout.com/js/framesv2.min.js",systemLanguages=["DE-DE","EN-GB","ES-ES","FR-FR","IT-IT","KR-KR","NL-NL"],defaultOptions={style:{base:{color:"black",fontSize:"18px"},autofill:{backgroundColor:"yellow"},hover:{color:"blue"},focus:{color:"blue"},valid:{color:"green"},invalid:{color:"red"},placeholder:{base:{color:"gray"},focus:{border:"solid 1px blue"}}}};function CheckoutComPayment({publicKey,options=defaultOptions,locale="EN-GB",...p}){const ref=(0,react_1.useRef)(null),loaded=(0,useExternalScript_1.default)(scriptUrl),{setPaymentRef,currentPaymentMethodType,paymentSource,setPaymentSource,setPaymentMethodErrors}=(0,react_1.useContext)(PaymentMethodContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),{containerClassName,templateCustomerSaveToWallet,success_url=window.location.href,failure_url=window.location.href,show,...divProps}=p,handleSubmit=async()=>{const savePaymentSourceToCustomerWallet=ref?.current?.elements?.save_payment_source_to_customer_wallet?.checked;if(savePaymentSourceToCustomerWallet&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),window.Frames){window.Frames.cardholder={name:order?.billing_address?.full_name,billingAddress:{addressLine1:order?.billing_address?.line_1,addressLine2:order?.billing_address?.line_2,zip:order?.billing_address?.zip_code,city:order?.billing_address?.city,state:order?.billing_address?.state_code,country:order?.billing_address?.country_code},phone:order?.billing_address?.phone};try{const data=await window.Frames.submitCard();if(data.token&&paymentSource&&currentPaymentMethodType){const ps=await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{token:data.token,payment_type:"token",success_url,failure_url,_authorize:!0}});ps&&ps.redirect_uri&&(window.location.href=ps.redirect_uri)}}catch(error){console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error?.message}])}}return!1},lang=`${locale.toUpperCase()}-${locale.toUpperCase()}`,localization=systemLanguages.includes(lang)?lang:"EN-GB";return loaded&&show?(0,jsx_runtime_1.jsxs)("form",{ref,children:[(0,jsx_runtime_1.jsx)("div",{className:containerClassName,...divProps,children:(0,jsx_runtime_1.jsxs)(frames_react_1.Frames,{config:{debug:!0,publicKey,localization,...options},cardValidationChanged:e=>{e.isValid&&ref.current&&(ref.current.onsubmit=()=>handleSubmit(),setPaymentRef({ref}))},cardTokenized:data=>data,children:[(0,jsx_runtime_1.jsx)(frames_react_1.CardNumber,{}),(0,jsx_runtime_1.jsx)(frames_react_1.ExpiryDate,{}),(0,jsx_runtime_1.jsx)(frames_react_1.Cvv,{})]})}),templateCustomerSaveToWallet&&(0,jsx_runtime_1.jsx)(Parent_1.default,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})]}):null}exports.CheckoutComPayment=CheckoutComPayment,exports.default=CheckoutComPayment;

package/lib/cjs/components/CheckoutLink.d.ts

@@ -1,11 +1,23 @@
-import { FunctionComponent } from 'react';
+/// <reference types="react" />
 import { FunctionChildren } from '../typings/index';
-declare type CheckoutLinkChildrenProps = FunctionChildren<Omit<CheckoutLinkProps, 'children'> & {
+declare type CheckoutLinkChildrenProps = FunctionChildren<Omit<Props, 'children'> & {
     checkoutUrl: string;
+    href: string;
 }>;
-declare type CheckoutLinkProps = {
+declare type Props = {
     children?: CheckoutLinkChildrenProps;
     label?: string;
+    hostedCheckout?: boolean;
 } & JSX.IntrinsicElements['a'];
-declare const CheckoutLink: FunctionComponent<CheckoutLinkProps>;
+export declare function CheckoutLink(props: Props): JSX.Element;
+export declare namespace CheckoutLink {
+    var propTypes: {
+        children: import("prop-types").Requireable<(...args: any[]) => any>;
+        label: import("prop-types").Requireable<string>;
+    };
+    var defaultProps: {
+        label: string;
+    };
+    var displayName: string;
+}
 export default CheckoutLink;

package/lib/cjs/components/CheckoutLink.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),OrderContext_1=(0,tslib_1.__importDefault)(require("../context/OrderContext")),components_1=(0,tslib_1.__importDefault)(require("../config/components")),Parent_1=(0,tslib_1.__importDefault)(require("./utils/Parent")),propTypes=components_1.default.CheckoutLink.propTypes,defaultProps=components_1.default.CheckoutLink.defaultProps,displayName=components_1.default.CheckoutLink.displayName,CheckoutLink=props=>{const{label,children}=props,p=(0,tslib_1.__rest)(props,["label","children"]),{order}=(0,react_1.useContext)(OrderContext_1.default),parentProps=Object.assign({checkoutUrl:order==null?void 0:order.checkout_url,label},p);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children}),void 0):(0,jsx_runtime_1.jsx)("a",Object.assign({href:order==null?void 0:order.checkout_url},p,{children:label}),void 0)};CheckoutLink.propTypes=propTypes,CheckoutLink.defaultProps=defaultProps,CheckoutLink.displayName=displayName,exports.default=CheckoutLink;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckoutLink=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")),components_1=tslib_1.__importDefault(require("../config/components")),Parent_1=tslib_1.__importDefault(require("./utils/Parent")),CommerceLayerContext_1=tslib_1.__importDefault(require("../context/CommerceLayerContext")),propTypes=components_1.default.CheckoutLink.propTypes,defaultProps=components_1.default.CheckoutLink.defaultProps,displayName=components_1.default.CheckoutLink.displayName;function CheckoutLink(props){const{label,hostedCheckout=!0,children,...p}=props,{order}=(0,react_1.useContext)(OrderContext_1.default),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default),[slug]=endpoint.split(".commercelayer"),href=hostedCheckout?`${slug}.checkout.commercelayer.app/${order?.id}?accessToken=${accessToken}`:order?.checkout_url,parentProps={checkoutUrl:order?.checkout_url,hostedCheckout,label,href,...p};return children?(0,jsx_runtime_1.jsx)(Parent_1.default,{...parentProps,children}):(0,jsx_runtime_1.jsx)("a",{href,...p,children:label})}exports.CheckoutLink=CheckoutLink,CheckoutLink.propTypes=propTypes,CheckoutLink.defaultProps=defaultProps,CheckoutLink.displayName=displayName,exports.default=CheckoutLink;

package/lib/cjs/components/DeliveryLeadTime.d.ts

@@ -1,10 +1,17 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { ReactNode } from 'react';
 export declare type DeliveryLeadTimeField = 'min_hours' | 'max_hours' | 'min_days' | 'max_days';
-export declare type DeliveryLeadTimeComponentChildren = Omit<ShippingMethodPriceProps, 'children'>;
-export interface ShippingMethodPriceProps extends Partial<JSX.IntrinsicElements['span']> {
+export declare type DeliveryLeadTimeComponentChildren = Omit<Props, 'children'>;
+declare type Props = Partial<JSX.IntrinsicElements['span']> & {
     children?: (props: DeliveryLeadTimeComponentChildren) => ReactNode;
     type: DeliveryLeadTimeField;
     text?: string;
+};
+export declare function DeliveryLeadTime(props: Props): JSX.Element;
+export declare namespace DeliveryLeadTime {
+    var propTypes: {
+        type: import("prop-types").Validator<DeliveryLeadTimeField>;
+        children: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
 }
-declare const DeliveryLeadTime: FunctionComponent<ShippingMethodPriceProps>;
 export default DeliveryLeadTime;

package/lib/cjs/components/DeliveryLeadTime.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ShippingMethodChildrenContext_1=(0,tslib_1.__importDefault)(require("../context/ShippingMethodChildrenContext")),Parent_1=(0,tslib_1.__importDefault)(require("./utils/Parent")),components_1=(0,tslib_1.__importDefault)(require("../config/components")),propTypes=components_1.default.DeliveryLeadTime.propTypes,displayName=components_1.default.DeliveryLeadTime.displayName,DeliveryLeadTime=props=>{const{type}=props,p=(0,tslib_1.__rest)(props,["type"]),[text,setText]=(0,react_1.useState)(),{deliveryLeadTimeForShipment}=(0,react_1.useContext)(ShippingMethodChildrenContext_1.default);(0,react_1.useEffect)(()=>(deliveryLeadTimeForShipment&&deliveryLeadTimeForShipment[type]&&setText(deliveryLeadTimeForShipment[type]),()=>{setText("")}),[deliveryLeadTimeForShipment]);const parentProps=Object.assign({text},p);return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.children}),void 0):(0,jsx_runtime_1.jsx)("span",Object.assign({},p,{children:text}),void 0)};DeliveryLeadTime.propTypes=propTypes,DeliveryLeadTime.displayName=displayName,exports.default=DeliveryLeadTime;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.DeliveryLeadTime=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ShippingMethodChildrenContext_1=tslib_1.__importDefault(require("../context/ShippingMethodChildrenContext")),Parent_1=tslib_1.__importDefault(require("./utils/Parent")),components_1=tslib_1.__importDefault(require("../config/components")),propTypes=components_1.default.DeliveryLeadTime.propTypes,displayName=components_1.default.DeliveryLeadTime.displayName;function DeliveryLeadTime(props){const{type,...p}=props,[text,setText]=(0,react_1.useState)(),{deliveryLeadTimeForShipment}=(0,react_1.useContext)(ShippingMethodChildrenContext_1.default);(0,react_1.useEffect)(()=>(deliveryLeadTimeForShipment&&deliveryLeadTimeForShipment[type]&&setText(deliveryLeadTimeForShipment[type]),()=>{setText("")}),[deliveryLeadTimeForShipment]);const parentProps={text,...p};return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,{...parentProps,children:props.children}):(0,jsx_runtime_1.jsx)("span",{...p,children:text})}exports.DeliveryLeadTime=DeliveryLeadTime,DeliveryLeadTime.propTypes=propTypes,DeliveryLeadTime.displayName=displayName,exports.default=DeliveryLeadTime;

package/lib/cjs/components/DiscountAmount.d.ts

@@ -1,4 +1,18 @@
-import { FunctionComponent } from 'react';
+/// <reference types="react" />
 import { BaseAmountComponent } from '../typings/index';
-declare const DiscountAmount: FunctionComponent<BaseAmountComponent>;
+export declare function DiscountAmount(props: BaseAmountComponent): JSX.Element;
+export declare namespace DiscountAmount {
+    var propTypes: {
+        id: import("prop-types").Requireable<string>;
+        className: import("prop-types").Requireable<string>;
+        style: import("prop-types").Requireable<object>;
+        name: import("prop-types").Requireable<string>;
+        children: import("prop-types").Requireable<(...args: any[]) => any>;
+        format: import("prop-types").Requireable<import("../typings/index").BaseFormatPrice>;
+    };
+    var defaultProps: {
+        format: import("../typings/index").BaseFormatPrice;
+    };
+    var displayName: string;
+}
 export default DiscountAmount;

package/lib/cjs/components/DiscountAmount.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),BaseOrderPrice_1=(0,tslib_1.__importDefault)(require("./utils/BaseOrderPrice")),components_1=(0,tslib_1.__importDefault)(require("../config/components")),propTypes=components_1.default.DiscountAmount.propTypes,defaultProps=components_1.default.DiscountAmount.defaultProps,displayName=components_1.default.DiscountAmount.displayName,DiscountAmount=props=>(0,jsx_runtime_1.jsx)(BaseOrderPrice_1.default,Object.assign({base:"amount",type:"discount"},props),void 0);DiscountAmount.propTypes=propTypes,DiscountAmount.defaultProps=defaultProps,DiscountAmount.displayName=displayName,exports.default=DiscountAmount;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.DiscountAmount=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),BaseOrderPrice_1=tslib_1.__importDefault(require("./utils/BaseOrderPrice")),components_1=tslib_1.__importDefault(require("../config/components")),propTypes=components_1.default.DiscountAmount.propTypes,defaultProps=components_1.default.DiscountAmount.defaultProps,displayName=components_1.default.DiscountAmount.displayName;function DiscountAmount(props){return(0,jsx_runtime_1.jsx)(BaseOrderPrice_1.default,{base:"amount",type:"discount",...props})}exports.DiscountAmount=DiscountAmount,DiscountAmount.propTypes=propTypes,DiscountAmount.defaultProps=defaultProps,DiscountAmount.displayName=displayName,exports.default=DiscountAmount;

package/lib/cjs/components/Errors.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { ErrorComponentProps } from '../typings/errors';
-export declare type ErrorsProps = ErrorComponentProps & JSX.IntrinsicElements['span'];
-declare const Errors: FunctionComponent<ErrorsProps>;
+/// <reference types="react" />
+import type { ErrorComponentProps } from '../typings/errors';
+declare type Props = ErrorComponentProps & JSX.IntrinsicElements['span'];
+export declare function Errors(props: Props): JSX.Element;
 export default Errors;

package/lib/cjs/components/Errors.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),Parent_1=(0,tslib_1.__importDefault)(require("./utils/Parent")),GiftCardContext_1=(0,tslib_1.__importDefault)(require("../context/GiftCardContext")),OrderContext_1=(0,tslib_1.__importDefault)(require("../context/OrderContext")),AddressContext_1=(0,tslib_1.__importDefault)(require("../context/AddressContext")),getAllErrors_1=(0,tslib_1.__importDefault)(require("./utils/getAllErrors")),LineItemContext_1=(0,tslib_1.__importDefault)(require("../context/LineItemContext")),LineItemChildrenContext_1=(0,tslib_1.__importDefault)(require("../context/LineItemChildrenContext")),components_1=(0,tslib_1.__importDefault)(require("../config/components")),CustomerContext_1=(0,tslib_1.__importDefault)(require("../context/CustomerContext")),PaymentMethodContext_1=(0,tslib_1.__importDefault)(require("../context/PaymentMethodContext")),PaymentMethodChildrenContext_1=(0,tslib_1.__importDefault)(require("../context/PaymentMethodChildrenContext")),propTypes=components_1.default.Errors.propTypes,displayName=components_1.default.Errors.displayName,Errors=props=>{const{children,messages=[],resource,field}=props,p=(0,tslib_1.__rest)(props,["children","messages","resource","field"]),{payment}=(0,react_1.useContext)(PaymentMethodChildrenContext_1.default),{errors:orderErrors}=(0,react_1.useContext)(OrderContext_1.default),{errors:giftCardErrors}=(0,react_1.useContext)(GiftCardContext_1.default),{errors:lineItemErrors}=(0,react_1.useContext)(LineItemContext_1.default),{errors:addressErrors}=(0,react_1.useContext)(AddressContext_1.default),{errors:customerErrors}=(0,react_1.useContext)(CustomerContext_1.default),{errors:paymentMethodErrors,currentPaymentMethodType,currentPaymentMethodId}=(0,react_1.useContext)(PaymentMethodContext_1.default),{lineItem}=(0,react_1.useContext)(LineItemChildrenContext_1.default),allErrors=(0,react_1.useMemo)(()=>[...giftCardErrors||[],...orderErrors||[],...lineItemErrors||[],...addressErrors||[],...customerErrors||[],...(paymentMethodErrors==null?void 0:paymentMethodErrors.filter(v=>v.field===currentPaymentMethodType&&(payment==null?void 0:payment.id)===currentPaymentMethodId))||[]],[giftCardErrors,orderErrors,lineItemErrors,addressErrors,customerErrors,paymentMethodErrors]),msgErrors=(0,getAllErrors_1.default)({allErrors,field,messages,props:p,lineItem,resource,returnHtml:!children}),parentProps=Object.assign({messages,resource,field,errors:msgErrors},p);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children}),void 0):(0,jsx_runtime_1.jsx)(react_1.Fragment,{children:msgErrors},void 0)};Errors.propTypes=propTypes,Errors.displayName=displayName,exports.default=Errors;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Errors=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")),GiftCardContext_1=tslib_1.__importDefault(require("../context/GiftCardContext")),OrderContext_1=tslib_1.__importDefault(require("../context/OrderContext")),AddressContext_1=tslib_1.__importDefault(require("../context/AddressContext")),getAllErrors_1=tslib_1.__importDefault(require("./utils/getAllErrors")),LineItemContext_1=tslib_1.__importDefault(require("../context/LineItemContext")),LineItemChildrenContext_1=tslib_1.__importDefault(require("../context/LineItemChildrenContext")),CustomerContext_1=tslib_1.__importDefault(require("../context/CustomerContext")),PaymentMethodContext_1=tslib_1.__importDefault(require("../context/PaymentMethodContext")),PaymentMethodChildrenContext_1=tslib_1.__importDefault(require("../context/PaymentMethodChildrenContext")),ShipmentContext_1=tslib_1.__importDefault(require("../context/ShipmentContext"));function Errors(props){const{children,messages=[],resource,field,...p}=props,{payment}=(0,react_1.useContext)(PaymentMethodChildrenContext_1.default),{errors:orderErrors}=(0,react_1.useContext)(OrderContext_1.default),{errors:giftCardErrors}=(0,react_1.useContext)(GiftCardContext_1.default),{errors:lineItemErrors}=(0,react_1.useContext)(LineItemContext_1.default),{errors:addressErrors}=(0,react_1.useContext)(AddressContext_1.default),{errors:customerErrors}=(0,react_1.useContext)(CustomerContext_1.default),{errors:shipmentErrors}=(0,react_1.useContext)(ShipmentContext_1.default),{errors:paymentMethodErrors,currentPaymentMethodType,currentPaymentMethodId}=(0,react_1.useContext)(PaymentMethodContext_1.default),{lineItem}=(0,react_1.useContext)(LineItemChildrenContext_1.default),allErrors=(0,react_1.useMemo)(()=>[...giftCardErrors||[],...orderErrors||[],...lineItemErrors||[],...addressErrors||[],...customerErrors||[],...shipmentErrors||[],...paymentMethodErrors?.filter(v=>v.field===currentPaymentMethodType&&payment?.id===currentPaymentMethodId)||[]],[giftCardErrors,orderErrors,lineItemErrors,addressErrors,customerErrors,shipmentErrors,paymentMethodErrors]).filter((v,k,a)=>v?.code!==a[k-1]?.code),msgErrors=(0,getAllErrors_1.default)({allErrors,field,messages,props:p,lineItem,resource,returnHtml:!children});console.log("Errors",msgErrors);const parentProps={messages,resource,field,errors:msgErrors,...p};return children?(0,jsx_runtime_1.jsx)(Parent_1.default,{...parentProps,children}):(0,jsx_runtime_1.jsx)(react_1.Fragment,{children:msgErrors})}exports.Errors=Errors,exports.default=Errors;

package/lib/cjs/components/ExternalFunction.d.ts

@@ -1,7 +1,14 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { ReactNode } from 'react';
 declare type Props = {
     children: ReactNode;
     url: string;
 };
-declare const ExternalFunction: FunctionComponent<Props>;
+export declare function ExternalFunction({ children, url }: Props): JSX.Element;
+export declare namespace ExternalFunction {
+    var propTypes: {
+        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        url: import("prop-types").Validator<string>;
+    };
+    var displayName: string;
+}
 export default ExternalFunction;

package/lib/cjs/components/ExternalFunction.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),ExternalFunctionContext_1=(0,tslib_1.__importStar)(require("../context/ExternalFunctionContext")),components_1=(0,tslib_1.__importDefault)(require("../config/components")),propTypes=components_1.default.ExternalFunction.propTypes,displayName=components_1.default.ExternalFunction.displayName,ExternalFunction=({children,url})=>(0,jsx_runtime_1.jsx)(ExternalFunctionContext_1.default.Provider,Object.assign({value:{url,callExternalFunction:ExternalFunctionContext_1.callExternalFunction}},{children}),void 0);ExternalFunction.propTypes=propTypes,ExternalFunction.displayName=displayName,exports.default=ExternalFunction;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ExternalFunction=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),ExternalFunctionContext_1=tslib_1.__importStar(require("../context/ExternalFunctionContext")),components_1=tslib_1.__importDefault(require("../config/components")),propTypes=components_1.default.ExternalFunction.propTypes,displayName=components_1.default.ExternalFunction.displayName;function ExternalFunction({children,url}){return(0,jsx_runtime_1.jsx)(ExternalFunctionContext_1.default.Provider,{value:{url,callExternalFunction:ExternalFunctionContext_1.callExternalFunction},children})}exports.ExternalFunction=ExternalFunction,ExternalFunction.propTypes=propTypes,ExternalFunction.displayName=displayName,exports.default=ExternalFunction;

package/lib/cjs/components/GiftCard.d.ts

@@ -1,8 +1,18 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { BaseState } from '../typings/index';
-declare type GiftCardProps = {
+declare type Props = {
     children: ReactNode;
     onSubmit?: (values: BaseState) => void;
 } & JSX.IntrinsicElements['form'];
-declare const GiftCard: FunctionComponent<GiftCardProps>;
+export declare function GiftCard(props: Props): JSX.Element;
+export declare namespace GiftCard {
+    var propTypes: {
+        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        onSubmit: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+    var defaultProps: {
+        onSubmit: undefined;
+    };
+    var displayName: string;
+}
 export default GiftCard;

package/lib/cjs/components/GiftCard.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),validateFormFields_1=(0,tslib_1.__importDefault)(require("../utils/validateFormFields")),lodash_1=require("lodash"),GiftCardContext_1=(0,tslib_1.__importDefault)(require("../context/GiftCardContext")),components_1=(0,tslib_1.__importDefault)(require("../config/components")),propTypes=components_1.default.GiftCard.propTypes,defaultProps=components_1.default.GiftCard.defaultProps,displayName=components_1.default.GiftCard.displayName,GiftCard=props=>{const{children,onSubmit}=props,name="giftCardForm",ref=(0,react_1.useRef)(null),{addGiftCard,addGiftCardError}=(0,react_1.useContext)(GiftCardContext_1.default),handleSubmit=e=>{e.preventDefault();const currentForm=ref.current,elements=currentForm==null?void 0:currentForm.elements,{errors,values}=(0,validateFormFields_1.default)(elements,["currencyCode","balanceCents"],"gift_cards");(0,lodash_1.isEmpty)(errors)?(addGiftCard(values),currentForm==null||currentForm.reset(),onSubmit&&onSubmit(values)):addGiftCardError(errors)};return(0,jsx_runtime_1.jsx)(react_1.Fragment,{children:(0,jsx_runtime_1.jsx)("form",Object.assign({name,ref,onSubmit:handleSubmit},{children}),name)},void 0)};GiftCard.propTypes=propTypes,GiftCard.defaultProps=defaultProps,GiftCard.displayName=displayName,exports.default=GiftCard;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.GiftCard=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),validateFormFields_1=tslib_1.__importDefault(require("../utils/validateFormFields")),lodash_1=require("lodash"),GiftCardContext_1=tslib_1.__importDefault(require("../context/GiftCardContext")),components_1=tslib_1.__importDefault(require("../config/components")),propTypes=components_1.default.GiftCard.propTypes,defaultProps=components_1.default.GiftCard.defaultProps,displayName=components_1.default.GiftCard.displayName;function GiftCard(props){const{children,onSubmit}=props,name="giftCardForm",ref=(0,react_1.useRef)(null),{addGiftCard,addGiftCardError}=(0,react_1.useContext)(GiftCardContext_1.default),handleSubmit=e=>{e.preventDefault();const currentForm=ref.current,elements=currentForm?.elements,{errors,values}=(0,validateFormFields_1.default)(elements,["currencyCode","balanceCents"],"gift_cards");(0,lodash_1.isEmpty)(errors)?(addGiftCard(values),currentForm?.reset(),onSubmit&&onSubmit(values)):addGiftCardError(errors)};return(0,jsx_runtime_1.jsx)(react_1.Fragment,{children:(0,jsx_runtime_1.jsx)("form",{name,ref,onSubmit:handleSubmit,children},name)})}exports.GiftCard=GiftCard,GiftCard.propTypes=propTypes,GiftCard.defaultProps=defaultProps,GiftCard.displayName=displayName,exports.default=GiftCard;

package/lib/cjs/components/GiftCardContainer.d.ts

@@ -1,6 +1,12 @@
-import { FunctionComponent, ReactNode } from 'react';
-export declare type GiftCardContainer = {
+import { ReactNode } from 'react';
+export declare type Props = {
     children: ReactNode;
 };
-declare const GiftCardContainer: FunctionComponent<GiftCardContainer>;
+export declare function GiftCardContainer(props: Props): JSX.Element;
+export declare namespace GiftCardContainer {
+    var propTypes: {
+        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+    };
+    var displayName: string;
+}
 export default GiftCardContainer;