@commercelayer/react-components 3.14.1 → 4.0.0-alpha.1

package/lib/esm/components/utils/GenericFieldComponent.d.ts

@@ -0,0 +1,42 @@
+import { InitialSkuContext } from '../../context/SkuChildrenContext';
+import { InitialStockTransferContext } from '../../context/StockTransferChildrenContext';
+import type { Customer, LineItem, Sku } from '@commercelayer/sdk';
+import { InitialLineItemContext } from '../../context/LineItemChildrenContext';
+import { Context } from 'react';
+import { InitialCustomerContext } from '../../context/CustomerContext';
+export declare type TResources = {
+    StockTransfer: LineItem & {
+        resource: 'stock_transfers';
+    };
+    Sku: Sku & {
+        resource: 'skus';
+    };
+    LineItem: LineItem & {
+        resource: 'line_items';
+    };
+    Customer: Customer & {
+        resource: 'customers';
+    };
+};
+export declare type TResourceKey = {
+    [K in keyof TResources]: K;
+};
+export declare type TGenericChildrenProps<E extends TResources[keyof TResources]> = Omit<Props<E>, 'children' | 'attribute' | 'context' | 'tagElement'> & {
+    attributeValue: E[keyof E];
+};
+declare type ResourceContext = {
+    stock_transfers: InitialStockTransferContext;
+    skus: InitialSkuContext;
+    line_items: InitialLineItemContext;
+    customers: InitialCustomerContext;
+};
+declare type GenericContext<K extends keyof ResourceContext> = Context<ResourceContext[K]>;
+declare type Props<E extends TResources[keyof TResources]> = {
+    children?: (props: TGenericChildrenProps<E>) => JSX.Element;
+    resource: E['resource'];
+    attribute: keyof E;
+    tagElement: keyof JSX.IntrinsicElements;
+    context: GenericContext<E['resource']>;
+};
+export default function GenericFieldComponent<R extends keyof TResources>(props: Props<TResources[R]>): JSX.Element;
+export {};

package/lib/esm/components/utils/GenericFieldComponent.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"./Parent";import{useContext}from"react";import{defaultImgUrl}from"../../utils/placeholderImages";export default function GenericFieldComponent(props){const{children,tagElement,attribute,context,...p}=props,resourceContext=useContext(context);let attributeValue="";const keysContext=Object.keys(resourceContext).filter(key=>key===p.resource);if(keysContext.length===1){const[keyResource]=keysContext;keyResource&&attribute&&(attributeValue=resourceContext[keyResource][attribute])}const Tag=tagElement||"span";if(Tag==="img"&&!children)return _jsx("img",{alt:"",src:attributeValue||defaultImgUrl,...p});const parentProps={attributeValue,tagElement,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx(Tag,{...p,children:attributeValue})}

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

@@ -0,0 +1,6 @@
+import { ForwardedRef, FunctionComponent } from 'react';
+export declare type ParentProps = {
+    parentRef?: ForwardedRef<any>;
+};
+declare const Parent: FunctionComponent<ParentProps>;
+export default Parent;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";const Parent=({children,...p})=>{const Child=children;return Child?_jsx(Child,{...p}):null};export default Parent;

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

@@ -0,0 +1,23 @@
+/// <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/esm/components/utils/PaymentCardsTemplate.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import{useContext}from"react";import PaymentMethodContext from"../../context/PaymentMethodContext";import PaymentSourceContext from"../../context/PaymentSourceContext";import getCardDetails from"../../utils/getCardDetails";export default function PaymentCardsTemplate({customerPayments,children,paymentResource}){const{setPaymentSource}=useContext(PaymentMethodContext),value={customerPayments:customerPayments.map(customerPayment=>{const attributes=customerPayment,card=getCardDetails({customerPayment,paymentType:paymentResource});return{...attributes,card,handleClick:async e=>{e.stopPropagation(),await setPaymentSource({paymentResource,customerPaymentSourceId:customerPayment.id})}}}),PaymentSourceProvider:PaymentSourceContext.Provider};return _jsx(Parent,{...value,children})}

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

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

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

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import PropTypes from"prop-types";const propTypes={formattedAmount:PropTypes.string,formattedCompare:PropTypes.string},defaultProps={formattedAmount:"",formattedCompare:""},PriceTemplate=props=>{const{showCompare,formattedCompare,compareClassName,className,formattedAmount,...p}=props;return delete p.skuCode,_jsxs(_Fragment,{children:[_jsx("span",{className,...p,children:formattedAmount}),showCompare&&_jsx("span",{className:compareClassName||"",...p,children:formattedCompare})]})};PriceTemplate.propTypes=propTypes,PriceTemplate.defaultProps=defaultProps;export default PriceTemplate;

package/lib/esm/components/utils/VariantTemplate.d.ts

@@ -0,0 +1,36 @@
+import { FunctionComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { BaseSelectorType } from '../../typings/index';
+import { VariantsObject, SetSkuCode } from '../../reducers/VariantReducer';
+import { VariantOption } from '../VariantSelector';
+export declare const propTypes: {
+    variants: PropTypes.Validator<any>;
+    onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    options: PropTypes.Validator<PropTypes.InferProps<{
+        label: PropTypes.Validator<string>;
+        code: PropTypes.Validator<string>;
+        lineItem: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            imageUrl: PropTypes.Requireable<string>;
+        }>>;
+    }>[]>;
+    name: PropTypes.Requireable<string>;
+    children: PropTypes.Requireable<(...args: any[]) => any>;
+    type: PropTypes.Requireable<BaseSelectorType>;
+    loader: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    placeholder: PropTypes.Requireable<string>;
+    skuCode: PropTypes.Requireable<string>;
+};
+export declare type VariantHandleCallback = (variant: VariantOption) => void;
+export declare type VariantTemplateProps = {
+    variants: VariantsObject | Record<string, any>;
+    handleChange?: SetSkuCode;
+    options: VariantOption[];
+    type?: BaseSelectorType;
+    loader?: ReactNode;
+    placeholder?: string;
+    skuCode?: string;
+    handleCallback?: VariantHandleCallback;
+} & JSX.IntrinsicElements['input'] & JSX.IntrinsicElements['select'];
+declare const VariantTemplate: FunctionComponent<VariantTemplateProps>;
+export default VariantTemplate;

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

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{Fragment}from"react";import PropTypes from"prop-types";export const propTypes={variants:PropTypes.any.isRequired,onChange:PropTypes.func,options:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string.isRequired,code:PropTypes.string.isRequired,lineItem:PropTypes.shape({name:PropTypes.string.isRequired,imageUrl:PropTypes.string})}).isRequired).isRequired,name:PropTypes.string,children:PropTypes.func,type:PropTypes.oneOf(["select","radio"]),loader:PropTypes.element,placeholder:PropTypes.string,skuCode:PropTypes.string};const VariantTemplate=props=>{const{id,variants,type,placeholder,options,skuCode,handleChange,handleCallback,...prs}=props,vars=Object.keys(variants).map((v,k)=>{const checked=skuCode===v,label=options.length>0?options[k]?.label:variants[v].name;return type==="select"?_jsx("option",{"data-sku-id":variants[v].id,"data-label":label,value:variants[v].code,children:label},variants[v].id):_jsxs(Fragment,{children:[_jsx("input",{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}),label]},variants[v].id)});return type==="select"?_jsxs("select",{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:[_jsx("option",{disabled:!!skuCode,children:placeholder}),vars]}):_jsx(_Fragment,{children:vars})};VariantTemplate.propTypes=propTypes;export default VariantTemplate;

package/lib/esm/components/utils/getAllErrors.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { LineItem } from '@commercelayer/sdk';
+import { BaseError, ResourceErrorType } from '../../typings/errors';
+export declare type AllErrorsParams = {
+    allErrors: BaseError[];
+    messages: BaseError[];
+    field?: string;
+    props: JSX.IntrinsicElements['span'];
+    lineItem?: LineItem;
+    resource?: ResourceErrorType;
+    returnHtml?: boolean;
+};
+export interface GetAllErrors {
+    <P extends AllErrorsParams>(params: P): ReactNode;
+}
+declare const getAllErrors: GetAllErrors;
+export default getAllErrors;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import customMessages from"../../utils/customMessages";const getAllErrors=params=>{const{allErrors,messages,field,props,lineItem,resource,returnHtml=!0}=params;return allErrors.map((v,k)=>{const objMsg=customMessages(messages,v);let text=v?.title&&!v.detail?.includes(v.title)?`${v.title} - ${v.detail}`:`${v?.detail||v.message}`;if(objMsg?.message&&(text=objMsg?.message),field){if(v.resource==="line_items"&&lineItem&&v.id===lineItem.id)return returnHtml?_jsx("span",{...props,children:text},k):text;if(field===v.field&&resource===v.resource)return returnHtml?_jsx("span",{...props,children:text},k):text}if(resource===v.resource&&!field)return returnHtml?_jsx("span",{...props,children:text},k):text}).filter(v=>v!==void 0)};export default getAllErrors;