@shopgate/engage 7.29.1-beta.1 → 7.29.1-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cart/cart.context.js +18 -1
- package/cart/cart.hooks.js +5 -3
- package/cart/cart.types.js +35 -1
- package/cart/components/CartItem/CartItem.js +3 -1
- package/cart/components/CartItem/CartItemCoupon.connector.js +8 -2
- package/cart/components/CartItem/CartItemCoupon.js +26 -18
- package/cart/components/CartItem/CartItemCoupon.types.js +15 -0
- package/cart/components/CartItem/CartItemCouponLayout.js +9 -3
- package/cart/components/CartItem/CartItemCouponPrice.js +8 -2
- package/cart/components/CartItem/CartItemProduct.js +0 -1
- package/cart/components/CartItem/CartItemProductLayoutWide.js +0 -1
- package/cart/components/CartItem/CartItemProductLayoutWide.style.js +1 -1
- package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.js +1 -2
- package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.style.js +1 -1
- package/cart/components/CartItem/CartItemProductLayoutWideOrderDetails.js +1 -1
- package/cart/components/CartItem/CartItemProductLayoutWideRemoveItem.js +1 -2
- package/cart/components/CartItem/CartItemProductOrderDetails.js +1 -1
- package/cart/components/CartItem/CartItemProductPriceCaption.js +1 -1
- package/cart/components/CartItem/CartItemProductPriceList.js +4 -1
- package/cart/components/CartItem/CartItemProductPriceListPromotion.js +3 -1
- package/cart/components/CartItem/CartItemProductProvider.connector.js +15 -3
- package/cart/components/CartItem/CartItemProductProvider.js +10 -4
- package/cart/components/CartItem/CartItemProductProvider.types.js +27 -1
- package/cart/components/CartItem/CartItemProvider.js +12 -3
- package/cart/components/CartItem/CartItemQuantityPicker.js +25 -24
- package/cart/components/CartItem/CartItemSubstitution.js +3 -1
- package/cart/components/CartItems/CartItemCard.js +8 -3
- package/cart/components/CartItems/CartItemCardReservation.js +4 -3
- package/cart/components/CartItems/CartItemCardReservationAccordion.js +5 -4
- package/cart/components/CartItems/CartItemCardReservationLabel.js +4 -4
- package/cart/components/CartItems/CartItemGroup.js +7 -3
- package/cart/components/CartItems/CartItemGroupReservation.js +4 -3
- package/cart/components/CartItems/CartItemGroupReservationLabel.js +4 -4
- package/cart/components/CartItems/CartItems.js +13 -3
- package/cart/components/CartItems/CartItemsHeaderWide.js +10 -3
- package/cart/components/CartItems/CartItemsHeaderWide.style.js +1 -1
- package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.js +3 -2
- package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.style.js +1 -1
- package/cart/components/PaymentBar/PaymentBarCheckoutButton.js +1 -1
- package/cart/components/PaymentBar/PaymentBarDiscounts.js +6 -2
- package/cart/components/PaymentBar/PaymentBarGrandTotal.js +8 -3
- package/cart/components/PaymentBar/PaymentBarReserveButton.js +5 -4
- package/cart/components/PaymentBar/PaymentBarShippingCost.js +8 -3
- package/cart/components/PaymentBar/PaymentBarSubTotal.js +9 -3
- package/cart/components/PaymentBar/PaymentBarTax.js +7 -3
- package/cart/index.js +2 -1
- package/checkout/paymentMethods/stripe/StripeProvider.js +6 -3
- package/checkout/providers/CheckoutProvider.js +41 -10
- package/components/SideNavigation/SideNavigation.js +7 -3
- package/components/SideNavigation/SideNavigationCategories.js +9 -4
- package/components/SideNavigation/SideNavigationCategories.style.js +1 -1
- package/components/SideNavigation/SideNavigationCategoriesItem.js +10 -3
- package/components/SideNavigation/SideNavigationCategoriesItem.style.js +1 -1
- package/components/SideNavigation/SideNavigationCategoriesItemChildren.js +6 -3
- package/components/SideNavigation/SideNavigationContent.js +5 -2
- package/components/SideNavigation/SideNavigationContent.style.js +1 -1
- package/components/SideNavigation/SideNavigationItem.js +14 -4
- package/components/SideNavigation/SideNavigationLinksLegal.js +5 -4
- package/components/SideNavigation/SideNavigationLinksQuicklinks.js +4 -3
- package/components/SideNavigation/SideNavigationNestedItem.js +8 -2
- package/components/SideNavigation/SideNavigationProvider.js +12 -3
- package/core/config/config.types.js +15 -0
- package/core/hooks/useAsyncMemo.js +1 -1
- package/i18n/countries.hooks.js +5 -5
- package/locations/action-creators/setUserSearchCountryCode.js +11 -4
- package/locations/action-creators/setUserSearchPostalCode.js +11 -4
- package/locations/components/Cart/CartChangeFulfillmentMethod.connector.js +4 -1
- package/locations/components/Cart/CartChangeFulfillmentMethod.js +10 -7
- package/locations/components/Cart/CartChangeFulfillmentMethod.types.js +10 -0
- package/locations/components/Cart/CartContextMenuChangeFulfillment.js +9 -4
- package/locations/components/Cart/CartContextMenuItemChangeLocation.js +7 -6
- package/locations/components/Cart/CartItemProductChangeLocation.connector.js +5 -2
- package/locations/components/Cart/CartItemProductChangeLocation.js +12 -9
- package/locations/components/Cart/CartItemProductChangeLocation.types.js +9 -0
- package/locations/components/ChangeLocationButton/ChangeLocationButton.js +6 -3
- package/locations/components/FulfillmentPath/FulfillmentPathItem.js +6 -4
- package/locations/components/FulfillmentSelector/FulfillmentSelector.connector.js +20 -6
- package/locations/components/FulfillmentSelector/FulfillmentSelector.context.js +2 -1
- package/locations/components/FulfillmentSelector/FulfillmentSelector.hooks.js +3 -2
- package/locations/components/FulfillmentSelector/FulfillmentSelector.js +8 -17
- package/locations/components/FulfillmentSelector/FulfillmentSelector.style.js +1 -1
- package/locations/components/FulfillmentSelector/FulfillmentSelector.types.js +57 -1
- package/locations/components/FulfillmentSelector/FulfillmentSelectorAddToCart.js +5 -8
- package/locations/components/FulfillmentSelector/FulfillmentSelectorBOPIS.js +3 -3
- package/locations/components/FulfillmentSelector/FulfillmentSelectorDirectShip.js +2 -3
- package/locations/components/FulfillmentSelector/FulfillmentSelectorHeader.js +3 -3
- package/locations/components/FulfillmentSelector/FulfillmentSelectorHeader.style.js +1 -1
- package/locations/components/FulfillmentSelector/FulfillmentSelectorItem.js +9 -5
- package/locations/components/FulfillmentSelector/FulfillmentSelectorItem.style.js +1 -1
- package/locations/components/ReserveForm/ReserveForm.js +6 -5
- package/locations/components/ReserveForm/ReserveForm.style.js +1 -1
- package/locations/components/ReserveForm/ReserveFormPhone.connector.js +6 -2
- package/locations/components/ReserveForm/ReserveFormPhone.js +8 -3
- package/locations/components/ReserveForm/ReserveFormPhone.types.js +11 -0
- package/locations/components/StoreFinder/Store.context.js +3 -1
- package/locations/components/StoreFinder/StoreFinderLocation.js +1 -1
- package/locations/components/StoreList/Store.context.js +3 -1
- package/locations/index.js +1 -1
- package/locations/locations.context.js +32 -1
- package/locations/locations.types.js +130 -1
- package/locations/providers/FulfillmentProvider.connector.js +7 -3
- package/locations/providers/FulfillmentProvider.js +38 -27
- package/locations/providers/FulfillmentProvider.types.js +42 -1
- package/locations/providers/StoreFinderProvider.js +1 -1
- package/locations/reducers/index.js +3 -1
- package/locations/reducers/userFormInput.js +7 -7
- package/locations/selectors/index.js +1 -1
- package/package.json +7 -7
- package/page/helpers/index.d.ts +14 -0
- package/page/helpers/index.js +9 -1
- package/page/widgets/Video/Video.js +4 -0
- package/page/widgets/Video/hooks.js +14 -0
- package/page/widgets/Video/index.js +1 -0
- package/page/widgets/index.js +1 -1
- package/page/widgets/widgets.json +3 -0
- package/product/product.types.js +32 -0
- package/registration/hooks/index.js +1 -1
- package/registration/providers/RegistrationProvider.js +12 -2
- package/types.js +0 -0
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import CartItemCardReservation from"./CartItemCardReservation";import{withBorder}from"./CartItemCard.style";/**
|
|
2
2
|
* Renders the cart items.
|
|
3
3
|
* @param {Object} props The component props.
|
|
4
|
-
* @
|
|
5
|
-
|
|
4
|
+
* @param {React.ReactNode} props.children The child components.
|
|
5
|
+
* @param {string|null} [props.fulfillmentLocationId] The fulfillment location ID.
|
|
6
|
+
* @param {boolean} [props.multiLineReservation=false] Whether multi-line reservation is enabled.
|
|
7
|
+
* @param {string|null} [props.fulfillmentMethod] The fulfillment method.
|
|
8
|
+
* @param {boolean} [props.hasMessages=false] Whether the cart item has messages.
|
|
9
|
+
* @returns {JSX.Element} The rendered component.
|
|
10
|
+
*/export var CartItemCard=function CartItemCard(_ref){var children=_ref.children,fulfillmentLocationId=_ref.fulfillmentLocationId,multiLineReservation=_ref.multiLineReservation,fulfillmentMethod=_ref.fulfillmentMethod,hasMessages=_ref.hasMessages;if(!multiLineReservation){return children;}return React.createElement(React.Fragment,null,React.createElement("ul",{className:fulfillmentLocationId&&!hasMessages?withBorder:null},children),!!fulfillmentLocationId&&React.createElement(CartItemCardReservation,{locationId:fulfillmentLocationId,fulfillmentMethod:fulfillmentMethod}));};CartItemCard.defaultProps={fulfillmentLocationId:null,multiLineReservation:false,fulfillmentMethod:null,hasMessages:false};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import _isEmpty from"lodash/isEmpty";import _every from"lodash/every";import
|
|
1
|
+
import _isEmpty from"lodash/isEmpty";import _every from"lodash/every";import React from'react';import PropTypes from'prop-types';import{ResponsiveContainer}from'@shopgate/engage/components';import{useCartItem}from"../CartItem";import{CartItemCardReservationLabel}from"./CartItemCardReservationLabel";import connect from"./CartItem.connector";import{CartItemCardReservationAccordion}from"./CartItemCardReservationAccordion";import{accordionToggle}from"./CartItemCard.style";// eslint-disable-next-line max-len
|
|
2
|
+
/** @typedef {import('@shopgate/engage/locations/locations.types').OptionalLocationAware} OptionalLocationAware */ /**
|
|
2
3
|
* Renders the cart item card reservation block,
|
|
3
|
-
* @param {
|
|
4
|
+
* @param {OptionalLocationAware} props The component props.
|
|
4
5
|
* @returns {JSX.Element}
|
|
5
|
-
*/function CartItemCardReservation(_ref){var location=_ref.location,fulfillmentMethod=_ref.fulfillmentMethod;var _useCartItem=useCartItem(),isOrderDetails=_useCartItem.isOrderDetails;if(!location){return null;}var operationHours=location.operationHours,_location$address=location.address,_location$address2=_location$address===void 0?{}:_location$address,phoneNumber=_location$address2.phoneNumber;if((!operationHours||_every(operationHours,_isEmpty))&&!phoneNumber&&(!location.address||!location.address.street)){return React.createElement("div",{className:accordionToggle},React.createElement(CartItemCardReservationLabel,{location:location,fulfillmentMethod:fulfillmentMethod}));}return React.createElement(React.Fragment,null,React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},!isOrderDetails&&React.createElement(CartItemCardReservationAccordion,{openWithChevron:true,location:location,fulfillmentMethod:fulfillmentMethod,operationHours:operationHours})),React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"<=xs"},!isOrderDetails&&React.createElement(CartItemCardReservationAccordion,{location:location,fulfillmentMethod:fulfillmentMethod,operationHours:operationHours})));}export default connect(CartItemCardReservation);
|
|
6
|
+
*/var CartItemCardReservation=function CartItemCardReservation(_ref){var location=_ref.location,fulfillmentMethod=_ref.fulfillmentMethod;var _useCartItem=useCartItem(),isOrderDetails=_useCartItem.isOrderDetails;if(!location){return null;}var operationHours=location.operationHours,_location$address=location.address,_location$address2=_location$address===void 0?{}:_location$address,phoneNumber=_location$address2.phoneNumber;if((!operationHours||_every(operationHours,_isEmpty))&&!phoneNumber&&(!location.address||!location.address.street)){return React.createElement("div",{className:accordionToggle},React.createElement(CartItemCardReservationLabel,{location:location,fulfillmentMethod:fulfillmentMethod}));}return React.createElement(React.Fragment,null,React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},!isOrderDetails&&React.createElement(CartItemCardReservationAccordion,{openWithChevron:true,location:location,fulfillmentMethod:fulfillmentMethod,operationHours:operationHours})),React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"<=xs"},!isOrderDetails&&React.createElement(CartItemCardReservationAccordion,{location:location,fulfillmentMethod:fulfillmentMethod,operationHours:operationHours})));};CartItemCardReservation.defaultProps={location:null,fulfillmentMethod:null};export default connect(CartItemCardReservation);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React from'react';import{Accordion}from'@shopgate/engage/components';import{StoreAddress,StoreOpeningHours}from'@shopgate/engage/locations';import{CartItemCardReservationLabel}from"./CartItemCardReservationLabel";import{accordionToggle,accordionContent,locationAddress,locationHours}from"./CartItemCard.style"
|
|
2
|
-
|
|
3
|
-
* @
|
|
4
|
-
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{Accordion}from'@shopgate/engage/components';import{StoreAddress,StoreOpeningHours}from'@shopgate/engage/locations';import{CartItemCardReservationLabel}from"./CartItemCardReservationLabel";import{accordionToggle,accordionContent,locationAddress,locationHours}from"./CartItemCard.style";// eslint-disable-next-line max-len
|
|
2
|
+
/** @typedef {import('@shopgate/engage/locations/locations.types').OptionalLocationAware} OptionalLocationAware */ /**
|
|
3
|
+
* @param {OptionalLocationAware} props The component props.
|
|
4
|
+
* @returns {JSX.Element}
|
|
5
|
+
*/var CartItemCardReservationAccordion=function CartItemCardReservationAccordion(_ref){var openWithChevron=_ref.openWithChevron,location=_ref.location,fulfillmentMethod=_ref.fulfillmentMethod,operationHours=_ref.operationHours;return React.createElement(Accordion,{className:accordionToggle,openWithChevron:openWithChevron,renderLabel:function renderLabel(){return React.createElement(CartItemCardReservationLabel,{location:location,fulfillmentMethod:fulfillmentMethod});}},React.createElement("div",{className:accordionContent},React.createElement("div",{className:locationAddress},React.createElement(StoreAddress,{address:location.address,pure:true})),operationHours&&React.createElement("div",{className:locationHours},React.createElement(StoreOpeningHours,{hours:operationHours,pure:true}))));};CartItemCardReservationAccordion.defaultProps={openWithChevron:false,location:null,fulfillmentMethod:null,operationHours:null};export{CartItemCardReservationAccordion};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import{LocationIcon,ResponsiveContainer}from'@shopgate/engage/components';import{BOPIS,CartItemProductChangeLocation}from'@shopgate/engage/locations';import{useCartItem}from"../CartItem";import CartItemCardReservationLabelChangeStore from"./CartItemCardReservationLabelChangeStore";import{address,addressIcon,titles,name,method}from"./CartItemCard.style";/** @typedef {import('@shopgate/engage/locations/locations.types').LocationAware} LocationAware */ /**
|
|
2
2
|
* Renders the cart reservation card label.
|
|
3
|
-
* @param {
|
|
4
|
-
* @returns {JSX}
|
|
5
|
-
*/export function CartItemCardReservationLabel(_ref){var location=_ref.location,fulfillmentMethod=_ref.fulfillmentMethod;var _useCartItem=useCartItem(),cartItem=_useCartItem.cartItem,isEditable=_useCartItem.isEditable,registerFulfillmentAction=_useCartItem.registerFulfillmentAction;if(!location){return null;}var suffix=fulfillmentMethod===BOPIS?'bopis':'ropis';return React.createElement("div",{className:address},React.createElement("div",{className:addressIcon},React.createElement(LocationIcon,null)),React.createElement("div",{className:titles},React.createElement("div",{className:name},location.name),isEditable&&React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(CartItemCardReservationLabelChangeStore,null),React.createElement(CartItemProductChangeLocation,{cartItem:cartItem,registerAction:registerFulfillmentAction})),React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"<=xs"},React.createElement("div",{className:method},i18n.text("locations.method.".concat(suffix))))));}
|
|
3
|
+
* @param {LocationAware} props The component props.
|
|
4
|
+
* @returns {JSX.Element|null}
|
|
5
|
+
*/export function CartItemCardReservationLabel(_ref){var location=_ref.location,fulfillmentMethod=_ref.fulfillmentMethod;var _useCartItem=useCartItem(),cartItem=_useCartItem.cartItem,isEditable=_useCartItem.isEditable,registerFulfillmentAction=_useCartItem.registerFulfillmentAction;if(!location){return null;}var suffix=fulfillmentMethod===BOPIS?'bopis':'ropis';return React.createElement("div",{className:address},React.createElement("div",{className:addressIcon},React.createElement(LocationIcon,null)),React.createElement("div",{className:titles},React.createElement("div",{className:name},location.name),isEditable&&React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(CartItemCardReservationLabelChangeStore,null),React.createElement(CartItemProductChangeLocation,{cartItem:cartItem,registerAction:registerFulfillmentAction})),React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"<=xs"},React.createElement("div",{className:method},i18n.text("locations.method.".concat(suffix))))));}export default CartItemCardReservationLabel;
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
import{hot}from'react-hot-loader/root';import
|
|
1
|
+
import{hot}from'react-hot-loader/root';import React from'react';import PropTypes from'prop-types';import CartItemGroupReservation from"./CartItemGroupReservation";/**
|
|
2
2
|
* Renders the product group.
|
|
3
3
|
* @param {Object} props The component props.
|
|
4
|
-
* @
|
|
5
|
-
|
|
4
|
+
* @param {React.ReactNode} props.children The child components.
|
|
5
|
+
* @param {string|null} [props.fulfillmentLocationId] The fulfillment location ID.
|
|
6
|
+
* @param {boolean} [props.multiLineReservation=false] Whether multi-line reservation is enabled.
|
|
7
|
+
* @param {string|null} [props.fulfillmentMethod] The fulfillment method.
|
|
8
|
+
* @returns {JSX.Element} The rendered component.
|
|
9
|
+
*/var CartItemGroup=function CartItemGroup(_ref){var children=_ref.children,fulfillmentLocationId=_ref.fulfillmentLocationId,multiLineReservation=_ref.multiLineReservation,fulfillmentMethod=_ref.fulfillmentMethod;if(!multiLineReservation){return children;}return React.createElement(React.Fragment,null,!!fulfillmentLocationId&&React.createElement(CartItemGroupReservation,{locationId:fulfillmentLocationId,fulfillmentMethod:fulfillmentMethod}),children);};CartItemGroup.defaultProps={fulfillmentLocationId:null,multiLineReservation:false,fulfillmentMethod:null};export default hot(CartItemGroup);
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import _isEmpty from"lodash/isEmpty";import _every from"lodash/every";import React from'react';import CardListItem from'@shopgate/pwa-ui-shared/CardList/components/Item';import{Accordion}from'@shopgate/engage/components';import{StoreOpeningHours,StorePhoneNumber}from'@shopgate/engage/locations';import{CartItemGroupReservationLabel}from"./CartItemGroupReservationLabel";import connect from"./CartItem.connector";import{accordionToggle,addressDetails,simpleLabel}from"./CartItemGroup.style"
|
|
1
|
+
import _isEmpty from"lodash/isEmpty";import _every from"lodash/every";import React from'react';import PropTypes from'prop-types';import CardListItem from'@shopgate/pwa-ui-shared/CardList/components/Item';import{Accordion}from'@shopgate/engage/components';import{StoreOpeningHours,StorePhoneNumber}from'@shopgate/engage/locations';import{CartItemGroupReservationLabel}from"./CartItemGroupReservationLabel";import connect from"./CartItem.connector";import{accordionToggle,addressDetails,simpleLabel}from"./CartItemGroup.style";// eslint-disable-next-line max-len
|
|
2
|
+
/** @typedef {import('@shopgate/engage/locations/locations.types').OptionalLocationAware} OptionalLocationAware */ /**
|
|
2
3
|
* Renders the product group.
|
|
3
|
-
* @param {
|
|
4
|
-
* @returns {JSX.Element}
|
|
4
|
+
* @param {OptionalLocationAware} props The component props.
|
|
5
|
+
* @returns {JSX.Element|null}
|
|
5
6
|
*/function CartItemGroupReservation(_ref){var location=_ref.location,fulfillmentMethod=_ref.fulfillmentMethod;if(!location){return null;}var operationHours=location.operationHours,_location$address=location.address,_location$address2=_location$address===void 0?{}:_location$address,phoneNumber=_location$address2.phoneNumber;if((!operationHours||_every(operationHours,_isEmpty))&&!phoneNumber){return React.createElement(CardListItem,{className:simpleLabel.toString()},React.createElement(CartItemGroupReservationLabel,{location:location,fulfillmentMethod:fulfillmentMethod}));}return React.createElement(CardListItem,null,React.createElement(Accordion,{renderLabel:function renderLabel(){return React.createElement(CartItemGroupReservationLabel,{location:location,fulfillmentMethod:fulfillmentMethod});},className:accordionToggle},React.createElement("div",{className:addressDetails},React.createElement(StoreOpeningHours,{hours:operationHours}),React.createElement(StorePhoneNumber,{phone:phoneNumber}))));}CartItemGroupReservation.defaultProps={location:null,fulfillmentMethod:null};export default connect(CartItemGroupReservation);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from'react';import{i18n}from'@shopgate/engage/core';import{LocationIcon}from'@shopgate/engage/components';import{BOPIS}from'@shopgate/engage/locations';import{address,addressIcon,title}from"./CartItemGroup.style";/**
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import{LocationIcon}from'@shopgate/engage/components';import{BOPIS}from'@shopgate/engage/locations';import{address,addressIcon,title}from"./CartItemGroup.style";/** @typedef {import('@shopgate/engage/locations/locations.types').LocationAware} LocationAware */ /**
|
|
2
2
|
* Renders the cart reservation group label.
|
|
3
|
-
* @param {
|
|
4
|
-
* @returns {JSX}
|
|
5
|
-
*/export function CartItemGroupReservationLabel(_ref){var location=_ref.location,fulfillmentMethod=_ref.fulfillmentMethod;if(!location){return null;}var suffix=fulfillmentMethod===BOPIS?'bopis':'ropis';return React.createElement("div",{className:address},React.createElement("div",{className:addressIcon},React.createElement(LocationIcon,null)),React.createElement("div",null,React.createElement("div",{className:title},i18n.text("locations.method.".concat(suffix))),location.name));}
|
|
3
|
+
* @param {LocationAware} props The component props.
|
|
4
|
+
* @returns {JSX.Element|null}
|
|
5
|
+
*/export function CartItemGroupReservationLabel(_ref){var location=_ref.location,fulfillmentMethod=_ref.fulfillmentMethod;if(!location){return null;}var suffix=fulfillmentMethod===BOPIS?'bopis':'ropis';return React.createElement("div",{className:address},React.createElement("div",{className:addressIcon},React.createElement(LocationIcon,null)),React.createElement("div",null,React.createElement("div",{className:title},i18n.text("locations.method.".concat(suffix))),location.name));}export default CartItemGroupReservationLabel;
|
|
@@ -1,5 +1,15 @@
|
|
|
1
|
-
import{hot}from'react-hot-loader/root';import
|
|
1
|
+
import{hot}from'react-hot-loader/root';import React from'react';import{CardList,ResponsiveContainer}from'@shopgate/engage/components';import{FulfillmentSlotSwitcher}from'@shopgate/engage/locations';import PropTypes from'prop-types';import CartItemsHeaderWide from"./CartItemsHeaderWide";import{CartItemProvider,CartItem}from"../CartItem";import{CartItemCard}from"./CartItemCard";import{items,card}from"./CartItems.style";import CartItemsSubstitution from"./CartItemsSubstitution";/**
|
|
2
|
+
* @typedef {import('../../../cart/cart.types').Item} Item
|
|
3
|
+
*/ /**
|
|
2
4
|
* Renders the cart items.
|
|
3
5
|
* @param {Object} props The component props.
|
|
4
|
-
* @
|
|
5
|
-
|
|
6
|
+
* @param {Item} [props.cartItems] The cart items.
|
|
7
|
+
* @param {boolean} [props.multiLineReservation] Whether multi-line reservation is enabled.
|
|
8
|
+
* @param {Function} props.onFocus The focus handler.
|
|
9
|
+
* @param {boolean} [props.editable] Whether the cart is editable.
|
|
10
|
+
* @param {boolean} [props.isOrderDetails] Whether this is for order details.
|
|
11
|
+
* @param {boolean} [props.isDirectShipOnly] Whether the cart is direct-ship only.
|
|
12
|
+
* @param {boolean} [props.isCheckoutConfirmation] Whether this is for checkout confirmation.
|
|
13
|
+
* @param {string} [props.currencyOverride] The currency override.
|
|
14
|
+
* @returns {JSX.Element|null}
|
|
15
|
+
*/var CartItems=function CartItems(_ref){var cartItems=_ref.cartItems,onFocus=_ref.onFocus,multiLineReservation=_ref.multiLineReservation,editable=_ref.editable,isOrderDetails=_ref.isOrderDetails,isCheckoutConfirmation=_ref.isCheckoutConfirmation,currencyOverride=_ref.currencyOverride,isDirectShipOnly=_ref.isDirectShipOnly;if(!cartItems||cartItems.length===0){return null;}return React.createElement(React.Fragment,null,React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},React.createElement(CartItemsHeaderWide,{editable:editable,isOrderDetails:isOrderDetails,isDirectShipOnly:isDirectShipOnly,isCheckoutConfirmation:isCheckoutConfirmation})),React.createElement(CardList,{className:items},!isOrderDetails?React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"<=xs"},React.createElement(FulfillmentSlotSwitcher,{renderBar:true,card:true,editable:editable})):null,editable&&!isDirectShipOnly&&React.createElement(ResponsiveContainer,{breakpoint:"<=xs",appAlways:true},React.createElement(CartItemsSubstitution,{cartItems:cartItems,wrapCard:true,className:card})),cartItems.map(function(item){return React.createElement(CardList.Item,{className:card,key:item.id},React.createElement(CartItemProvider,{cartItem:item,isEditable:editable,isOrderDetails:isOrderDetails,cartIsDirectShipOnly:isDirectShipOnly,isCheckoutConfirmation:isCheckoutConfirmation,locationId:item.fulfillmentLocationId},React.createElement("ul",null,React.createElement(CartItemCard,{multiLineReservation:multiLineReservation,fulfillmentLocationId:item.fulfillmentLocationId,fulfillmentMethod:item.fulfillmentMethod,hasMessages:Array.isArray(item.messages)&&item.messages.length>0},React.createElement(CartItem,{item:item,onFocus:onFocus,editable:editable,currencyOverride:currencyOverride})))));})));};CartItems.defaultProps={cartItems:null,multiLineReservation:null,editable:true,isOrderDetails:false,isDirectShipOnly:false,isCheckoutConfirmation:false,currencyOverride:null};export default hot(CartItems);
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
-
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
|
|
2
|
-
*
|
|
3
|
-
|
|
1
|
+
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 from'react';import PropTypes from'prop-types';import classNames from'classnames';import{hot}from'react-hot-loader/root';import{I18n}from'@shopgate/engage/components';import{header,column,priceColumnWide,imageColumn,detailsColumn,locationColumn,contextMenuColumn,quantityPickerColumn,quantityPickerColumnNotEditable}from"./CartItemsHeaderWide.style";import connect from"./CartItemsHeaderWide.connector";/**
|
|
2
|
+
* The CartItemsHeaderWide component.
|
|
3
|
+
* @param {Object} props The component props.
|
|
4
|
+
* @param {boolean} [props.editable=true] Whether the cart is editable.
|
|
5
|
+
* @param {boolean} [props.isOrderDetails=false] Whether the component is used in order details.
|
|
6
|
+
* @param {boolean} [props.isDirectShipOnly=false] Whether the cart is direct ship only.
|
|
7
|
+
* @param {boolean} [props.hasLineItemPromotions=false] Whether the cart has line item promotions.
|
|
8
|
+
* @param {number} props.enabledFulfillmentMethodsCount The count of enabled fulfillment methods.
|
|
9
|
+
* @returns {JSX.Element} The rendered component.
|
|
10
|
+
*/var CartItemsHeaderWide=function CartItemsHeaderWide(_ref){var editable=_ref.editable,isOrderDetails=_ref.isOrderDetails,enabledFulfillmentMethodsCount=_ref.enabledFulfillmentMethodsCount,hasLineItemPromotions=_ref.hasLineItemPromotions,isDirectShipOnly=_ref.isDirectShipOnly;return React.createElement("div",{className:header},React.createElement("div",{className:imageColumn},React.createElement(I18n.Text,{string:"cart.items"})),React.createElement("div",{className:detailsColumn}),React.createElement("div",{className:classNames(column.toString(),_defineProperty({},priceColumnWide,hasLineItemPromotions))},React.createElement(I18n.Text,{string:"cart.price"})),isOrderDetails&&React.createElement(React.Fragment,null,!isDirectShipOnly?React.createElement("div",{className:locationColumn},React.createElement(I18n.Text,{string:"cart.location"})):null,React.createElement("div",{className:column},React.createElement(I18n.Text,{string:"cart.status"})),React.createElement("div",{className:column},React.createElement(I18n.Text,{string:"cart.fulfilled_quantity"}))),React.createElement("div",{className:editable?quantityPickerColumn:quantityPickerColumnNotEditable},React.createElement(I18n.Text,{string:isOrderDetails?'cart.ordered_quantity':'cart.quantity'})),React.createElement("div",{className:column},React.createElement(I18n.Text,{string:"cart.subtotal"})),editable&&enabledFulfillmentMethodsCount>1&&React.createElement("div",{className:contextMenuColumn}));};CartItemsHeaderWide.defaultProps={editable:true,isOrderDetails:false,isDirectShipOnly:false,hasLineItemPromotions:false};export default hot(connect(CartItemsHeaderWide));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var header=css({display:'flex',flexDirection:'row',justifyContent:'space-between',fontWeight:500,fontSize:'1rem',lineHeight:'1.5rem',padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.small,"px ").concat(variables.gap.big,"px")});export var column=css({display:'flex',alignItems:'center',flexDirection:'column',flexShrink:0,flexGrow:1,flexBasis:0,padding:"0 ".concat(variables.gap.small,"px"),textAlign:'center',':last-child':{paddingRight:variables.gap.small}});export var priceColumnWide=css({flexGrow:4,alignItems:'flex-end'}).toString();export var imageColumn=css({flexGrow:0,width:120,margin:"0 ".concat(variables.gap.small,"px 0 ").concat(variables.gap.big,"px"),paddingLeft:0});export var detailsColumn=css(column,{flexShrink:1,flexGrow:3,alignItems:'flex-start',padding:"0 ".concat(variables.gap.small,"px")});export var locationColumn=css(column,{flexGrow:2});export var quantityPickerColumn=css(column,{' > *':{width:140,textAlign:'center'}});export var quantityPickerColumnNotEditable=css(column,{' > *':{textAlign:'center'}});export var contextMenuColumn=css({width:variables.gap.xbig+variables.gap.small});
|
|
1
|
+
import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var header=css({display:'flex',flexDirection:'row',justifyContent:'space-between',fontWeight:500,fontSize:'1rem',lineHeight:'1.5rem',padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.small,"px ").concat(variables.gap.big,"px")}).toString();export var column=css({display:'flex',alignItems:'center',flexDirection:'column',flexShrink:0,flexGrow:1,flexBasis:0,padding:"0 ".concat(variables.gap.small,"px"),textAlign:'center',':last-child':{paddingRight:variables.gap.small}});export var priceColumnWide=css({flexGrow:4,alignItems:'flex-end'}).toString();export var imageColumn=css({flexGrow:0,width:120,margin:"0 ".concat(variables.gap.small,"px 0 ").concat(variables.gap.big,"px"),paddingLeft:0}).toString();export var detailsColumn=css(column,{flexShrink:1,flexGrow:3,alignItems:'flex-start',padding:"0 ".concat(variables.gap.small,"px")}).toString();export var locationColumn=css(column,{flexGrow:2}).toString();export var quantityPickerColumn=css(column,{' > *':{width:140,textAlign:'center'}}).toString();export var quantityPickerColumnNotEditable=css(column,{' > *':{textAlign:'center'}});export var contextMenuColumn=css({width:variables.gap.xbig+variables.gap.small}).toString();
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
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,{useContext,useMemo}from'react';import classNames from'classnames';import
|
|
1
|
+
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,{useContext,useMemo}from'react';import classNames from'classnames';import{SurroundPortals,I18n,Link}from'@shopgate/engage/components';import{CART_CHECKOUT_BUTTON}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{CHECKOUT_PATH}from'@shopgate/pwa-common/constants/RoutePaths';import PropTypes from'prop-types';import{CartContext}from"../../cart.context";import{container,button,disabledButton}from"./CartSummaryWideCheckoutButton.style";import connect from"./CartSummaryWideCheckoutButton.connector";/**
|
|
2
2
|
* @param {Object} props The component props
|
|
3
|
-
* @
|
|
3
|
+
* @param {boolean} props.isOrderable Indicates whether the cart is orderable.
|
|
4
|
+
* @returns {JSX.Element}
|
|
4
5
|
*/var CartSummaryWideCheckoutButton=function CartSummaryWideCheckoutButton(_ref){var isOrderable=_ref.isOrderable;var _useContext=useContext(CartContext),isLoading=_useContext.isLoading;var isActive=useMemo(function(){return isOrderable&&!isLoading;},[isLoading,isOrderable]);var classes=classNames(button,_defineProperty({},disabledButton,!isActive));return React.createElement("div",{className:container},React.createElement(SurroundPortals,{portalName:CART_CHECKOUT_BUTTON,portalProps:{isActive:isActive}},React.createElement(Link,{href:CHECKOUT_PATH,disabled:!isActive},React.createElement(RippleButton,{disabled:!isActive,type:"regular",className:classes},React.createElement(I18n.Text,{string:"cart.checkout"})))));};CartSummaryWideCheckoutButton.defaultProps={isOrderable:true};export default connect(CartSummaryWideCheckoutButton);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;export var container=css({display:'flex',flexDirection:'column'});export var button=css({width:'100%',background:"var(--color-button-cta, ".concat(colors.cta,")"),color:"var(--color-button-cta-contrast, ".concat(colors.ctaContrast,")!important"),borderRadius:4,margin:"".concat(variables.gap.big,"px 0")}).toString();export var disabledButton=css({background:colors.shade7,color:"".concat(colors.shade4,"!important")}).toString();
|
|
1
|
+
import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;export var container=css({display:'flex',flexDirection:'column'}).toString();export var button=css({width:'100%',background:"var(--color-button-cta, ".concat(colors.cta,")"),color:"var(--color-button-cta-contrast, ".concat(colors.ctaContrast,")!important"),borderRadius:4,margin:"".concat(variables.gap.big,"px 0")}).toString();export var disabledButton=css({background:colors.shade7,color:"".concat(colors.shade4,"!important")}).toString();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React,{useContext,useMemo}from'react';import
|
|
1
|
+
import React,{useContext,useMemo}from'react';import{I18n,Link,SurroundPortals}from'@shopgate/engage/components';import{CART_CHECKOUT_BUTTON}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{CHECKOUT_PATH}from'@shopgate/pwa-common/constants/RoutePaths';import PropTypes from'prop-types';import{CartContext}from"../../cart.context";import connect from"./PaymentBarCheckoutButton.connector";import{button,disabledButton}from"./PaymentBarCheckoutButton.style";/**
|
|
2
2
|
* Renders the cart payment bar checkout button.
|
|
3
3
|
* @param {boolean} isOrderable Whether the cart is orderable.
|
|
4
4
|
* @return {JSX.Element}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR_TOTALS_DISCOUNTS}from'@shopgate/pwa-common-commerce/cart';import CartTotalLine from'@shopgate/pwa-ui-shared/CartTotalLine';import{CartContext}from"../../cart.context";import{spacer}from"./PaymentBarContent.style";import connect from"./PaymentBarDiscounts.connector";/**
|
|
2
2
|
* The Discounts component.
|
|
3
|
-
* @
|
|
3
|
+
* @param {Object} props The component props.
|
|
4
|
+
* @param {Array} [props.discounts=null] An array of discount objects.
|
|
5
|
+
* @param {boolean} [props.showSeparator=true] Whether to show a separator.
|
|
6
|
+
* @param {string|null} [props.className=null] The class name for styling.
|
|
7
|
+
* @returns {JSX.Element|null} The rendered component or null.
|
|
4
8
|
*/function PaymentBarDiscounts(_ref){var discounts=_ref.discounts,showSeparator=_ref.showSeparator,className=_ref.className;var _React$useContext=React.useContext(CartContext),currency=_React$useContext.currency,isLoading=_React$useContext.isLoading,hasPromotionCoupons=_React$useContext.hasPromotionCoupons;if(!discounts){return null;}return React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS_DISCOUNTS},discounts.map(function(_ref2){var label=_ref2.label,amount=_ref2.amount;return React.createElement(CartTotalLine,{key:"discount-".concat(label,"-").concat(amount),type:"discount",isDisabled:isLoading,className:className},React.createElement(CartTotalLine.Label,{label:label?'cart.discount_with_label':'cart.discount',labelParams:{label:label},showSeparator:showSeparator}),React.createElement(CartTotalLine.Amount,{amount:-amount,currency:currency}),hasPromotionCoupons&&React.createElement(CartTotalLine.Spacer,{className:spacer}));}));}PaymentBarDiscounts.defaultProps={discounts:null,className:null,showSeparator:true};export default connect(PaymentBarDiscounts);
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR_TOTALS_GRAND_TOTAL}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import CartTotalLine from'@shopgate/pwa-ui-shared/CartTotalLine';import{CartContext}from"../../cart.context";import{spacer}from"./PaymentBarContent.style";import connect from"./PaymentBarGrandTotal.connector";/**
|
|
2
2
|
* The GrandTotal component.
|
|
3
|
-
* @
|
|
4
|
-
|
|
3
|
+
* @param {Object} props The component props.
|
|
4
|
+
* @param {number} props.amount The grand total amount.
|
|
5
|
+
* @param {string} [props.label] The label for the grand total.
|
|
6
|
+
* @param {boolean} [props.showSeparator=true] Whether to show a separator.
|
|
7
|
+
* @param {string|null} [props.className=null] The class name for styling.
|
|
8
|
+
* @returns {JSX.Element|null} The rendered component or null.
|
|
9
|
+
*/var PaymentBarGrandTotal=function PaymentBarGrandTotal(_ref){var amount=_ref.amount,label=_ref.label,showSeparator=_ref.showSeparator,className=_ref.className;var _React$useContext=React.useContext(CartContext),hideTotal=_React$useContext.config.hideTotal,isLoading=_React$useContext.isLoading,currency=_React$useContext.currency,hasPromotionCoupons=_React$useContext.hasPromotionCoupons;if(hideTotal){return null;}return React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS_GRAND_TOTAL},React.createElement(CartTotalLine,{isDisabled:isLoading,type:"grandTotal",className:className},React.createElement(CartTotalLine.Label,{label:label,showSeparator:showSeparator}),React.createElement(CartTotalLine.Amount,{amount:amount,currency:currency}),hasPromotionCoupons&&React.createElement(CartTotalLine.Spacer,{className:spacer})));};PaymentBarGrandTotal.defaultProps={className:null,showSeparator:true,label:'cart.total'};export default connect(PaymentBarGrandTotal);
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{I18n,SurroundPortals,RippleButton}from'@shopgate/engage/components';import{CART_CHECKOUT_BUTTON}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import{FulfillmentSheet,STAGE_RESERVE_FORM}from"../../../locations";import{CartContext}from"../../cart.context";import{button,disabledButton}from"./PaymentBarCheckoutButton.style";import connect from"./PaymentBarReserveButton.connector";/**
|
|
2
2
|
* The reserve button component.
|
|
3
3
|
* @param {Object} props The component props.
|
|
4
|
-
* @
|
|
5
|
-
|
|
4
|
+
* @param {Function} props.historyReset The history reset function.
|
|
5
|
+
* @return {JSX.Element} The rendered component.
|
|
6
|
+
*/var PaymentBarReserveButton=function PaymentBarReserveButton(_ref){var historyReset=_ref.historyReset;var _React$useContext=React.useContext(CartContext),orderable=_React$useContext.flags.orderable;/**
|
|
6
7
|
* Handles the click on the button.
|
|
7
|
-
*/function handleClick(){FulfillmentSheet.open({stage:STAGE_RESERVE_FORM,callback:function callback(
|
|
8
|
+
*/function handleClick(){FulfillmentSheet.open({stage:STAGE_RESERVE_FORM,callback:function callback(_location,_product,orderSuccess){if(orderSuccess===true){historyReset();}}});}return React.createElement(SurroundPortals,{portalName:CART_CHECKOUT_BUTTON,portalProps:{isActive:orderable}},React.createElement(RippleButton,{onClick:handleClick,disabled:!orderable,type:"regular",className:orderable?button:disabledButton},React.createElement(I18n.Text,{string:"cart.reserve"})));};export default connect(PaymentBarReserveButton);
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
*
|
|
3
|
-
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR_TOTALS_SHIPPING,getShippingLine}from'@shopgate/pwa-common-commerce/cart';import CartTotalLine from'@shopgate/pwa-ui-shared/CartTotalLine';import{CartContext}from"../../cart.context";import{spacer}from"./PaymentBarContent.style";import connect from"./PaymentBarShippingCost.connector";/**
|
|
2
|
+
* The PaymentBarShippingCost component.
|
|
3
|
+
* @param {Object} props The component props.
|
|
4
|
+
* @param {Object|null} props.shippingCost The shipping cost details.
|
|
5
|
+
* @param {boolean} [props.showSeparator=true] Whether to show a separator.
|
|
6
|
+
* @param {string|null} [props.className=null] Additional class names.
|
|
7
|
+
* @returns {JSX.Element|null} The rendered component.
|
|
8
|
+
*/var PaymentBarShippingCost=function PaymentBarShippingCost(_ref){var shippingCost=_ref.shippingCost,showSeparator=_ref.showSeparator,className=_ref.className;var _React$useContext=React.useContext(CartContext),currency=_React$useContext.currency,isLoading=_React$useContext.isLoading,isUserLoggedIn=_React$useContext.isUserLoggedIn,config=_React$useContext.config,hasPromotionCoupons=_React$useContext.hasPromotionCoupons;var shippingLine=React.useMemo(function(){return getShippingLine(config,isUserLoggedIn,shippingCost);},[config,isUserLoggedIn,shippingCost]);return React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS_SHIPPING},shippingLine&&React.createElement(CartTotalLine,{isDisabled:isLoading,type:"shipping",className:className},React.createElement(CartTotalLine.Label,{label:shippingLine.label,showSeparator:showSeparator!==null?showSeparator:!!shippingLine.amount}),React.createElement(CartTotalLine.Amount,{amount:shippingLine.amount,currency:currency}),React.createElement(CartTotalLine.Hint,{hint:shippingLine.hint}),hasPromotionCoupons&&React.createElement(CartTotalLine.Spacer,{className:spacer})));};PaymentBarShippingCost.defaultProps={className:null,showSeparator:true,shippingCost:null};export default connect(PaymentBarShippingCost);
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
*
|
|
3
|
-
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR_TOTALS_SUB_TOTAL}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import CartTotalLine from'@shopgate/pwa-ui-shared/CartTotalLine';import{CartContext}from"../../cart.context";import{spacer}from"./PaymentBarContent.style";import connect from"./PaymentBarSubTotal.connector";/**
|
|
2
|
+
* Renders the PaymentBarSubTotal component.
|
|
3
|
+
* @param {Object} props The component props.
|
|
4
|
+
* @param {number} props.amount The subtotal amount.
|
|
5
|
+
* @param {string} [props.label] The label for the subtotal.
|
|
6
|
+
* @param {boolean} [props.showSeparator=true] Whether to show a separator.
|
|
7
|
+
* @param {string|null} [props.className=null] The class name for styling.
|
|
8
|
+
* @returns {JSX.Element|null} The rendered component or null.
|
|
9
|
+
*/var PaymentBarSubTotal=function PaymentBarSubTotal(_ref){var amount=_ref.amount,label=_ref.label,showSeparator=_ref.showSeparator,className=_ref.className;var _React$useContext=React.useContext(CartContext),currency=_React$useContext.currency,isLoading=_React$useContext.isLoading,hasPromotionCoupons=_React$useContext.hasPromotionCoupons;return React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS_SUB_TOTAL},amount&&React.createElement(CartTotalLine,{isDisabled:isLoading,type:"subTotal",className:className},React.createElement(CartTotalLine.Label,{label:label,showSeparator:showSeparator}),React.createElement(CartTotalLine.Amount,{amount:amount,currency:currency}),hasPromotionCoupons&&React.createElement(CartTotalLine.Spacer,{className:spacer})));};PaymentBarSubTotal.defaultProps={className:null,showSeparator:true,label:'cart.subtotal'};export default connect(PaymentBarSubTotal);
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR_TOTALS_TAX,getTaxLine}from'@shopgate/pwa-common-commerce/cart';import CartTotalLine from'@shopgate/pwa-ui-shared/CartTotalLine';import{CartContext}from"../../cart.context";import{spacer}from"./PaymentBarContent.style";import connect from"./PaymentBarTax.connector";/**
|
|
2
2
|
* The Tax component.
|
|
3
|
-
* @
|
|
4
|
-
|
|
3
|
+
* @param {Object} props The component props.
|
|
4
|
+
* @param {Object} [props.taxData] The tax data.
|
|
5
|
+
* @param {boolean} [props.showSeparator=true] Whether to show a separator.
|
|
6
|
+
* @param {string|null} [props.className=null] The class name for styling.
|
|
7
|
+
* @returns {JSX.Element|null} The rendered component or null.
|
|
8
|
+
*/var PaymentBarTax=function PaymentBarTax(_ref){var taxData=_ref.taxData,showSeparator=_ref.showSeparator,className=_ref.className;var _React$useContext=React.useContext(CartContext),currency=_React$useContext.currency,isLoading=_React$useContext.isLoading,config=_React$useContext.config,hasPromotionCoupons=_React$useContext.hasPromotionCoupons;if(!taxData){return null;}var taxLine=getTaxLine(config,taxData);if(!taxLine){return null;}return React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS_TAX},React.createElement(CartTotalLine,{isDisabled:isLoading,type:"tax",className:className},React.createElement(CartTotalLine.Label,{label:taxLine.label,showSeparator:showSeparator}),React.createElement(CartTotalLine.Amount,{amount:taxLine.amount,currency:currency}),React.createElement(CartTotalLine.Hint,{hint:taxLine.hint}),hasPromotionCoupons&&React.createElement(CartTotalLine.Spacer,{className:spacer})));};PaymentBarTax.defaultProps={taxData:null,className:null,showSeparator:true};export default connect(PaymentBarTax);
|
package/cart/index.js
CHANGED
|
@@ -8,4 +8,5 @@ export*from'@shopgate/pwa-common-commerce/cart/selectors';export{makeIsAddToCart
|
|
|
8
8
|
export*from"./streams";// CONTEXTS
|
|
9
9
|
export{CartContext}from"./cart.context";// COMPONENTS
|
|
10
10
|
export{PaymentBar}from"./components/PaymentBar";export{CartItemGroup,CartItems}from"./components/CartItems";export{CartItem}from"./components/CartItem";export{CartHeaderWide}from"./components/CartHeaderWide";export{default as CartSummaryWide}from"./components/CartSummaryWide/CartSummaryWide";export{SupplementalContent}from"./components/SupplementalContent";export{default as CartItemsSubstitution}from"./components/CartItems/CartItemsSubstitution";// HOOKS
|
|
11
|
-
export{useCartContext}from"./cart.hooks";// TYPES
|
|
11
|
+
export{useCartContext}from"./cart.hooks";// TYPES
|
|
12
|
+
/** @typedef {import('./cart.types').Item} Item */ /** @typedef {import('./cart.types').AddToCartProduct} AddToCartProduct */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _regeneratorRuntime from"@babel/runtime/regenerator";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 asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React,{useEffect,useContext}from'react';import{i18n}from'@shopgate/engage/core';import{Elements,CardNumberElement,useStripe,useElements}from'@stripe/react-stripe-js';import Context from"./StripeProvider.context";import connect from"./StripeProvider.connector";import{promise as stripePromise,loadSdk}from"./sdk";import{useCheckoutContext}from"../../hooks/common";import PaymentContext from"../context";/**
|
|
1
|
+
import _regeneratorRuntime from"@babel/runtime/regenerator";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 asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React,{useEffect,useContext}from'react';import{i18n}from'@shopgate/engage/core/helpers';import{Elements,CardNumberElement,useStripe,useElements}from'@stripe/react-stripe-js';import PropTypes from'prop-types';import Context from"./StripeProvider.context";import connect from"./StripeProvider.connector";import{promise as stripePromise,loadSdk}from"./sdk";import{useCheckoutContext}from"../../hooks/common";import PaymentContext from"../context";/**
|
|
2
2
|
* Prepares checkout with stripe request and creates event data.
|
|
3
3
|
* @param {Stripe} stripe Stripe
|
|
4
4
|
* @param {Object} req Stripe request.
|
|
@@ -24,10 +24,13 @@ event=req.preparedEvent;if(event){_context3.next=5;break;}_context3.next=4;retur
|
|
|
24
24
|
intent=activeTransaction===null||activeTransaction===void 0?void 0:(_activeTransaction$ch=activeTransaction.checkoutParams)===null||_activeTransaction$ch===void 0?void 0:_activeTransaction$ch.paymentIntent;/* eslint-disable camelcase */_context3.next=8;return stripe.confirmCardPayment(intent,{payment_method:event.paymentMethod.id},{handleActions:false});case 8:result=_context3.sent;if(!result.error){_context3.next=12;break;}event.complete('fail');throw result.error;case 12:event.complete('success');if(!(result.paymentIntent.status==='requires_action')){_context3.next=20;break;}_context3.next=16;return stripe.confirmCardPayment(intent);case 16:step=_context3.sent;if(!step.error){_context3.next=19;break;}throw step.error;case 19:return _context3.abrupt("return",step);case 20:return _context3.abrupt("return",result);case 21:case"end":return _context3.stop();}},_callee3);}));return function triggerStripeRequest(_x4,_x5,_x6,_x7){return _ref3.apply(this,arguments);};}();/**
|
|
25
25
|
* A Provider that is needed for all stripe based
|
|
26
26
|
* @param {Object} props The components props.
|
|
27
|
-
* @
|
|
27
|
+
* @param {Object} props.children The child components.
|
|
28
|
+
* @returns {JSX.Element}
|
|
28
29
|
*/var StripeProvider=function StripeProvider(_ref4){var children=_ref4.children;var _React$useState=React.useState(null),_React$useState2=_slicedToArray(_React$useState,2),error=_React$useState2[0],setError=_React$useState2[1];var _useCheckoutContext=useCheckoutContext(),order=_useCheckoutContext.order,paymentData=_useCheckoutContext.paymentData;var stripe=useStripe();var elements=useElements();var contextApi=React.useMemo(function(){return{error:error,setError:setError,fulfillTransaction:function(){var _fulfillTransaction=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref5){var _activeTransaction$ch2;var paymentTransactions,activeTransaction,_ref7,_paymentIntent,_ref8,incomingError,paymentIntent;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:paymentTransactions=_ref5.paymentTransactions;// Make sure api responded with a new payment transaction.
|
|
29
30
|
activeTransaction=paymentTransactions[0];if(activeTransaction===null||activeTransaction===void 0?void 0:(_activeTransaction$ch2=activeTransaction.checkoutParams)===null||_activeTransaction$ch2===void 0?void 0:_activeTransaction$ch2.paymentIntent){_context4.next=5;break;}setError(i18n.text('checkout.errors.noPaymentTransaction'));return _context4.abrupt("return",false);case 5:if(!((paymentData===null||paymentData===void 0?void 0:paymentData.meta)&&(paymentData===null||paymentData===void 0?void 0:paymentData.meta.stripeRequest))){_context4.next=17;break;}_context4.prev=6;_context4.next=9;return triggerStripeRequest(stripe,paymentData.meta.stripeRequest,order,activeTransaction);case 9:_ref7=_context4.sent;_paymentIntent=_ref7.paymentIntent;return _context4.abrupt("return",[{id:activeTransaction.id,checkoutParams:{paymentIntentId:_paymentIntent.id}}]);case 14:_context4.prev=14;_context4.t0=_context4["catch"](6);return _context4.abrupt("return",false);case 17:_context4.next=19;return stripe.confirmCardPayment(activeTransaction.checkoutParams.paymentIntent,{/* eslint-disable-next-line camelcase */payment_method:{card:elements.getElement(CardNumberElement)}});case 19:_ref8=_context4.sent;incomingError=_ref8.error;paymentIntent=_ref8.paymentIntent;if(!incomingError){_context4.next=26;break;}console.error(incomingError,activeTransaction.checkoutParams.paymentIntent);setError(incomingError.message);return _context4.abrupt("return",false);case 26:return _context4.abrupt("return",[{id:activeTransaction.id,checkoutParams:{paymentIntentId:paymentIntent.id}}]);case 27:case"end":return _context4.stop();}},_callee4,null,[[6,14]]);}));function fulfillTransaction(_x8){return _fulfillTransaction.apply(this,arguments);}return fulfillTransaction;}()};},[elements,error,order,paymentData,stripe]);var _useContext=useContext(PaymentContext),registerPaymentMethod=_useContext.registerPaymentMethod;useEffect(function(){registerPaymentMethod(contextApi);},[contextApi,registerPaymentMethod]);return React.createElement(Context.Provider,{value:contextApi},children);};/**
|
|
30
31
|
* A Provider that is needed for all stripe based
|
|
31
32
|
* @param {Object} props The components props.
|
|
32
|
-
* @
|
|
33
|
+
* @param {string} [props.publishableKey] The publishable key.
|
|
34
|
+
* @param {Object} props.children The child components.
|
|
35
|
+
* @returns {JSX.Element}
|
|
33
36
|
*/var StripeProviderWrapper=function StripeProviderWrapper(_ref9){var publishableKey=_ref9.publishableKey,children=_ref9.children;React.useEffect(function(){if(!publishableKey){return;}loadSdk(publishableKey);},[publishableKey]);return React.createElement(Elements,{stripe:stripePromise},React.createElement(StripeProvider,null,children));};StripeProviderWrapper.defaultProps={publishableKey:null};export default connect(StripeProviderWrapper);
|
|
@@ -1,14 +1,45 @@
|
|
|
1
|
-
import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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;}/* eslint-disable no-unused-expressions */import React,{useCallback}from'react';import{isAvailable,InAppBrowser,Linking}from'@shopgate/native-modules';import{useFormState}from'@shopgate/engage/core/hooks/useFormState';import{i18n,useAsyncMemo,getUserAgent,LoadingProvider}from'@shopgate/engage/core';import{MARKETING_OPT_IN_DEFAULT}from'@shopgate/engage/registration/constants';import Context from"./CheckoutProvider.context";import connect from"./CheckoutProvider.connector";import{pickupConstraints,selfPickupConstraints}from"./CheckoutProvider.constraints";import{CHECKOUT_CONFIRMATION_PATTERN}from"../constants/routes"
|
|
1
|
+
import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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;}/* eslint-disable no-unused-expressions */import React,{useCallback,useEffect,useMemo,useRef,useState}from'react';import{isAvailable,InAppBrowser,Linking}from'@shopgate/native-modules';import{useFormState}from'@shopgate/engage/core/hooks/useFormState';import{i18n,useAsyncMemo,getUserAgent,LoadingProvider}from'@shopgate/engage/core';import{MARKETING_OPT_IN_DEFAULT}from'@shopgate/engage/registration/constants';import PropTypes from'prop-types';import Context from"./CheckoutProvider.context";import connect from"./CheckoutProvider.connector";import{pickupConstraints,selfPickupConstraints}from"./CheckoutProvider.constraints";import{CHECKOUT_CONFIRMATION_PATTERN}from"../constants/routes";/* eslint-disable max-len */ /**
|
|
2
|
+
* Props for the CheckoutProvider component.
|
|
3
|
+
* @typedef {Object} CheckoutProviderProps
|
|
4
|
+
* @property {boolean} [orderInitialized=false] - Indicates if the order is initialized.
|
|
5
|
+
* @property {boolean} [orderReadOnly=false] - Indicates if the order is read-only.
|
|
6
|
+
* @property {string} pathPattern - The path pattern for the checkout.
|
|
7
|
+
* @property {React.ReactNode} children - The child components.
|
|
8
|
+
* @property {Object} shopSettings - The shop settings.
|
|
9
|
+
* @property {Array} paymentTransactions - The payment transactions.
|
|
10
|
+
* @property {Object} billingAddress - The billing address.
|
|
11
|
+
* @property {Object} shippingAddress - The shipping address.
|
|
12
|
+
* @property {Object} fulfillmentSlot - The fulfillment slot.
|
|
13
|
+
* @property {Object} pickupAddress - The pickup address.
|
|
14
|
+
* @property {Array} taxLines - The tax lines.
|
|
15
|
+
* @property {Object} userLocation - The user location.
|
|
16
|
+
* @property {boolean} isDataReady - Indicates if the data is ready.
|
|
17
|
+
* @property {boolean} [orderReserveOnly=false] - Indicates if the order is reserve-only.
|
|
18
|
+
* @property {boolean} [isShippingAddressSelectionEnabled=false] - Indicates if shipping address selection is enabled.
|
|
19
|
+
* @property {boolean} [isPickupContactSelectionEnabled=false] - Indicates if pickup contact selection is enabled.
|
|
20
|
+
* @property {boolean} [isGuestCheckout=false] - Indicates if guest checkout is enabled.
|
|
21
|
+
* @property {Object} campaignAttribution - The campaign attribution data.
|
|
22
|
+
* @property {Object} order - The checkout order.
|
|
23
|
+
* @property {Function} fetchCart - Function to fetch the cart.
|
|
24
|
+
* @property {Function} prepareCheckout - Function to prepare the checkout.
|
|
25
|
+
* @property {Function} fetchCheckoutOrder - Function to fetch the checkout order.
|
|
26
|
+
* @property {Function} updateCheckoutOrder - Function to update the checkout order.
|
|
27
|
+
* @property {Function} submitCheckoutOrder - Function to submit the checkout order.
|
|
28
|
+
* @property {Function} historyReplace - Function to replace the history.
|
|
29
|
+
* @property {Function} showModal - Function to show a modal.
|
|
30
|
+
* @property {Function} clearCheckoutCampaign - Function to clear the checkout campaign.
|
|
31
|
+
*/ /* eslint-enable max-len */var defaultPickupPersonState={pickupPerson:'me',firstName:'',lastName:'',mobile:'',email:'',firstName2:'',lastName2:'',mobile2:'',email2:''};/**
|
|
2
32
|
* Converts validation errors into errors for form builder.
|
|
3
33
|
* @param {Object} validationErrors The validation errors.
|
|
4
34
|
* @returns {Array}
|
|
5
35
|
*/var convertValidationErrors=function convertValidationErrors(validationErrors){return Object.keys(validationErrors).map(function(key){return{path:key,message:i18n.text(validationErrors[key])};});};var initialOptInFormState={marketingOptIn:MARKETING_OPT_IN_DEFAULT};/**
|
|
6
36
|
* Checkout Provider
|
|
7
|
-
* @
|
|
8
|
-
|
|
37
|
+
* @param {CheckoutProviderProps} props The component props.
|
|
38
|
+
* @returns {JSX.Element}
|
|
39
|
+
*/var CheckoutProvider=function CheckoutProvider(_ref){var pathPattern=_ref.pathPattern,orderInitialized=_ref.orderInitialized,orderReadOnly=_ref.orderReadOnly,historyReplace=_ref.historyReplace,prepareCheckout=_ref.prepareCheckout,fetchCheckoutOrder=_ref.fetchCheckoutOrder,updateCheckoutOrder=_ref.updateCheckoutOrder,submitCheckoutOrder=_ref.submitCheckoutOrder,showModal=_ref.showModal,children=_ref.children,shopSettings=_ref.shopSettings,billingAddress=_ref.billingAddress,shippingAddress=_ref.shippingAddress,pickupAddress=_ref.pickupAddress,paymentTransactions=_ref.paymentTransactions,fetchCart=_ref.fetchCart,taxLines=_ref.taxLines,userLocation=_ref.userLocation,isDataReady=_ref.isDataReady,fulfillmentSlot=_ref.fulfillmentSlot,orderReserveOnly=_ref.orderReserveOnly,isShippingAddressSelectionEnabled=_ref.isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled=_ref.isPickupContactSelectionEnabled,isGuestCheckout=_ref.isGuestCheckout,campaignAttribution=_ref.campaignAttribution,clearCheckoutCampaign=_ref.clearCheckoutCampaign,checkoutOrder=_ref.order;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),paymentButton=_useState2[0],setPaymentButton=_useState2[1];var paymentHandlerRef=useRef(null);var _useState3=useState(null),_useState4=_slicedToArray(_useState3,2),paymentData=_useState4[0],setPaymentData=_useState4[1];var _useState5=useState(true),_useState6=_slicedToArray(_useState5,2),isLocked=_useState6[0],setLocked=_useState6[1];var _useState7=useState(true),_useState8=_slicedToArray(_useState7,2),isButtonLocked=_useState8[0],setButtonLocked=_useState8[1];var _useState9=useState(true),_useState10=_slicedToArray(_useState9,2),isLoading=_useState10[0],setLoading=_useState10[1];var _useState11=useState(selfPickupConstraints),_useState12=_slicedToArray(_useState11,2),validationRules=_useState12[0],setValidationRules=_useState12[1];var _useState13=useState(false),_useState14=_slicedToArray(_useState13,2),updateOptIns=_useState14[0],_setUpdateOptIns=_useState14[1];var defaultOptInFormState=_extends({},initialOptInFormState);var optInFormState=useFormState(defaultOptInFormState,function(){});// Initialize checkout process.
|
|
9
40
|
var _useAsyncMemo=useAsyncMemo(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var _ref4,needsPaymentCheckout,success;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return prepareCheckout({initializeOrder:!orderInitialized});case 3:_ref4=_context.sent;needsPaymentCheckout=_ref4.needsPayment;success=_ref4.success;setLocked(false);return _context.abrupt("return",{isCheckoutInitialized:success,needsPayment:needsPaymentCheckout});case 10:_context.prev=10;_context.t0=_context["catch"](0);return _context.abrupt("return",{isCheckoutInitialized:false,needsPayment:false});case 13:case"end":return _context.stop();}},_callee,null,[[0,10]]);})),[],false),_useAsyncMemo2=_slicedToArray(_useAsyncMemo,1),_useAsyncMemo2$=_useAsyncMemo2[0],isCheckoutInitialized=_useAsyncMemo2$.isCheckoutInitialized,needsPayment=_useAsyncMemo2$.needsPayment;// Handle passed errors from external checkout gateway.
|
|
10
|
-
|
|
11
|
-
var handleSubmitOrder=
|
|
41
|
+
useEffect(function(){var urlParams=new URLSearchParams(window.location.search);var errorCode=urlParams.get('errorCode');if(!errorCode){return;}showModal({title:null,confirm:null,dismiss:'modal.ok',message:'checkout.errors.payment.genericExternal'});},[showModal]);var submitPromise=useRef(null);// Handles submit of the checkout form.
|
|
42
|
+
var handleSubmitOrder=useCallback(/*#__PURE__*/function(){var _ref5=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(values){var _submitPromise$curren,_submitPromise$curren2,_submitPromise$curren3,_submitPromise$curren4,fulfilledPaymentTransactions,_submitPromise$curren5,_submitPromise$curren6,marketingOptIn,_ref7,paymentTransactionResults,redirectNeeded,_paymentHandlerRef$cu,_submitPromise$curren9,_submitPromise$curren10,_paymentTransactionRe3,_paymentTransactionRe4,url,_submitPromise$curren7,_submitPromise$curren8,redirectWanted,_paymentHandlerRef$cu2,_submitPromise$curren11,_submitPromise$curren12,_ref8,_ref9,order;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:setLocked(true);// Update order to set pickup contact.
|
|
12
43
|
if(orderReadOnly){_context2.next=14;break;}_context2.prev=2;_context2.next=5;return updateCheckoutOrder({notes:values.instructions,addressSequences:[_extends({},billingAddress,{customerContactId:billingAddress.customerContactId||undefined})].concat(isShippingAddressSelectionEnabled?_extends({},shippingAddress,{customerContactId:shippingAddress.customerContactId||undefined}):[],isPickupContactSelectionEnabled?_extends({},values.pickupPerson==='me'?_extends({},billingAddress,{customerContactId:billingAddress.customerContactId||undefined,type:'pickup'}):{type:'pickup',firstName:values.firstName,lastName:values.lastName,mobile:values.mobile,emailAddress:values.emailAddress}):[]),primaryBillToAddressSequenceIndex:0,primaryShipToAddressSequenceIndex:1});case 5:_context2.next=12;break;case 7:_context2.prev=7;_context2.t0=_context2["catch"](2);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren=submitPromise.current)===null||_submitPromise$curren===void 0?void 0:(_submitPromise$curren2=_submitPromise$curren.resolve)===null||_submitPromise$curren2===void 0?void 0:_submitPromise$curren2.call(_submitPromise$curren);return _context2.abrupt("return");case 12:_context2.next=25;break;case 14:if(!(isGuestCheckout&&isPickupContactSelectionEnabled&&values.instructions)){_context2.next=25;break;}_context2.prev=15;_context2.next=18;return updateCheckoutOrder({notes:values.instructions});case 18:_context2.next=25;break;case 20:_context2.prev=20;_context2.t1=_context2["catch"](15);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren3=submitPromise.current)===null||_submitPromise$curren3===void 0?void 0:(_submitPromise$curren4=_submitPromise$curren3.resolve)===null||_submitPromise$curren4===void 0?void 0:_submitPromise$curren4.call(_submitPromise$curren3);return _context2.abrupt("return");case 25:// Fulfill using selected payment method.
|
|
13
44
|
fulfilledPaymentTransactions=[];if(!needsPayment){_context2.next=34;break;}_context2.next=29;return paymentHandlerRef.current.fulfillTransaction({paymentTransactions:paymentTransactions});case 29:fulfilledPaymentTransactions=_context2.sent;if(fulfilledPaymentTransactions){_context2.next=34;break;}setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren5=submitPromise.current)===null||_submitPromise$curren5===void 0?void 0:(_submitPromise$curren6=_submitPromise$curren5.resolve)===null||_submitPromise$curren6===void 0?void 0:_submitPromise$curren6.call(_submitPromise$curren5);return _context2.abrupt("return");case 34:_context2.prev=34;if(updateOptIns){marketingOptIn=optInFormState.values.marketingOptIn;}_context2.next=38;return submitCheckoutOrder(_extends({paymentTransactions:fulfilledPaymentTransactions,userAgent:getUserAgent(),platform:'engage',marketingOptIn:marketingOptIn},campaignAttribution?{campaignAttribution:campaignAttribution}:{}));case 38:_ref7=_context2.sent;paymentTransactionResults=_ref7.paymentTransactionResults;redirectNeeded=_ref7.redirectNeeded;if(!(redirectNeeded&&paymentTransactionResults.length)){_context2.next=54;break;}_paymentTransactionRe3=paymentTransactionResults[0].redirectParams,_paymentTransactionRe4=_paymentTransactionRe3===void 0?{}:_paymentTransactionRe3,url=_paymentTransactionRe4.url;if(!isAvailable()){_context2.next=49;break;}_context2.next=46;return InAppBrowser.openLink({url:url,options:{enableDefaultShare:false}});case 46:// On Close we simply unlock the checkout
|
|
14
45
|
setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren7=submitPromise.current)===null||_submitPromise$curren7===void 0?void 0:(_submitPromise$curren8=_submitPromise$curren7.resolve)===null||_submitPromise$curren8===void 0?void 0:_submitPromise$curren8.call(_submitPromise$curren7);return _context2.abrupt("return");case 49:// Implemented specifically for paypal:
|
|
@@ -18,11 +49,11 @@ setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPro
|
|
|
18
49
|
redirectWanted=true;if(paymentHandlerRef===null||paymentHandlerRef===void 0?void 0:(_paymentHandlerRef$cu=paymentHandlerRef.current)===null||_paymentHandlerRef$cu===void 0?void 0:_paymentHandlerRef$cu.getSupportsRedirect){redirectWanted=paymentHandlerRef===null||paymentHandlerRef===void 0?void 0:(_paymentHandlerRef$cu2=paymentHandlerRef.current)===null||_paymentHandlerRef$cu2===void 0?void 0:_paymentHandlerRef$cu2.getSupportsRedirect();}if(redirectWanted){window.location.href=url;}else{setLocked(false);}submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren9=submitPromise.current)===null||_submitPromise$curren9===void 0?void 0:(_submitPromise$curren10=_submitPromise$curren9.resolve)===null||_submitPromise$curren10===void 0?void 0:_submitPromise$curren10.call(_submitPromise$curren9,true);return _context2.abrupt("return");case 54:_context2.next=61;break;case 56:_context2.prev=56;_context2.t2=_context2["catch"](34);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren11=submitPromise.current)===null||_submitPromise$curren11===void 0?void 0:(_submitPromise$curren12=_submitPromise$curren11.resolve)===null||_submitPromise$curren12===void 0?void 0:_submitPromise$curren12.call(_submitPromise$curren11);return _context2.abrupt("return");case 61:_context2.next=63;return Promise.all([fetchCheckoutOrder(),fetchCart()]);case 63:_ref8=_context2.sent;_ref9=_slicedToArray(_ref8,1);order=_ref9[0];clearCheckoutCampaign();historyReplace({pathname:CHECKOUT_CONFIRMATION_PATTERN,state:{order:order}});// We don't set locked to false to avoid unnecessary UI changes right before
|
|
19
50
|
// going to confirmation page.
|
|
20
51
|
case 68:case"end":return _context2.stop();}},_callee2,null,[[2,7],[15,20],[34,56]]);}));return function(_x){return _ref5.apply(this,arguments);};}(),[orderReadOnly,isGuestCheckout,isPickupContactSelectionEnabled,needsPayment,fetchCheckoutOrder,fetchCart,clearCheckoutCampaign,historyReplace,updateCheckoutOrder,billingAddress,isShippingAddressSelectionEnabled,shippingAddress,paymentTransactions,updateOptIns,submitCheckoutOrder,campaignAttribution,optInFormState.values]);var handleUpdateShippingMethod=useCallback(/*#__PURE__*/function(){var _ref10=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(selectedShippingMethod){return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:setLocked(true);_context3.prev=1;_context3.next=4;return updateCheckoutOrder({addressSequences:[_extends({},billingAddress),_extends({},shippingAddress,{orderSegment:{selectedShippingMethod:selectedShippingMethod}})].concat(isGuestCheckout&&pickupAddress?[_extends({},pickupAddress)]:[]),primaryBillToAddressSequenceIndex:0,primaryShipToAddressSequenceIndex:1});case 4:_context3.next=8;break;case 6:_context3.prev=6;_context3.t0=_context3["catch"](1);case 8:_context3.prev=8;_context3.next=11;return fetchCheckoutOrder();case 11:_context3.next=15;break;case 13:_context3.prev=13;_context3.t1=_context3["catch"](8);case 15:setLocked(false);case 16:case"end":return _context3.stop();}},_callee3,null,[[1,6],[8,13]]);}));return function(_x2){return _ref10.apply(this,arguments);};}(),[billingAddress,pickupAddress,shippingAddress,fetchCheckoutOrder,isGuestCheckout,updateCheckoutOrder]);// Whenever the order is locked we also want to show to loading bar.
|
|
21
|
-
|
|
52
|
+
useEffect(function(){if(isLocked){setLoading(true);return;}setLoading(false);},[isLocked]);useEffect(function(){if(isLoading){LoadingProvider.setLoading(pathPattern);return;}LoadingProvider.resetLoading(pathPattern);},[isLoading,pathPattern]);// Hold form states.
|
|
22
53
|
var formState=useFormState(defaultPickupPersonState,handleSubmitOrder,validationRules);// When "someone-else" is picked for pickup the validation rules need to change.
|
|
23
|
-
|
|
24
|
-
var value=
|
|
25
|
-
|
|
54
|
+
useEffect(function(){setValidationRules(formState.values.pickupPerson==='me'||isGuestCheckout?selfPickupConstraints:pickupConstraints);},[formState.values.pickupPerson,isGuestCheckout]);var isOrderable=useMemo(function(){return typeof(checkoutOrder===null||checkoutOrder===void 0?void 0:checkoutOrder.isOrderable)!=='undefined'?checkoutOrder.isOrderable:true;},[checkoutOrder]);// Create memoized context value.
|
|
55
|
+
var value=useMemo(function(){return{setPaymentHandler:function setPaymentHandler(handler){setPaymentButton(function(){return handler.getCustomPayButton();});paymentHandlerRef.current=handler;},paymentButton:paymentButton,paymentData:paymentData,setPaymentData:setPaymentData,paymentTransactions:paymentTransactions,isLocked:isLocked,isButtonLocked:(isLocked||isButtonLocked)&&needsPayment||!isOrderable,isLoading:isLoading,supportedCountries:shopSettings.supportedCountries,countrySortOrder:shopSettings.countrySortOrder,formValidationErrors:convertValidationErrors(formState.validationErrors||{}),formSetValues:formState.setValues,handleSubmitOrder:function handleSubmitOrder(){var promise=new Promise(function(resolve,reject){submitPromise.current={resolve:resolve,reject:reject};});formState.handleSubmit.apply(formState,arguments);return promise;},handleValidation:function handleValidation(){return formState.validate(formState.values);},updateShippingMethod:handleUpdateShippingMethod,defaultPickupPersonState:defaultPickupPersonState,userLocation:userLocation,billingAddress:billingAddress,shippingAddress:shippingAddress,pickupAddress:pickupAddress,taxLines:taxLines,order:checkoutOrder,currencyCode:checkoutOrder===null||checkoutOrder===void 0?void 0:checkoutOrder.currencyCode,needsPayment:needsPayment,orderReserveOnly:orderReserveOnly,isShippingAddressSelectionEnabled:isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled:isPickupContactSelectionEnabled,isGuestCheckout:isGuestCheckout,fulfillmentSlot:fulfillmentSlot,optInFormSetValues:optInFormState.setValues,defaultOptInFormState:defaultOptInFormState,setUpdateOptIns:function setUpdateOptIns(){var val=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;_setUpdateOptIns(val);},setButtonLocked:setButtonLocked,setLoading:setLoading,setLocked:setLocked};},[paymentButton,paymentData,paymentTransactions,isLocked,isButtonLocked,needsPayment,isOrderable,isLoading,shopSettings.supportedCountries,shopSettings.countrySortOrder,formState,handleUpdateShippingMethod,userLocation,billingAddress,shippingAddress,pickupAddress,taxLines,checkoutOrder,orderReserveOnly,isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled,isGuestCheckout,fulfillmentSlot,optInFormState.setValues,defaultOptInFormState]);// Handle deeplinks from external payment site.
|
|
56
|
+
useEffect(function(){if(!isAvailable())return undefined;/**
|
|
26
57
|
* @param {Object} event Event
|
|
27
58
|
*/var listener=/*#__PURE__*/function(){var _ref11=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(event){var _ref12,_ref12$link,link,_link$match,_link$match2,_,_scheme,path,_ref15,_ref16,order;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:_ref12=(event===null||event===void 0?void 0:event.detail)||{},_ref12$link=_ref12.link,link=_ref12$link===void 0?'':_ref12$link;/* eslint-disable-next-line no-unused-vars */_link$match=link.match(/(.*):\/\/([a-zA-Z0-9-/]*)(.*)/),_link$match2=_slicedToArray(_link$match,3),_=_link$match2[0],_scheme=_link$match2[1],path=_link$match2[2];// Order is done, fetch again to retrieve infos for success page
|
|
28
|
-
if(!(path==='payment/success')){_context4.next=11;break;}_context4.next=5;return Promise.all([fetchCheckoutOrder(),fetchCart()]);case 5:_ref15=_context4.sent;_ref16=_slicedToArray(_ref15,1);order=_ref16[0];historyReplace({pathname:CHECKOUT_CONFIRMATION_PATTERN,state:{order:order}});_context4.next=12;break;case 11:if(path==='payment/error'){showModal({title:null,confirm:null,dismiss:'modal.ok',message:'checkout.errors.payment.genericExternal'});}case 12:case"end":return _context4.stop();}},_callee4);}));return function listener(_x3){return _ref11.apply(this,arguments);};}();Linking.addEventListener('deepLinkOpened',listener);return function(){Linking.removeEventListener('deepLinkOpened',listener);};},[fetchCart,fetchCheckoutOrder,historyReplace,showModal]);if(!isDataReady||!isCheckoutInitialized){return null;}return React.createElement(Context.Provider,{value:value},children);};CheckoutProvider.defaultProps={
|
|
59
|
+
if(!(path==='payment/success')){_context4.next=11;break;}_context4.next=5;return Promise.all([fetchCheckoutOrder(),fetchCart()]);case 5:_ref15=_context4.sent;_ref16=_slicedToArray(_ref15,1);order=_ref16[0];historyReplace({pathname:CHECKOUT_CONFIRMATION_PATTERN,state:{order:order}});_context4.next=12;break;case 11:if(path==='payment/error'){showModal({title:null,confirm:null,dismiss:'modal.ok',message:'checkout.errors.payment.genericExternal'});}case 12:case"end":return _context4.stop();}},_callee4);}));return function listener(_x3){return _ref11.apply(this,arguments);};}();Linking.addEventListener('deepLinkOpened',listener);return function(){Linking.removeEventListener('deepLinkOpened',listener);};},[fetchCart,fetchCheckoutOrder,historyReplace,showModal]);if(!isDataReady||!isCheckoutInitialized){return null;}return React.createElement(Context.Provider,{value:value},children);};CheckoutProvider.defaultProps={billingAddress:null,campaignAttribution:null,fulfillmentSlot:null,isGuestCheckout:false,isPickupContactSelectionEnabled:false,isShippingAddressSelectionEnabled:false,order:null,orderInitialized:false,orderReadOnly:false,orderReserveOnly:false,pickupAddress:null,shippingAddress:null};export default connect(CheckoutProvider);/* eslint-enable no-unused-expressions */
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
import React from'react';import{hot}from'react-hot-loader/root';import SideNavigationProvider from"./SideNavigationProvider";import SideNavigationContent from"./SideNavigationContent";/**
|
|
2
|
-
* The SideNavigation component
|
|
3
|
-
* @
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import{hot}from'react-hot-loader/root';import SideNavigationProvider from"./SideNavigationProvider";import SideNavigationContent from"./SideNavigationContent";/**
|
|
2
|
+
* The SideNavigation component.
|
|
3
|
+
* @param {Object} props The component props.
|
|
4
|
+
* @param {Object} [props.classNames=null] Custom class names for the component.
|
|
5
|
+
* @param {number} [props.maxCategoryNesting=3] Maximum category nesting level.
|
|
6
|
+
* @param {Array} [props.routePatternBlacklist=[]] List of route patterns to blacklist.
|
|
7
|
+
* @returns {JSX.Element} The rendered component.
|
|
4
8
|
*/var SideNavigation=function SideNavigation(_ref){var maxCategoryNesting=_ref.maxCategoryNesting,routePatternBlacklist=_ref.routePatternBlacklist,classNames=_ref.classNames;return React.createElement(SideNavigationProvider,{maxCategoryNesting:maxCategoryNesting,routePatternBlacklist:routePatternBlacklist},React.createElement(SideNavigationContent,{classNames:classNames}));};SideNavigation.defaultProps={maxCategoryNesting:3,routePatternBlacklist:[],classNames:null};export default hot(SideNavigation);
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import React,{useEffect}from'react';import{LoadingIndicator}from'@shopgate/pwa-ui-shared';import SideNavigationCategoriesItemChildren from"./SideNavigationCategoriesItemChildren";import connect from"./SideNavigationCategories.connector";import{list,loadingIndicator}from"./SideNavigationCategories.style";import{item}from"./SideNavigationItem.style";/**
|
|
2
|
-
* The SideNavigationCategories component
|
|
3
|
-
* @
|
|
4
|
-
|
|
1
|
+
import React,{useEffect}from'react';import{LoadingIndicator}from'@shopgate/pwa-ui-shared';import PropTypes from'prop-types';import SideNavigationCategoriesItemChildren from"./SideNavigationCategoriesItemChildren";import connect from"./SideNavigationCategories.connector";import{list,loadingIndicator}from"./SideNavigationCategories.style";import{item}from"./SideNavigationItem.style";/**
|
|
2
|
+
* The SideNavigationCategories component.
|
|
3
|
+
* @param {Object} props - The component props.
|
|
4
|
+
* @property {string} [props.categoryId] - The ID of the category to fetch.
|
|
5
|
+
* @property {boolean} [props.rootCategoriesFetching] - whether root categories are being fetched.
|
|
6
|
+
* @property {Array} [props.subcategories] - The list of subcategories.
|
|
7
|
+
* @property {Function} props.fetchCategory - Function to fetch the category data.
|
|
8
|
+
* @returns {JSX.Element|null} The rendered component or null.
|
|
9
|
+
*/var SideNavigationCategories=function SideNavigationCategories(_ref){var categoryId=_ref.categoryId,subcategories=_ref.subcategories,fetchCategory=_ref.fetchCategory,rootCategoriesFetching=_ref.rootCategoriesFetching;useEffect(function(){if(!subcategories){fetchCategory(categoryId);}},[categoryId,fetchCategory,subcategories]);if(!subcategories&&rootCategoriesFetching){return React.createElement("li",{className:item},React.createElement(LoadingIndicator,{className:loadingIndicator}));}if(!subcategories||Array.isArray(subcategories)&&subcategories.length===0){return null;}return React.createElement("li",{className:list},React.createElement(SideNavigationCategoriesItemChildren,{level:0,subcategories:subcategories}));};SideNavigationCategories.defaultProps={categoryId:null,rootCategoriesFetching:false,subcategories:null};export default connect(SideNavigationCategories);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var list=css({borderBottom:"1px solid ".concat(colors.shade7)});export var loadingIndicator=css({padding:0,margin:'auto'}).toString();
|
|
1
|
+
import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var list=css({borderBottom:"1px solid ".concat(colors.shade7)}).toString();export var loadingIndicator=css({padding:0,margin:'auto'}).toString();
|
|
@@ -1,5 +1,12 @@
|
|
|
1
|
-
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;}import React,{useState,useCallback,useMemo,useEffect}from'react';import ArrowDrop from'@shopgate/pwa-ui-shared/icons/ArrowDropIcon';import{bin2hex}from'@shopgate/pwa-common/helpers/data';import{CATEGORY_PATH}from'@shopgate/pwa-common-commerce/category/constants';import{ProgressBar}from'@shopgate/pwa-ui-shared';// eslint-disable-next-line import/no-cycle
|
|
1
|
+
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;}import React,{useState,useCallback,useMemo,useEffect}from'react';import PropTypes from'prop-types';import ArrowDrop from'@shopgate/pwa-ui-shared/icons/ArrowDropIcon';import{bin2hex}from'@shopgate/pwa-common/helpers/data';import{CATEGORY_PATH}from'@shopgate/pwa-common-commerce/category/constants';import{ProgressBar}from'@shopgate/pwa-ui-shared';// eslint-disable-next-line import/no-cycle
|
|
2
2
|
import SideNavigationCategoriesItemChildren from"./SideNavigationCategoriesItemChildren";import SideNavigationItem from"./SideNavigationItem";import connect from"./SideNavigationCategoriesItem.connector";import{chevronButton,chevronUp,chevronDown,progressBar,open}from"./SideNavigationCategoriesItem.style";import{useSideNavigation}from"./SideNavigation.hooks";/**
|
|
3
|
-
* The SideNavigationCategoriesItem component
|
|
4
|
-
* @
|
|
3
|
+
* The SideNavigationCategoriesItem component.
|
|
4
|
+
* @param {Object} props The component props.
|
|
5
|
+
* @param {string} [props.categoryId=null] The category ID.
|
|
6
|
+
* @param {Object} props.category The category object.
|
|
7
|
+
* @param {Array} [props.subcategories=null] The list of subcategories.
|
|
8
|
+
* @param {boolean} [props.subcategoriesFetching=false] Whether subcategories are being fetched.
|
|
9
|
+
* @param {Function} props.fetchCategory The function to fetch a category.
|
|
10
|
+
* @param {number} [props.level=0] The current nesting level.
|
|
11
|
+
* @returns {JSX.Element|null} The rendered component.
|
|
5
12
|
*/var SideNavigationCategoriesItem=function SideNavigationCategoriesItem(_ref){var categoryId=_ref.categoryId,category=_ref.category,subcategories=_ref.subcategories,subcategoriesFetching=_ref.subcategoriesFetching,fetchCategory=_ref.fetchCategory,level=_ref.level;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isOpen=_useState2[0],setIsOpen=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isLoading=_useState4[0],setIsLoading=_useState4[1];var _useSideNavigation=useSideNavigation(),maxCategoryNesting=_useSideNavigation.maxCategoryNesting,activeCategoryId=_useSideNavigation.activeCategoryId;var hasSubcategories=useMemo(function(){return category.childrenCount!==0;},[category.childrenCount]);var maxNestingReached=useMemo(function(){return level+1===maxCategoryNesting;},[level,maxCategoryNesting]);var handleClick=useCallback(function(){setIsOpen(!isOpen);if(hasSubcategories&&!subcategories){setIsLoading(true);fetchCategory(categoryId);}},[categoryId,fetchCategory,hasSubcategories,isOpen,subcategories]);useEffect(function(){if(isLoading&&(subcategories||!subcategoriesFetching)){setIsLoading(false);}},[isLoading,subcategories,subcategoriesFetching]);var buttonRight=useMemo(function(){if(!maxNestingReached&&hasSubcategories){return React.createElement("button",{type:"button",onClick:handleClick,className:chevronButton},React.createElement(ArrowDrop,{className:(isOpen&&subcategories?chevronUp:chevronDown).toString()}));}return null;},[handleClick,hasSubcategories,isOpen,maxNestingReached,subcategories]);if(!category){return null;}return React.createElement(SideNavigationItem,{href:"".concat(CATEGORY_PATH,"/").concat(bin2hex(categoryId)),label:category.name,level:level,buttonRight:buttonRight,forceActive:activeCategoryId===categoryId,className:level===0&&isOpen?open:null},isLoading&&React.createElement("div",{className:progressBar},React.createElement(ProgressBar,null)),!maxNestingReached&&isOpen&&hasSubcategories&&subcategories&&React.createElement(SideNavigationCategoriesItemChildren,{subcategories:subcategories,level:level+1}));};SideNavigationCategoriesItem.defaultProps={subcategories:null,subcategoriesFetching:false,categoryId:null,level:0};export default connect(SideNavigationCategoriesItem);
|