@commercelayer/react-components 2.53.1 → 3.0.0-alpha.1

package/lib/cjs/components/utils/BaseInput.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { BaseInputComponentProps } from '../../typings/index';
-export declare type BaseInputProps = BaseInputComponentProps & JSX.IntrinsicElements['input'] & JSX.IntrinsicElements['textarea'];
-declare const _default: React.ForwardRefExoticComponent<Pick<BaseInputProps, "children" | "form" | "slot" | "style" | "title" | "pattern" | "type" | "key" | "resource" | "id" | "value" | "placeholder" | "className" | "required" | "name" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "min" | "max" | "disabled" | "width" | "height" | "src" | "list" | "step" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "maxLength" | "minLength" | "multiple" | "readOnly" | "size" | "cols" | "dirName" | "rows" | "wrap"> & React.RefAttributes<any>>;
-export default _default;

package/lib/cjs/components/utils/BaseInput.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=(0,tslib_1.__importDefault)(require("react")),Parent_1=(0,tslib_1.__importDefault)(require("./Parent")),BaseInput=(props,ref)=>{const{children}=props,p=(0,tslib_1.__rest)(props,["children"]),input=props.type==="textarea"?(0,jsx_runtime_1.jsx)("textarea",Object.assign({ref},p),void 0):(0,jsx_runtime_1.jsx)("input",Object.assign({ref},p),void 0);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},p,{children}),void 0):input};exports.default=react_1.default.forwardRef(BaseInput);

package/lib/cjs/components/utils/BaseOrderPrice.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),OrderContext_1=(0,tslib_1.__importDefault)(require("../../context/OrderContext")),getAmount_1=(0,tslib_1.__importDefault)(require("../../utils/getAmount")),Parent_1=(0,tslib_1.__importDefault)(require("./Parent")),react_1=require("react"),_typings_1=require("../../typings/index"),lodash_1=require("lodash"),BaseOrderPrice=props=>{const{format="formatted",base,type,children}=props,p=(0,tslib_1.__rest)(props,["format","base","type","children"]),{order}=(0,react_1.useContext)(OrderContext_1.default),[price,setPrice]=(0,react_1.useState)(""),[cents,setCents]=(0,react_1.useState)(0);(0,react_1.useEffect)(()=>{const p2=(0,getAmount_1.default)({base,type,format,obj:order||{}}),c=(0,getAmount_1.default)({base,type,format:"cents",obj:order||{}});return setPrice(p2),setCents(c),()=>{(0,lodash_1.isEmpty)(order)&&setPrice("")}},[order]);const parentProps=Object.assign({priceCents:cents,price},p);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children}),void 0):(0,jsx_runtime_1.jsx)("span",Object.assign({},p,{children:price}),void 0)};BaseOrderPrice.propTypes=_typings_1.baseOrderPricePropTypes,exports.default=BaseOrderPrice;

package/lib/cjs/components/utils/BaseSelect.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=(0,tslib_1.__importDefault)(require("react")),Parent_1=(0,tslib_1.__importDefault)(require("./Parent")),lodash_1=require("lodash"),BaseSelect=(props,ref)=>{const{options=[],children,placeholder={label:"Select an option",value:""},value=""}=props,p=(0,tslib_1.__rest)(props,["options","children","placeholder","value"]);(0,lodash_1.findIndex)(options,placeholder)===-1?options.unshift(placeholder):options[0]=placeholder;const Options=options.map((o,k)=>{const{label}=o,option=(0,tslib_1.__rest)(o,["label"]);return(0,jsx_runtime_1.jsx)("option",Object.assign({},option,{children:label}),k)}),parentProps=Object.assign({options,ref},p);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children}),void 0):(0,jsx_runtime_1.jsx)("select",Object.assign({ref,defaultValue:value},p,{children:Options}),void 0)};exports.default=react_1.default.forwardRef(BaseSelect);

package/lib/cjs/components/utils/Parent.d.ts

@@ -1,8 +0,0 @@
-import PropTypes, { InferProps } from 'prop-types';
-import { FunctionComponent } from 'react';
-declare const PProps: {
-    children: PropTypes.Requireable<(...args: any[]) => any>;
-};
-export declare type ParentProps = InferProps<typeof PProps>;
-declare const Parent: FunctionComponent<ParentProps>;
-export default Parent;

package/lib/cjs/components/utils/Parent.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),prop_types_1=(0,tslib_1.__importDefault)(require("prop-types")),PProps={children:prop_types_1.default.func},Parent=props=>{const Child=props.children;return Child?(0,jsx_runtime_1.jsx)(Child,Object.assign({},props),void 0):null};Parent.propTypes=PProps,exports.default=Parent;

package/lib/cjs/components/utils/PaymentCardsTemplate.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import { PaymentResource, PaymentSourceType } from '../../reducers/PaymentMethodReducer';
-import PaymentSourceContext, { iconBrand } from '../../context/PaymentSourceContext';
-import { FunctionChildren } from '../../typings/index';
-declare type ChildrenProps = Pick<Props, 'customerPayments'> & {
-    PaymentSourceProvider: typeof PaymentSourceContext.Provider;
-};
-declare type CustomerPayment = PaymentSourceType & {
-    card?: {
-        brand?: iconBrand;
-        last4?: string;
-    };
-    handleClick?: () => void;
-};
-export declare type CustomerCardsTemplateChildren = FunctionChildren<ChildrenProps>;
-export declare type CustomerCardsType = ChildrenProps;
-declare type Props = {
-    customerPayments: CustomerPayment[];
-    children: CustomerCardsTemplateChildren;
-    paymentResource: PaymentResource;
-};
-export default function PaymentCardsTemplate({ customerPayments, children, paymentResource, }: Props): JSX.Element;
-export {};

package/lib/cjs/components/utils/PaymentCardsTemplate.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),Parent_1=(0,tslib_1.__importDefault)(require("../utils/Parent")),react_1=require("react"),PaymentMethodContext_1=(0,tslib_1.__importDefault)(require("../../context/PaymentMethodContext")),PaymentSourceContext_1=(0,tslib_1.__importDefault)(require("../../context/PaymentSourceContext"));function PaymentCardsTemplate({customerPayments,children,paymentResource}){const{setPaymentSource}=(0,react_1.useContext)(PaymentMethodContext_1.default),value={customerPayments:customerPayments.map(customerPayment=>{var _a,_b,_c,_d,_e,_f,_g;const attributes=customerPayment,card=((_a=customerPayment==null?void 0:customerPayment.payment_source.options)===null||_a===void 0?void 0:_a.card)||((_c=(_b=customerPayment==null?void 0:customerPayment.payment_source)===null||_b===void 0?void 0:_b.payment_request_data)===null||_c===void 0?void 0:_c.paymentMethod)||((_e=(_d=customerPayment==null?void 0:customerPayment.payment_source)===null||_d===void 0?void 0:_d.payment_method)===null||_e===void 0?void 0:_e.card)||((_g=(_f=customerPayment==null?void 0:customerPayment.payment_source)===null||_f===void 0?void 0:_f.metadata)===null||_g===void 0?void 0:_g.card),handleClick=async e=>{e.stopPropagation(),await setPaymentSource({paymentResource,customerPaymentSourceId:customerPayment.id})};return Object.assign(Object.assign({},attributes),{card,handleClick})}),PaymentSourceProvider:PaymentSourceContext_1.default.Provider};return(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},value,{children}),void 0)}exports.default=PaymentCardsTemplate;

package/lib/cjs/components/utils/PriceTemplate.d.ts

@@ -1,8 +0,0 @@
-import { FunctionComponent } from 'react';
-import { PriceProps } from '../Price';
-export declare type PTemplateProps = {
-    formattedAmount?: string;
-    formattedCompare?: string;
-} & Omit<PriceProps, 'children'>;
-declare const PriceTemplate: FunctionComponent<PTemplateProps>;
-export default PriceTemplate;

package/lib/cjs/components/utils/PriceTemplate.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),prop_types_1=(0,tslib_1.__importDefault)(require("prop-types")),propTypes={formattedAmount:prop_types_1.default.string,formattedCompare:prop_types_1.default.string},defaultProps={formattedAmount:"",formattedCompare:""},PriceTemplate=props=>{const{showCompare,formattedCompare,compareClassName,className,formattedAmount,skuCode}=props,p=(0,tslib_1.__rest)(props,["showCompare","formattedCompare","compareClassName","className","formattedAmount","skuCode"]);return(0,jsx_runtime_1.jsxs)(react_1.Fragment,{children:[(0,jsx_runtime_1.jsx)("span",Object.assign({className},p,{children:formattedAmount}),void 0),showCompare&&(0,jsx_runtime_1.jsx)("span",Object.assign({className:compareClassName||""},p,{children:formattedCompare}),void 0)]},void 0)};PriceTemplate.propTypes=propTypes,PriceTemplate.defaultProps=defaultProps,exports.default=PriceTemplate;

package/lib/cjs/components/utils/VariantTemplate.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.propTypes=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),lodash_1=require("lodash"),prop_types_1=(0,tslib_1.__importDefault)(require("prop-types"));exports.propTypes={variants:prop_types_1.default.any.isRequired,onChange:prop_types_1.default.func,options:prop_types_1.default.arrayOf(prop_types_1.default.shape({label:prop_types_1.default.string.isRequired,code:prop_types_1.default.string.isRequired,lineItem:prop_types_1.default.shape({name:prop_types_1.default.string.isRequired,imageUrl:prop_types_1.default.string})}).isRequired).isRequired,name:prop_types_1.default.string,children:prop_types_1.default.func,type:prop_types_1.default.oneOf(["select","radio"]),loader:prop_types_1.default.element,placeholder:prop_types_1.default.string,skuCode:prop_types_1.default.string};const VariantTemplate=props=>{const{id,variants,type,placeholder,options,skuCode,handleChange,handleCallback}=props,prs=(0,tslib_1.__rest)(props,["id","variants","type","placeholder","options","skuCode","handleChange","handleCallback"]),vars=(0,lodash_1.keys)(variants).map((v,k)=>{const checked=skuCode===v,label=options.length>0?options[k].label:variants[v].name;return type==="select"?(0,jsx_runtime_1.jsx)("option",Object.assign({"data-sku-id":variants[v].id,"data-label":label,value:variants[v].code},{children:label}),variants[v].id):(0,jsx_runtime_1.jsxs)(react_1.Fragment,{children:[(0,jsx_runtime_1.jsx)("input",Object.assign({id:id&&`${id}-${k}`,defaultChecked:checked,type:"radio",value:variants[v].code,onChange:e=>{const code=e.target.value;handleChange&&handleChange(code,variants[v].id),handleCallback&&handleCallback({code,label})}},prs),void 0),label]},variants[v].id)});return type==="select"?(0,jsx_runtime_1.jsxs)("select",Object.assign({id,title:"Variant selector",onChange:e=>{const v=e.target.value,i=e.target.selectedIndex,id2=e.target[i].dataset.skuId,label=e.target[i].dataset.label;handleChange&&handleChange(v,id2),handleCallback&&handleCallback({code:v,label})},value:skuCode||""},prs,{children:[(0,jsx_runtime_1.jsx)("option",Object.assign({disabled:!!skuCode},{children:placeholder}),void 0),vars]}),void 0):(0,jsx_runtime_1.jsx)(react_1.Fragment,{children:vars},void 0)};VariantTemplate.propTypes=exports.propTypes,exports.default=VariantTemplate;

package/lib/cjs/components/utils/getAllErrors.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),customMessages_1=(0,tslib_1.__importDefault)(require("../../utils/customMessages")),getAllErrors=params=>{const{allErrors,messages,field,props,lineItem,resource,returnHtml=!0}=params;return allErrors.map((v,k)=>{const objMsg=(0,customMessages_1.default)(messages,v),text=(objMsg==null?void 0:objMsg.message)||v.message||`${v.title} - ${v.detail}`;if(field){if(v.resource==="line_items"&&lineItem&&v.id===lineItem.id)return returnHtml?(0,jsx_runtime_1.jsx)("span",Object.assign({},props,{children:text}),k):text;if(field===v.field&&resource===v.resource)return returnHtml?(0,jsx_runtime_1.jsx)("span",Object.assign({},props,{children:text}),k):text}if(resource===v.resource&&!field)return returnHtml?(0,jsx_runtime_1.jsx)("span",Object.assign({},props,{children:text}),k):text})};exports.default=getAllErrors;