@shopgate/engage/locations/components/FulfillmentPath/FulfillmentPath.js

Shopgate's ENGAGE library.

function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{useState,useCallback}from'react';import{Availability}from'@shopgate/engage/product';import{RadioGroup}from"../../../components";import{useFulfillmentState}from"../../locations.hooks";import{IN_STORE_PICKUP_BOPIS_LABEL,IN_STORE_PICKUP_ROPIS_LABEL,DIRECT_SHIP_LABEL,DIRECT_SHIP,ROPIS,BOPIS}from"../../constants";import{container,radioGroup}from"./FulfillmentPath.style";import{FulfillmentPathItem}from"./FulfillmentPathItem";/**
 * Renders the fulfillment path selector stage.
 * @returns {JSX}
 */export function FulfillmentPath(){var labelMapping=_defineProperty(_defineProperty(_defineProperty({},DIRECT_SHIP,DIRECT_SHIP_LABEL),ROPIS,IN_STORE_PICKUP_ROPIS_LABEL),BOPIS,IN_STORE_PICKUP_BOPIS_LABEL);var _useFulfillmentState=useFulfillmentState(),product=_useFulfillmentState.product,enabledFulfillmentMethods=_useFulfillmentState.enabledFulfillmentMethods,_useFulfillmentState$=_useFulfillmentState.meta,_useFulfillmentState$2=_useFulfillmentState$===void 0?{}:_useFulfillmentState$,_useFulfillmentState$3=_useFulfillmentState$2.cartItem,cartItem=_useFulfillmentState$3===void 0?undefined:_useFulfillmentState$3,changeFulfillment=_useFulfillmentState.changeFulfillment;var _ref=cartItem||{},_ref$fulfillment=_ref.fulfillment,fulfillment=_ref$fulfillment===void 0?{}:_ref$fulfillment,_ref$product=_ref.product,_ref$product2=_ref$product===void 0?{}:_ref$product,_ref$product2$fulfill=_ref$product2.fulfillmentMethods,cartItemFulfillmentMethods=_ref$product2$fulfill===void 0?[]:_ref$product2$fulfill;var _ref2=fulfillment||{},_ref2$method=_ref2.method,activeCartItemFulfillmentMethod=_ref2$method===void 0?DIRECT_SHIP:_ref2$method;var _useState=useState(labelMapping[activeCartItemFulfillmentMethod]),_useState2=_slicedToArray(_useState,2),selection=_useState2[0],setSelection=_useState2[1];var handleChange=useCallback(function(elementName){var method=Object.keys(labelMapping).find(function(key){return labelMapping[key]===elementName;});setSelection(method);changeFulfillment(method,cartItem);},[cartItem,changeFulfillment,labelMapping]);return React.createElement("div",{className:container},React.createElement(RadioGroup,{name:"cartItem.fulfillment_selector",value:selection,onChange:handleChange,className:radioGroup,isControlled:true,direction:"column"},enabledFulfillmentMethods.includes(DIRECT_SHIP)&&React.createElement(FulfillmentPathItem,{name:DIRECT_SHIP_LABEL,attributes:{disabled:!cartItemFulfillmentMethods.includes(DIRECT_SHIP)}},React.createElement(Availability,{productId:product.id,fulfillmentSelection:DIRECT_SHIP})),enabledFulfillmentMethods.includes(BOPIS)&&React.createElement(FulfillmentPathItem,{name:IN_STORE_PICKUP_BOPIS_LABEL,attributes:{disabled:!cartItemFulfillmentMethods.includes(BOPIS)}}),enabledFulfillmentMethods.includes(ROPIS)&&React.createElement(FulfillmentPathItem,{name:IN_STORE_PICKUP_ROPIS_LABEL,attributes:{disabled:!cartItemFulfillmentMethods.includes(ROPIS)}})));}