@commercelayer/react-components 4.0.0-alpha.12 → 4.0.0-alpha.14

package/lib/esm/components/skus/VariantsContainer.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    children: JSX.Element | JSX.Element[];
-    filters?: Record<string, any>;
-    skuCode?: string;
-}
-export declare function VariantsContainer(props: Props): JSX.Element;
-export default VariantsContainer;

package/lib/esm/components/skus/VariantsContainer.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useReducer,useContext}from"react";import variantReducer,{variantInitialState,unsetVariantState,setSkuCode,getVariants,setVariantSkuCodes}from"../../reducers/VariantReducer";import CommerceLayerContext from"../../context/CommerceLayerContext";import VariantsContext from"../../context/VariantsContext";import isEmpty from"lodash/isEmpty";import isEqual from"lodash/isEqual";import getCurrentItemKey from"../../utils/getCurrentItemKey";import ItemContext from"../../context/ItemContext";export function VariantsContainer(props){const{children,skuCode="",filters={}}=props,config=useContext(CommerceLayerContext);if(config.accessToken==null)throw new Error("Cannot use `VariantsContainer` outside of `CommerceLayer`");const{setItem,setItems,items,item:currentItem,setCustomLineItems,skuCode:itemSkuCode,setSkuCode:setItemSkuCode}=useContext(ItemContext),[state,dispatch]=useReducer(variantReducer,variantInitialState),sCode=getCurrentItemKey(currentItem)||skuCode||state.skuCode||itemSkuCode||"";useEffect(()=>{if(!isEmpty(items)&&!isEmpty(state.variants)&&!isEqual(items,state.variants)){const mergeItems={...items,...state.variants};setItems&&setItems(mergeItems)}return console.log("state.skuCodes",state.skuCodes),state.skuCodes.length>=1&&config.accessToken&&(dispatch({type:"setLoading",payload:{loading:!0}}),getVariants({config,state,dispatch,setItem,skuCode:sCode,filters})),()=>unsetVariantState(dispatch)},[config?.accessToken]);const variantValue={...state,skuCode:sCode,setSkuCode:(code,id,lineItem={})=>{!isEmpty(lineItem)&&setCustomLineItems&&setCustomLineItems({[code]:lineItem}),setSkuCode({code,id,config,setItem,dispatch,setItemSkuCode})},setSkuCodes:skuCodes=>setVariantSkuCodes({skuCodes,dispatch,setCustomLineItems})};return _jsx(VariantsContext.Provider,{value:variantValue,children})}export default VariantsContainer;

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

@@ -1,36 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react';
-import PropTypes from 'prop-types';
-import { BaseSelectorType } from '../../typings/index';
-import { VariantsObject, SetSkuCode } from '../../reducers/VariantReducer';
-import { VariantOption } from '../skus/VariantSelector';
-export declare const propTypes: {
-    variants: PropTypes.Validator<any>;
-    onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    options: PropTypes.Validator<NonNullable<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

@@ -1 +0,0 @@
-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??"radio"}-${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 console.log("vars",vars,variants),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})};export default VariantTemplate;

package/lib/esm/context/ItemContext.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { ItemState, Items, ItemQuantity, ItemOptions, ItemPrices, CustomLineItems } from '../reducers/ItemReducer';
-export interface InitItemContext extends Partial<ItemState> {
-    item: Items;
-    items: Items;
-    quantity: ItemQuantity;
-    option: ItemOptions;
-    prices: ItemPrices;
-    lineItems: CustomLineItems;
-}
-export declare const initialItemContext: InitItemContext;
-declare const ItemContext: import("react").Context<InitItemContext>;
-export default ItemContext;

package/lib/esm/context/ItemContext.js

@@ -1 +0,0 @@
-import{createContext}from"react";export const initialItemContext={item:{},items:{},quantity:{},option:{},prices:{},lineItems:{}};const ItemContext=createContext(initialItemContext);export default ItemContext;

package/lib/esm/context/SkuOptionChildrenContext.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { SkuOption } from '@commercelayer/sdk';
-export interface SkuOptionChildrenInitalState {
-    skuOption?: SkuOption | null;
-    skuCode: string;
-}
-declare const SkuOptionChildrenContext: import("react").Context<SkuOptionChildrenInitalState>;
-export default SkuOptionChildrenContext;

package/lib/esm/context/SkuOptionChildrenContext.js

@@ -1 +0,0 @@
-import{createContext}from"react";const initial={skuCode:""},SkuOptionChildrenContext=createContext(initial);export default SkuOptionChildrenContext;

package/lib/esm/context/SkuOptionsContext.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const SkuOptionsContext: import("react").Context<import("../reducers/SkuOptionsReducer").SkuOptionsState>;
-export default SkuOptionsContext;

package/lib/esm/context/SkuOptionsContext.js

@@ -1 +0,0 @@
-import{createContext}from"react";import{skuOptionsInitialState}from"../reducers/SkuOptionsReducer";const SkuOptionsContext=createContext(skuOptionsInitialState);export default SkuOptionsContext;

package/lib/esm/context/VariantsContext.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const VariantsContext: import("react").Context<import("../reducers/VariantReducer").VariantState>;
-export default VariantsContext;

package/lib/esm/context/VariantsContext.js

@@ -1 +0,0 @@
-import{createContext}from"react";import{variantInitialState}from"../reducers/VariantReducer";const VariantsContext=createContext(variantInitialState);export default VariantsContext;

package/lib/esm/reducers/ItemReducer.d.ts

@@ -1,69 +0,0 @@
-import { BaseUnsetState } from '../typings/index';
-import { Price } from '@commercelayer/sdk';
-import { Dispatch } from 'react';
-import { SkuInventory } from './AvailabilityReducer';
-export interface Items {
-    [skuCode: string]: SkuInventory;
-}
-export interface ItemPrices {
-    [skuCode: string]: Price;
-}
-export interface ItemQuantity {
-    [skuCode: string]: number;
-}
-export interface ItemOption {
-    [key: string]: {
-        skuOptionId: string;
-        options: {
-            [key: string]: string;
-        };
-    };
-}
-export interface ItemOptions {
-    [skuCode: string]: ItemOption;
-}
-export declare type CustomLineItem = {
-    name?: string;
-    imageUrl?: string | null;
-};
-export interface CustomLineItems {
-    [skuCode: string]: CustomLineItem;
-}
-declare type ItemParams = {
-    type: ItemActionType;
-    key: 'items' | 'item' | 'quantity' | 'option' | 'prices' | 'lineItem' | 'lineItems' | 'skuCode';
-};
-declare type DataType = Items | ItemQuantity | ItemOptions | ItemPrices | CustomLineItems | CustomLineItem | string;
-export interface SetItemState {
-    (data: DataType, params: ItemParams, dispatch: Dispatch<ItemAction>): void;
-}
-export declare const setItemState: SetItemState;
-export declare const unsetItemState: BaseUnsetState<ItemAction>;
-export declare type SetCustomLineItems = (lineItems: CustomLineItems) => void;
-export declare type SetCustomLineItem = (lineItem: CustomLineItem) => void;
-export interface ItemState {
-    skuCode?: string;
-    items?: Items;
-    item?: Items;
-    lineItems?: CustomLineItems;
-    lineItem?: CustomLineItem;
-    quantity?: ItemQuantity;
-    option?: ItemOptions;
-    prices?: ItemPrices;
-    setItems?: (items: Items) => void;
-    setItem?: (item: Items) => void;
-    setQuantity?: (quantity: ItemQuantity) => void;
-    setOption?: (option: ItemOptions) => void;
-    setPrices?: (prices: ItemPrices) => void;
-    setSkuCode?: (skuCode: string) => void;
-    setCustomLineItems: SetCustomLineItems;
-    setCustomLineItem?: SetCustomLineItem;
-}
-declare type ItemActionType = 'setItem' | 'setItems' | 'setQuantity' | 'setOption' | 'setPrices' | 'setCustomLineItems' | 'setCustomLineItem' | 'setSkuCode';
-export interface ItemAction {
-    type: ItemActionType;
-    payload: Partial<ItemState>;
-}
-export declare const itemInitialState: Partial<ItemState>;
-declare const itemReducer: (state: Partial<ItemState>, reducer: ItemAction) => Partial<ItemState>;
-export default itemReducer;

package/lib/esm/reducers/ItemReducer.js

@@ -1 +0,0 @@
-import baseReducer from"../utils/baseReducer";export const setItemState=(data,params,dispatch)=>{dispatch({type:params.type,payload:{[`${params.key}`]:data}})},unsetItemState=dispatch=>{dispatch({type:"setItem",payload:{item:{}}}),dispatch({type:"setItems",payload:{items:{}}}),dispatch({type:"setQuantity",payload:{quantity:{}}}),dispatch({type:"setOption",payload:{option:{}}}),dispatch({type:"setCustomLineItems",payload:{lineItems:{}}}),dispatch({type:"setCustomLineItem",payload:{lineItem:{}}})};const actionType=["setItem","setItems","setQuantity","setOption","setPrices","setCustomLineItems","setCustomLineItem","setSkuCode"];export const itemInitialState={items:{},item:{},quantity:{},option:{},prices:{},lineItems:{},lineItem:{},skuCode:""};const itemReducer=(state,reducer)=>baseReducer(state,reducer,actionType);export default itemReducer;

package/lib/esm/reducers/SkuOptionsReducer.d.ts

@@ -1,26 +0,0 @@
-import { Dispatch } from 'react';
-import { SkuOption } from '@commercelayer/sdk';
-import { BaseUnsetState } from '../typings/index';
-import { BaseError } from '../typings/errors';
-export interface SkuOptionsState {
-    skuCode?: string;
-    skuOptions?: SkuOption[];
-    errors?: BaseError[];
-}
-interface GetSkuOptionsParams {
-    dispatch: Dispatch<SkuOptionsAction>;
-    skuOptions?: SkuOption[];
-}
-export interface GetSkuOptions {
-    (params: GetSkuOptionsParams): void;
-}
-export declare const getSkuOptions: GetSkuOptions;
-export declare const unsetSkuOptionsState: BaseUnsetState<SkuOptionsAction>;
-export declare type SkuOptionsActionType = 'setSkuOptions' | 'setErrors';
-export interface SkuOptionsAction {
-    type: SkuOptionsActionType;
-    payload: SkuOptionsState;
-}
-export declare const skuOptionsInitialState: SkuOptionsState;
-declare const skuOptionsReducer: (state: SkuOptionsState, reducer: SkuOptionsAction) => SkuOptionsState;
-export default skuOptionsReducer;

package/lib/esm/reducers/SkuOptionsReducer.js

@@ -1 +0,0 @@
-import baseReducer from"../utils/baseReducer";export const getSkuOptions=async params=>{const{skuOptions,dispatch}=params;dispatch({type:"setSkuOptions",payload:{skuOptions}})},unsetSkuOptionsState=dispatch=>{dispatch({type:"setSkuOptions",payload:{skuOptions:[]}}),dispatch({type:"setErrors",payload:{errors:[]}})};const actionType=["setSkuOptions","setErrors"];export const skuOptionsInitialState={skuCode:"",skuOptions:[]};const skuOptionsReducer=(state,reducer)=>baseReducer(state,reducer,actionType);export default skuOptionsReducer;

package/lib/esm/reducers/VariantReducer.d.ts

@@ -1,64 +0,0 @@
-import { Sku } from '@commercelayer/sdk';
-import { VariantOption } from '../components/skus/VariantSelector';
-import { Dispatch } from 'react';
-import { CommerceLayerConfig } from '../context/CommerceLayerContext';
-import { Items, CustomLineItem, SetCustomLineItems } from './ItemReducer';
-import { BaseError } from '../typings/errors';
-interface SetSkuCodeVariantParams {
-    code: string;
-    id: string;
-    config: CommerceLayerConfig;
-    dispatch: Dispatch<VariantAction>;
-    setItem: ((item: Items) => void) | undefined;
-    setItemSkuCode?: ((skuCode: string) => void) | undefined;
-}
-export declare type SetSkuCodeVariant = (params: SetSkuCodeVariantParams) => void;
-interface SetVariantSkuCodesParams {
-    skuCodes: VariantOption[];
-    dispatch: Dispatch<VariantAction>;
-    setCustomLineItems?: SetCustomLineItems;
-}
-export declare type SetVariantSkuCodes = (params: SetVariantSkuCodesParams) => void;
-export interface VariantsObject {
-    [key: string]: Sku;
-}
-export declare type SetSkuCode = (code: string, id: string, lineItem?: CustomLineItem) => void;
-export interface VariantPayload {
-    loading?: boolean;
-    variants?: VariantsObject | Record<string, any>;
-    skuCodes?: string[];
-    skuCode?: string;
-    errors?: BaseError[];
-    currentSkuId?: string;
-    currentSkuInventory?: any;
-    currentQuantity?: number;
-    currentPrices?: Sku[];
-    setSkuCode?: SetSkuCode;
-    setSkuCodes?: (skuCodes: VariantOption[]) => void;
-}
-export interface VariantState extends VariantPayload {
-    skuCodes: string[];
-    variants: VariantsObject | Record<string, any>;
-}
-export interface VariantAction {
-    type: VariantActionType;
-    payload: VariantPayload;
-}
-export declare const setVariantSkuCodes: SetVariantSkuCodes;
-export declare type UnsetVariantState = (dispatch: Dispatch<VariantAction>) => void;
-export declare const setSkuCode: SetSkuCodeVariant;
-interface GetVariantsParams {
-    config: CommerceLayerConfig;
-    state: VariantState;
-    skuCode: string;
-    dispatch: Dispatch<VariantAction>;
-    filters: Record<string, any>;
-    setItem: ((item: Items) => void) | undefined;
-}
-export declare type GetVariants = (params: GetVariantsParams) => void;
-export declare const getVariants: GetVariants;
-export declare const unsetVariantState: UnsetVariantState;
-export declare const variantInitialState: VariantState;
-export declare type VariantActionType = 'setLoading' | 'setVariants' | 'setSkuCodes' | 'setSkuCode' | 'setCurrentSkuId' | 'setCurrentSkuInventory' | 'setCurrentPrices' | 'setErrors';
-declare const variantReducer: (state: VariantState, reducer: VariantAction) => VariantState;
-export default variantReducer;

package/lib/esm/reducers/VariantReducer.js

@@ -1 +0,0 @@
-import baseReducer from"../utils/baseReducer";import getSkus from"../utils/getSkus";import{isEmpty,has}from"lodash";import getSdk from"../utils/getSdk";export const setVariantSkuCodes=({skuCodes,dispatch,setCustomLineItems})=>{const lineItems={},sCodes=skuCodes.map(s=>(has(s,"lineItem")&&(lineItems[s.code]=s.lineItem),s.code));!isEmpty(lineItems)&&setCustomLineItems&&setCustomLineItems(lineItems),dispatch({type:"setSkuCodes",payload:{skuCodes:sCodes}})},setSkuCode=params=>{const{id,code,config,setItem,dispatch,setItemSkuCode}=params;id&&getSdk(config).skus.retrieve(id,{include:["sku_options"]}).then(sku=>{setItem&&setItem({[`${code}`]:sku}),setItemSkuCode&&setItemSkuCode(code)}).catch(errors=>{dispatch({type:"setErrors",payload:{errors}})})},getVariants=params=>{const{config,state,skuCode,dispatch,setItem,filters}=params;getSdk(config).skus.list({filters:{code_in:state.skuCodes.join(","),...filters}}).then(skus=>{const skusObj=getSkus(skus,state.skuCodes);skuCode&&setSkuCode({code:skusObj[skuCode].code,id:skusObj[skuCode].id,config,dispatch,setItem}),dispatch({type:"setVariants",payload:{variants:skusObj}}),dispatch({type:"setLoading",payload:{loading:!1}})}).catch(errors=>{dispatch({type:"setErrors",payload:{errors}})})},unsetVariantState=dispatch=>{dispatch({type:"setSkuCode",payload:{skuCode:""}}),dispatch({type:"setVariants",payload:{variants:{}}}),dispatch({type:"setLoading",payload:{loading:!1}})},variantInitialState={loading:!1,variants:{},skuCodes:[],skuCode:"",errors:[],currentSkuId:"",currentSkuInventory:{available:!1,quantity:0,levels:[]},currentQuantity:1,currentPrices:[]};const actionType=["setLoading","setVariants","setSkuCodes","setSkuCode","setCurrentSkuId","setCurrentSkuInventory","setCurrentPrices","setErrors"],variantReducer=(state,reducer)=>baseReducer(state,reducer,actionType);export default variantReducer;

package/lib/esm/utils/getCurrentItemKey.d.ts

@@ -1,6 +0,0 @@
-import { Items } from '../reducers/ItemReducer';
-export interface GetCurrentItemKey {
-    (item: Items): string;
-}
-declare const getCurrentItemKey: GetCurrentItemKey;
-export default getCurrentItemKey;

package/lib/esm/utils/getCurrentItemKey.js

@@ -1 +0,0 @@
-import first from"lodash/first";import keys from"lodash/keys";const getCurrentItemKey=item=>first(keys(item))||"";export default getCurrentItemKey;