@commercelayer/react-components 3.14.0-beta.2 → 3.14.0

package/lib/components/OrderContainer.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useReducer,useContext,useMemo}from"react";import orderReducer,{createOrder,getApiOrder,setOrderErrors,setOrder,orderInitialState,updateOrder}from"../reducers/OrderReducer";import CommerceLayerContext from"../context/CommerceLayerContext";import OrderContext,{defaultOrderContext}from"../context/OrderContext";import components from"../config/components";import OrderStorageContext from"../context/OrderStorageContext";import compareObjAttribute from"../utils/compareObjAttribute";const propTypes=components.OrderContainer.propTypes,defaultProps=components.OrderContainer.defaultProps,displayName=components.OrderContainer.displayName,OrderContainer=props=>{const{orderId,children,metadata,attributes,fetchOrder}=props,[state,dispatch]=useReducer(orderReducer,orderInitialState),config=useContext(CommerceLayerContext),{persistKey,clearWhenPlaced,getLocalOrder,setLocalOrder,deleteLocalOrder}=useContext(OrderStorageContext);useEffect(()=>{var _a;const startRequest=Object.keys((state==null?void 0:state.includeLoaded)||{}).filter(key=>{var _a2;return((_a2=state==null?void 0:state.includeLoaded)===null||_a2===void 0?void 0:_a2[key])===!0});if(config.accessToken&&!state.loading){const localOrder=persistKey?getLocalOrder(persistKey):orderId;localOrder&&!state.order&&((_a=state.include)===null||_a===void 0?void 0:_a.length)===startRequest.length?getApiOrder({id:localOrder,dispatch,config,persistKey,clearWhenPlaced:!!(persistKey&&clearWhenPlaced),deleteLocalOrder,state}):(state==null?void 0:state.order)&&fetchOrder&&fetchOrder(state.order)}return()=>{var _a2,_b;!state.order&&state.loading&&(((_a2=state.include)===null||_a2===void 0?void 0:_a2.length)===0&&startRequest.length>0?dispatch({type:"setLoading",payload:{loading:!1}}):state.include&&((_b=state.include)===null||_b===void 0?void 0:_b.length)>0&&dispatch({type:"setIncludesResource",payload:{include:[]}}))}},[config.accessToken,state.includeLoaded,state.include,orderId,state.order,state.loading]),useEffect(()=>{if(state.orderId&&attributes&&state.order){const updateAttributes=compareObjAttribute({attributes,object:state.order});Object.keys(updateAttributes).length>0&&updateOrder({id:state.orderId,attributes:updateAttributes,dispatch,config,include:state.include,state})}},[attributes,state.orderId,state.order]);const orderValue=useMemo(()=>Object.assign(Object.assign({},state),{setOrder:order=>setOrder(order,dispatch),getOrder:id=>getApiOrder({id,dispatch,config,state}),setOrderErrors:errors=>setOrderErrors({dispatch,errors}),createOrder:()=>createOrder({persistKey,dispatch,config,state,orderMetadata:metadata,orderAttributes:attributes,setLocalOrder}),addToCart:values=>defaultOrderContext.addToCart(Object.assign(Object.assign({},values),{persistKey,dispatch,state,config,errors:state.errors,orderMetadata:metadata||{},orderAttributes:attributes,setLocalOrder})),saveAddressToCustomerAddressBook:args=>defaultOrderContext.saveAddressToCustomerAddressBook(Object.assign(Object.assign({},args),{dispatch})),setGiftCardOrCouponCode:({code,codeType})=>defaultOrderContext.setGiftCardOrCouponCode({code,codeType,dispatch,order:state.order,config,include:state.include,state}),removeGiftCardOrCouponCode:({codeType})=>defaultOrderContext.removeGiftCardOrCouponCode({codeType,dispatch,order:state.order,config,include:state.include,state}),addResourceToInclude:args=>defaultOrderContext.addResourceToInclude(Object.assign(Object.assign({},args),{dispatch,resourcesIncluded:state.include,resourceIncludedLoaded:state.includeLoaded})),updateOrder:async args=>await defaultOrderContext.updateOrder(Object.assign(Object.assign({},args),{dispatch,config,include:state.include,state}))}),[state,config.accessToken]);return _jsx(OrderContext.Provider,Object.assign({value:orderValue},{children}))};OrderContainer.propTypes=propTypes,OrderContainer.defaultProps=defaultProps,OrderContainer.displayName=displayName;export default OrderContainer;
+import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useReducer,useContext,useMemo,useState}from"react";import orderReducer,{createOrder,getApiOrder,setOrderErrors,setOrder,orderInitialState,updateOrder}from"../reducers/OrderReducer";import CommerceLayerContext from"../context/CommerceLayerContext";import OrderContext,{defaultOrderContext}from"../context/OrderContext";import components from"../config/components";import OrderStorageContext from"../context/OrderStorageContext";import compareObjAttribute from"../utils/compareObjAttribute";const propTypes=components.OrderContainer.propTypes,defaultProps=components.OrderContainer.defaultProps,displayName=components.OrderContainer.displayName,OrderContainer=props=>{const{orderId,children,metadata,attributes,fetchOrder}=props,[state,dispatch]=useReducer(orderReducer,orderInitialState),[lock,setLock]=useState(!1),config=useContext(CommerceLayerContext),{persistKey,clearWhenPlaced,getLocalOrder,setLocalOrder,deleteLocalOrder}=useContext(OrderStorageContext);useEffect(()=>{if(attributes&&(state==null?void 0:state.order)&&!lock){const updateAttributes=compareObjAttribute({attributes,object:state.order});Object.keys(updateAttributes).length>0&&(updateOrder({id:state.order.id,attributes:updateAttributes,dispatch,config,include:state.include,state}),setLock(!0))}return()=>{if(attributes&&(state==null?void 0:state.order)){const updateAttributes=compareObjAttribute({attributes,object:state.order});state.order&&Object.keys(updateAttributes).length===0&&setLock(!1)}}},[attributes,state==null?void 0:state.order,lock]),useEffect(()=>{var _a;const startRequest=Object.keys((state==null?void 0:state.includeLoaded)||{}).filter(key=>{var _a2;return((_a2=state==null?void 0:state.includeLoaded)===null||_a2===void 0?void 0:_a2[key])===!0});if(config.accessToken&&!state.loading){const localOrder=persistKey?getLocalOrder(persistKey):orderId;localOrder&&!state.order&&((_a=state.include)===null||_a===void 0?void 0:_a.length)===startRequest.length?getApiOrder({id:localOrder,dispatch,config,persistKey,clearWhenPlaced:!!(persistKey&&clearWhenPlaced),deleteLocalOrder,state}):(state==null?void 0:state.order)&&fetchOrder&&fetchOrder(state.order)}return()=>{var _a2,_b;!state.order&&state.loading&&(((_a2=state.include)===null||_a2===void 0?void 0:_a2.length)===0&&startRequest.length>0?dispatch({type:"setLoading",payload:{loading:!1}}):state.include&&((_b=state.include)===null||_b===void 0?void 0:_b.length)>0&&dispatch({type:"setIncludesResource",payload:{include:[]}}))}},[config.accessToken,state.includeLoaded,state.include,orderId,state.order,state.loading]);const orderValue=useMemo(()=>Object.assign(Object.assign({},state),{setOrder:order=>setOrder(order,dispatch),getOrder:id=>getApiOrder({id,dispatch,config,state}),setOrderErrors:errors=>setOrderErrors({dispatch,errors}),createOrder:()=>createOrder({persistKey,dispatch,config,state,orderMetadata:metadata,orderAttributes:attributes,setLocalOrder}),addToCart:values=>defaultOrderContext.addToCart(Object.assign(Object.assign({},values),{persistKey,dispatch,state,config,errors:state.errors,orderMetadata:metadata||{},orderAttributes:attributes,setLocalOrder})),saveAddressToCustomerAddressBook:args=>defaultOrderContext.saveAddressToCustomerAddressBook(Object.assign(Object.assign({},args),{dispatch})),setGiftCardOrCouponCode:({code,codeType})=>defaultOrderContext.setGiftCardOrCouponCode({code,codeType,dispatch,order:state.order,config,include:state.include,state}),removeGiftCardOrCouponCode:({codeType})=>defaultOrderContext.removeGiftCardOrCouponCode({codeType,dispatch,order:state.order,config,include:state.include,state}),addResourceToInclude:args=>defaultOrderContext.addResourceToInclude(Object.assign(Object.assign({},args),{dispatch,resourcesIncluded:state.include,resourceIncludedLoaded:state.includeLoaded})),updateOrder:async args=>await defaultOrderContext.updateOrder(Object.assign(Object.assign({},args),{dispatch,config,include:state.include,state}))}),[state,config.accessToken]);return _jsx(OrderContext.Provider,Object.assign({value:orderValue},{children}))};OrderContainer.propTypes=propTypes,OrderContainer.defaultProps=defaultProps,OrderContainer.displayName=displayName;export default OrderContainer;

package/lib/components/QuantitySelector.js

@@ -1 +1 @@
-import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import Parent from"./utils/Parent";import{isEmpty,has}from"lodash";import getCurrentItemKey from"../utils/getCurrentItemKey";import ItemContext from"../context/ItemContext";import components from"../config/components";import SkuListsContext from"../context/SkuListsContext";import SkuChildrenContext from"../context/SkuChildrenContext";const propTypes=components.QuantitySelector.propTypes,defaultProps=components.QuantitySelector.defaultProps,displayName=components.QuantitySelector.displayName,QuantitySelector=props=>{var _a,_b,_c;const{skuCode,skuListId,children,min=1,max}=props,p=__rest(props,["skuCode","skuListId","children","min","max"]),{item,setQuantity,items,quantity,prices,skuCode:itemSkuCode}=useContext(ItemContext),{sku}=useContext(SkuChildrenContext),{skuLists,listIds}=useContext(SkuListsContext),[value,setValue]=useState(min),[disabled,setDisabled]=useState(!!p.disabled),sCode=!isEmpty(items)&&skuCode?(_a=items[skuCode])===null||_a===void 0?void 0:_a.code:(sku==null?void 0:sku.code)||skuCode||getCurrentItemKey(item)||itemSkuCode,inventory=isEmpty(item)?50:(_c=(_b=item[sCode])===null||_b===void 0?void 0:_b.inventory)===null||_c===void 0?void 0:_c.quantity,maxInv=max||inventory;useEffect(()=>{if(setValue(min),(!prices[sCode]||!sCode)&&setDisabled(!0),skuListId&&setDisabled(!1),sCode){const qty=Number(min);setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${sCode}`]:qty})),!isEmpty(prices)&&has(prices,sCode)&&setDisabled(!1)}return()=>{setValue(min)}},[item,listIds,prices]);const handleChange=e=>{const qty=Number(e.target.value),valid=Number(qty)>=Number(min)&&Number(qty)<=Number(maxInv);setValue(qty),!isEmpty(skuLists)&&skuListId&&valid?setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${skuListId}`]:Number(qty)})):sCode&&valid&&setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${sCode}`]:Number(qty)}))},handleBlur=e=>{const qty=e.target.value;if(!(Number(qty)>=Number(min)&&Number(qty)<=Number(maxInv))){const resetVal=Number(qty)<Number(min)?min:maxInv;resetVal&&setValue(resetVal),!isEmpty(skuLists)&&skuListId?setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${skuListId}`]:Number(resetVal)})):setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${sCode}`]:Number(resetVal)}))}},parentProps=Object.assign({min,max:maxInv,disabled,handleChange,handleBlur,value},props);return children?_jsx(Parent,Object.assign({},parentProps,{children})):_jsx("input",Object.assign({type:"number",max:maxInv,min,value:value||"",disabled,onChange:handleChange,onBlur:handleBlur},p))};QuantitySelector.propTypes=propTypes,QuantitySelector.defaultProps=defaultProps,QuantitySelector.displayName=displayName;export default QuantitySelector;
+import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import Parent from"./utils/Parent";import has from"lodash/has";import isEmpty from"lodash/isEmpty";import getCurrentItemKey from"../utils/getCurrentItemKey";import ItemContext from"../context/ItemContext";import components from"../config/components";import SkuListsContext from"../context/SkuListsContext";import SkuChildrenContext from"../context/SkuChildrenContext";const propTypes=components.QuantitySelector.propTypes,defaultProps=components.QuantitySelector.defaultProps,displayName=components.QuantitySelector.displayName,QuantitySelector=props=>{var _a,_b,_c;const{skuCode,skuListId,children,min=1,max}=props,p=__rest(props,["skuCode","skuListId","children","min","max"]),{item,setQuantity,items,quantity,prices,skuCode:itemSkuCode}=useContext(ItemContext),{sku}=useContext(SkuChildrenContext),{skuLists,listIds}=useContext(SkuListsContext),defaultVal=(p==null?void 0:p.value)||min,[value,setValue]=useState(defaultVal),[disabled,setDisabled]=useState(!!p.disabled),sCode=!isEmpty(items)&&skuCode?(_a=items[skuCode])===null||_a===void 0?void 0:_a.code:(sku==null?void 0:sku.code)||skuCode||getCurrentItemKey(item)||itemSkuCode,inventory=isEmpty(item)?50:(_c=(_b=item[sCode])===null||_b===void 0?void 0:_b.inventory)===null||_c===void 0?void 0:_c.quantity,maxInv=max||inventory;useEffect(()=>{if(setValue(defaultVal),(!prices[sCode]||!sCode)&&setDisabled(!0),skuListId&&setDisabled(!1),sCode&&!quantity[sCode]){const qty=Number(defaultVal);setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${sCode}`]:qty})),!isEmpty(prices)&&has(prices,sCode)&&setDisabled(!1)}return()=>{setValue(defaultVal)}},[item,listIds,prices,quantity]);const handleChange=e=>{const qty=Number(e.target.value),valid=Number(qty)>=Number(min)&&Number(qty)<=Number(maxInv);setValue(qty),!isEmpty(skuLists)&&skuListId&&valid?setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${skuListId}`]:Number(qty)})):sCode&&valid&&setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${sCode}`]:Number(qty)}))},handleBlur=e=>{const qty=e.target.value;if(!(Number(qty)>=Number(min)&&Number(qty)<=Number(maxInv))){const resetVal=Number(qty)<Number(min)?min:maxInv;resetVal&&setValue(resetVal),!isEmpty(skuLists)&&skuListId?setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${skuListId}`]:Number(resetVal)})):setQuantity&&setQuantity(Object.assign(Object.assign({},quantity),{[`${sCode}`]:Number(resetVal)}))}},parentProps=Object.assign({min,max:maxInv,disabled,handleChange,handleBlur,value},props);return children?_jsx(Parent,Object.assign({},parentProps,{children})):_jsx("input",Object.assign({type:"number",max:maxInv,min,value:value||"",disabled,onChange:handleChange,onBlur:handleBlur},p))};QuantitySelector.propTypes=propTypes,QuantitySelector.defaultProps=defaultProps,QuantitySelector.displayName=displayName;export default QuantitySelector;

package/lib/components/SkuField.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ConditionalElement } from '../typings/index';
-import { TResources } from './utils/GenericFieldComponent';
-declare type SkuFieldChildrenProps = Omit<Props, 'children' | 'attribute' | 'element'>;
+import { TGenericChildrenProps, TResources } from './utils/GenericFieldComponent';
+declare type SkuFieldChildrenProps = TGenericChildrenProps<TResources['Sku']>;
 declare type TCondition = ConditionalElement<Exclude<TResources['Sku'], 'resource'>>;
 declare type Props = {
     children?: (props: SkuFieldChildrenProps) => JSX.Element;

package/lib/components/StockTransferField.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ConditionalElement } from '../typings/index';
-import { TResources } from './utils/GenericFieldComponent';
-declare type StockTransferFieldChildrenProps = Omit<Props, 'children' | 'attribute' | 'element'>;
+import { TGenericChildrenProps, TResources } from './utils/GenericFieldComponent';
+declare type StockTransferFieldChildrenProps = TGenericChildrenProps<TResources['StockTransfer']>;
 declare type TCondition = ConditionalElement<Exclude<TResources['StockTransfer'], 'resource'>>;
 declare type Props = {
     children?: (props: StockTransferFieldChildrenProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { InitialSkuContext } from '../../context/SkuChildrenContext';
 import { InitialStockTransferContext } from '../../context/StockTransferChildrenContext';
-import { LineItem, Sku } from '@commercelayer/sdk';
+import type { LineItem, Sku } from '@commercelayer/sdk';
 import { InitialLineItemContext } from '../../context/LineItemChildrenContext';
 import { Context } from 'react';
 export declare type TResources = {
@@ -17,8 +17,8 @@ export declare type TResources = {
 export declare type TResourceKey = {
     [K in keyof TResources]: K;
 };
-declare type ChildrenProps<E extends TResources[keyof TResources]> = Omit<Props<E>, 'children' | 'attribute'> & {
-    element: E[keyof E];
+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;
@@ -27,7 +27,7 @@ declare type ResourceContext = {
 };
 declare type GenericContext<K extends keyof ResourceContext> = Context<ResourceContext[K]>;
 declare type Props<E extends TResources[keyof TResources]> = {
-    children?: (props: ChildrenProps<E>) => JSX.Element;
+    children?: (props: TGenericChildrenProps<E>) => JSX.Element;
     resource: E['resource'];
     attribute: keyof E;
     tagElement: keyof JSX.IntrinsicElements;

package/lib/components/utils/GenericFieldComponent.js

@@ -1 +1 @@
-import{__rest}from"tslib";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}=props,p=__rest(props,["children","tagElement","attribute","context"]),resourceContext=useContext(context);let element;for(const key in resourceContext)Object.prototype.hasOwnProperty.call(resourceContext,key)&&(element=resourceContext[key][attribute]);const Tag=tagElement||"span";if(Tag==="img"&&!children)return _jsx("img",Object.assign({alt:"",src:element||defaultImgUrl},p));const parentProps=Object.assign({element,tagElement},p);return children?_jsx(Parent,Object.assign({},parentProps,{children})):_jsx(Tag,Object.assign({},p,{children:element}))}
+import{__rest}from"tslib";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}=props,p=__rest(props,["children","tagElement","attribute","context"]),resourceContext=useContext(context);let attributeValue;for(const key in resourceContext)Object.prototype.hasOwnProperty.call(resourceContext,key)&&(attributeValue=resourceContext[key][attribute]);const Tag=tagElement||"span";if(Tag==="img"&&!children)return _jsx("img",Object.assign({alt:"",src:attributeValue||defaultImgUrl},p));const parentProps=Object.assign({attributeValue,tagElement},p);return children?_jsx(Parent,Object.assign({},parentProps,{children})):_jsx(Tag,Object.assign({},p,{children:attributeValue}))}

package/lib/utils/compareObjAttribute.js

@@ -1 +1 @@
-export default function compareObjAttribute({attributes,object}){const returnObj={};return Object.keys(object).forEach(v=>{const element=attributes[v],compare=object[v];typeof element=="object"&&element&&JSON.stringify(element)!==JSON.stringify(compare)&&(returnObj[v]=element),typeof element!="object"&&element&&element!==compare&&(returnObj[v]=element)}),returnObj}
+function sortObj(obj){return Object.keys(obj).sort().reduce((result,key)=>(result[key]=obj[key],result),{})}export default function compareObjAttribute({attributes,object}){const returnObj={};return Object.keys(object).forEach(v=>{const element=attributes[v],compare=object[v];if(typeof element=="object"&&element){const elementSorted=sortObj(element),compareSorted=sortObj(compare);JSON.stringify(elementSorted)!==JSON.stringify(compareSorted)&&(returnObj[v]=element)}typeof element!="object"&&element&&element!==compare&&(returnObj[v]=element)}),returnObj}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "3.14.0-beta.2",
+  "version": "3.14.0",
   "description": "The Official Commerce Layer React Components",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",