@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/cart/components/CartItems/CartItems.js

@@ -25,6 +25,7 @@ import CartItemsSubstitution from "./CartItemsSubstitution";
  * @param {string} [props.currencyOverride] The currency override.
  * @returns {JSX.Element|null}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CartItems = ({
   cartItems,
   onFocus,
@@ -38,51 +39,61 @@ const CartItems = ({
   if (!cartItems || cartItems.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: ">xs",
-    webOnly: true
-  }, /*#__PURE__*/React.createElement(CartItemsHeaderWide, {
-    editable: editable,
-    isOrderDetails: isOrderDetails,
-    isDirectShipOnly: isDirectShipOnly,
-    isCheckoutConfirmation: isCheckoutConfirmation
-  })), /*#__PURE__*/React.createElement(CardList, {
-    className: items
-  }, !isOrderDetails ? /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    appAlways: true,
-    breakpoint: "<=xs"
-  }, /*#__PURE__*/React.createElement(FulfillmentSlotSwitcher, {
-    renderBar: true,
-    card: true,
-    editable: editable
-  })) : null, editable && !isDirectShipOnly && /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: "<=xs",
-    appAlways: true
-  }, /*#__PURE__*/React.createElement(CartItemsSubstitution, {
-    cartItems: cartItems,
-    wrapCard: true,
-    className: card
-  })), cartItems.map(item => /*#__PURE__*/React.createElement(CardList.Item, {
-    className: card,
-    key: item.id
-  }, /*#__PURE__*/React.createElement(CartItemProvider, {
-    cartItem: item,
-    isEditable: editable,
-    isOrderDetails: isOrderDetails,
-    cartIsDirectShipOnly: isDirectShipOnly,
-    isCheckoutConfirmation: isCheckoutConfirmation,
-    locationId: item.fulfillmentLocationId
-  }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement(CartItemCard, {
-    multiLineReservation: multiLineReservation,
-    fulfillmentLocationId: item.fulfillmentLocationId,
-    fulfillmentMethod: item.fulfillmentMethod,
-    hasMessages: Array.isArray(item.messages) && item.messages.length > 0
-  }, /*#__PURE__*/React.createElement(CartItem, {
-    item: item,
-    onFocus: onFocus,
-    editable: editable,
-    currencyOverride: currencyOverride
-  }))))))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+      breakpoint: ">xs",
+      webOnly: true,
+      children: /*#__PURE__*/_jsx(CartItemsHeaderWide, {
+        editable: editable,
+        isOrderDetails: isOrderDetails,
+        isDirectShipOnly: isDirectShipOnly,
+        isCheckoutConfirmation: isCheckoutConfirmation
+      })
+    }), /*#__PURE__*/_jsxs(CardList, {
+      className: items,
+      children: [!isOrderDetails ? /*#__PURE__*/_jsx(ResponsiveContainer, {
+        appAlways: true,
+        breakpoint: "<=xs",
+        children: /*#__PURE__*/_jsx(FulfillmentSlotSwitcher, {
+          renderBar: true,
+          card: true,
+          editable: editable
+        })
+      }) : null, editable && !isDirectShipOnly && /*#__PURE__*/_jsx(ResponsiveContainer, {
+        breakpoint: "<=xs",
+        appAlways: true,
+        children: /*#__PURE__*/_jsx(CartItemsSubstitution, {
+          cartItems: cartItems,
+          wrapCard: true,
+          className: card
+        })
+      }), cartItems.map(item => /*#__PURE__*/_jsx(CardList.Item, {
+        className: card,
+        children: /*#__PURE__*/_jsx(CartItemProvider, {
+          cartItem: item,
+          isEditable: editable,
+          isOrderDetails: isOrderDetails,
+          cartIsDirectShipOnly: isDirectShipOnly,
+          isCheckoutConfirmation: isCheckoutConfirmation,
+          locationId: item.fulfillmentLocationId,
+          children: /*#__PURE__*/_jsx("ul", {
+            children: /*#__PURE__*/_jsx(CartItemCard, {
+              multiLineReservation: multiLineReservation,
+              fulfillmentLocationId: item.fulfillmentLocationId,
+              fulfillmentMethod: item.fulfillmentMethod,
+              hasMessages: Array.isArray(item.messages) && item.messages.length > 0,
+              children: /*#__PURE__*/_jsx(CartItem, {
+                item: item,
+                onFocus: onFocus,
+                editable: editable,
+                currencyOverride: currencyOverride
+              })
+            })
+          })
+        })
+      }, item.id))]
+    })]
+  });
 };
 CartItems.defaultProps = {
   cartItems: null,

package/cart/components/CartItems/CartItemsHeaderWide.js

@@ -15,49 +15,60 @@ import connect from "./CartItemsHeaderWide.connector";
  * @param {number} props.enabledFulfillmentMethodsCount The count of enabled fulfillment methods.
  * @returns {JSX.Element} The rendered component.
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const CartItemsHeaderWide = ({
   editable,
   isOrderDetails,
   enabledFulfillmentMethodsCount,
   hasLineItemPromotions,
   isDirectShipOnly
-}) => /*#__PURE__*/React.createElement("div", {
-  className: header
-}, /*#__PURE__*/React.createElement("div", {
-  className: imageColumn
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "cart.items"
-})), /*#__PURE__*/React.createElement("div", {
-  className: detailsColumn
-}), /*#__PURE__*/React.createElement("div", {
-  className: classNames(column.toString(), {
-    [priceColumnWide]: hasLineItemPromotions
-  })
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "cart.price"
-})), isOrderDetails && /*#__PURE__*/React.createElement(React.Fragment, null, !isDirectShipOnly ? /*#__PURE__*/React.createElement("div", {
-  className: locationColumn
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "cart.location"
-})) : null, /*#__PURE__*/React.createElement("div", {
-  className: column
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "cart.status"
-})), /*#__PURE__*/React.createElement("div", {
-  className: column
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "cart.fulfilled_quantity"
-}))), /*#__PURE__*/React.createElement("div", {
-  className: editable ? quantityPickerColumn : quantityPickerColumnNotEditable
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: isOrderDetails ? 'cart.ordered_quantity' : 'cart.quantity'
-})), /*#__PURE__*/React.createElement("div", {
-  className: column
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "cart.subtotal"
-})), editable && enabledFulfillmentMethodsCount > 1 && /*#__PURE__*/React.createElement("div", {
-  className: contextMenuColumn
-}));
+}) => /*#__PURE__*/_jsxs("div", {
+  className: header,
+  children: [/*#__PURE__*/_jsx("div", {
+    className: imageColumn,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: "cart.items"
+    })
+  }), /*#__PURE__*/_jsx("div", {
+    className: detailsColumn
+  }), /*#__PURE__*/_jsx("div", {
+    className: classNames(column.toString(), {
+      [priceColumnWide]: hasLineItemPromotions
+    }),
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: "cart.price"
+    })
+  }), isOrderDetails && /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!isDirectShipOnly ? /*#__PURE__*/_jsx("div", {
+      className: locationColumn,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.location"
+      })
+    }) : null, /*#__PURE__*/_jsx("div", {
+      className: column,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.status"
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: column,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.fulfilled_quantity"
+      })
+    })]
+  }), /*#__PURE__*/_jsx("div", {
+    className: editable ? quantityPickerColumn : quantityPickerColumnNotEditable,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: isOrderDetails ? 'cart.ordered_quantity' : 'cart.quantity'
+    })
+  }), /*#__PURE__*/_jsx("div", {
+    className: column,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: "cart.subtotal"
+    })
+  }), editable && enabledFulfillmentMethodsCount > 1 && /*#__PURE__*/_jsx("div", {
+    className: contextMenuColumn
+  })]
+});
 CartItemsHeaderWide.defaultProps = {
   editable: true,
   isOrderDetails: false,

package/cart/components/CartItems/CartItemsSubstitution.js

@@ -10,6 +10,7 @@ import connect from "./CartItemsSubscription.connector";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartItemsSubstitution = ({
   cartItems,
   updateProductsInCart,
@@ -22,22 +23,27 @@ const CartItemsSubstitution = ({
     substitutionAllowed: !allAllowed
   }))), [allAllowed, cartItems, updateProductsInCart]);
   if (wrapCard) {
-    return /*#__PURE__*/React.createElement(SubstitutionWrapper, null, /*#__PURE__*/React.createElement(CardList.Item, {
-      className: className
-    }, /*#__PURE__*/React.createElement(Substitution, {
+    return /*#__PURE__*/_jsx(SubstitutionWrapper, {
+      children: /*#__PURE__*/_jsx(CardList.Item, {
+        className: className,
+        children: /*#__PURE__*/_jsx(Substitution, {
+          id: "substitution-all",
+          label: i18n.text('cart.allow_substitution_all'),
+          checked: allAllowed,
+          onChange: handleChange
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(SubstitutionWrapper, {
+    children: /*#__PURE__*/_jsx(Substitution, {
+      className: className,
       id: "substitution-all",
       label: i18n.text('cart.allow_substitution_all'),
       checked: allAllowed,
       onChange: handleChange
-    })));
-  }
-  return /*#__PURE__*/React.createElement(SubstitutionWrapper, null, /*#__PURE__*/React.createElement(Substitution, {
-    className: className,
-    id: "substitution-all",
-    label: i18n.text('cart.allow_substitution_all'),
-    checked: allAllowed,
-    onChange: handleChange
-  }));
+    })
+  });
 };
 CartItemsSubstitution.defaultProps = {
   className: undefined,

package/cart/components/CartSummaryWide/CartSummaryWide.js

@@ -15,34 +15,38 @@ import CartSummaryWideFooter from "./CartSummaryWideFooter";
  * @param {Object} The component props
  * @returns {JSX}
  */
-const CartSummaryWide = () => /*#__PURE__*/React.createElement("div", {
-  className: container
-}, /*#__PURE__*/React.createElement("h2", {
-  className: headline
-}, i18n.text('checkout.summary.headline')), /*#__PURE__*/React.createElement("div", {
-  className: summary
-}, /*#__PURE__*/React.createElement(PaymentBarSubTotal, {
-  showSeparator: false,
-  label: "cart.subtotal",
-  className: total
-}), /*#__PURE__*/React.createElement(PaymentBarAppliedPromotions, {
-  showSeparator: false,
-  className: total
-}), /*#__PURE__*/React.createElement(PaymentBarPromotionCoupons, {
-  showSeparator: false,
-  className: total
-}), /*#__PURE__*/React.createElement(PaymentBarDiscounts, {
-  showSeparator: false,
-  className: total
-}), /*#__PURE__*/React.createElement(PaymentBarShippingCost, {
-  showSeparator: false,
-  className: total
-}), /*#__PURE__*/React.createElement(PaymentBarTax, {
-  showSeparator: false,
-  className: total
-}), /*#__PURE__*/React.createElement(PaymentBarGrandTotal, {
-  showSeparator: false,
-  label: "cart.grand_total",
-  className: grandTotal
-})), /*#__PURE__*/React.createElement(CartSummaryWideCheckoutButton, null), /*#__PURE__*/React.createElement(CartSummaryWideFooter, null));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CartSummaryWide = () => /*#__PURE__*/_jsxs("div", {
+  className: container,
+  children: [/*#__PURE__*/_jsx("h2", {
+    className: headline,
+    children: i18n.text('checkout.summary.headline')
+  }), /*#__PURE__*/_jsxs("div", {
+    className: summary,
+    children: [/*#__PURE__*/_jsx(PaymentBarSubTotal, {
+      showSeparator: false,
+      label: "cart.subtotal",
+      className: total
+    }), /*#__PURE__*/_jsx(PaymentBarAppliedPromotions, {
+      showSeparator: false,
+      className: total
+    }), /*#__PURE__*/_jsx(PaymentBarPromotionCoupons, {
+      showSeparator: false,
+      className: total
+    }), /*#__PURE__*/_jsx(PaymentBarDiscounts, {
+      showSeparator: false,
+      className: total
+    }), /*#__PURE__*/_jsx(PaymentBarShippingCost, {
+      showSeparator: false,
+      className: total
+    }), /*#__PURE__*/_jsx(PaymentBarTax, {
+      showSeparator: false,
+      className: total
+    }), /*#__PURE__*/_jsx(PaymentBarGrandTotal, {
+      showSeparator: false,
+      label: "cart.grand_total",
+      className: grandTotal
+    })]
+  }), /*#__PURE__*/_jsx(CartSummaryWideCheckoutButton, {}), /*#__PURE__*/_jsx(CartSummaryWideFooter, {})]
+});
 export default CartSummaryWide;

package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.js

@@ -14,6 +14,7 @@ import connect from "./CartSummaryWideCheckoutButton.connector";
  * @param {boolean} props.isOrderable Indicates whether the cart is orderable.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartSummaryWideCheckoutButton = ({
   isOrderable
 }) => {
@@ -24,23 +25,27 @@ const CartSummaryWideCheckoutButton = ({
   const classes = classNames(button, {
     [disabledButton]: !isActive
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_CHECKOUT_BUTTON,
-    portalProps: {
-      isActive
-    }
-  }, /*#__PURE__*/React.createElement(Link, {
-    href: CHECKOUT_PATH,
-    disabled: !isActive
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    disabled: !isActive,
-    type: "regular",
-    className: classes
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.checkout"
-  })))));
+  return /*#__PURE__*/_jsx("div", {
+    className: container,
+    children: /*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: CART_CHECKOUT_BUTTON,
+      portalProps: {
+        isActive
+      },
+      children: /*#__PURE__*/_jsx(Link, {
+        href: CHECKOUT_PATH,
+        disabled: !isActive,
+        children: /*#__PURE__*/_jsx(RippleButton, {
+          disabled: !isActive,
+          type: "regular",
+          className: classes,
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: "cart.checkout"
+          })
+        })
+      })
+    })
+  });
 };
 CartSummaryWideCheckoutButton.defaultProps = {
   isOrderable: true

package/cart/components/CartSummaryWide/CartSummaryWideFooter.js

@@ -7,6 +7,7 @@ import { SupplementalContent } from "../SupplementalContent";
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartSummaryWideFooter = () => {
   const {
     flags
@@ -14,6 +15,6 @@ const CartSummaryWideFooter = () => {
   if (!flags[FLAG_MULTI_LINE_RESERVE]) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SupplementalContent, null);
+  return /*#__PURE__*/_jsx(SupplementalContent, {});
 };
 export default CartSummaryWideFooter;

package/cart/components/PaymentBar/PaymentBar.js

@@ -8,6 +8,7 @@ import PaymentBarContent from "./PaymentBarContent";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function PaymentBar({
   visible,
   showSeparator
@@ -16,7 +17,7 @@ function PaymentBar({
   if (!visible || !domElement) {
     return null;
   }
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(PaymentBarContent, {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(PaymentBarContent, {
     showSeparator: showSeparator
   }), domElement);
 }

package/cart/components/PaymentBar/PaymentBarAppliedPromotions.js

@@ -10,6 +10,7 @@ import connect from "./PaymentBarAppliedPromotions.connector";
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PaymentBarAppliedPromotions = ({
   promotions,
   className,
@@ -30,24 +31,24 @@ const PaymentBarAppliedPromotions = ({
     const {
       absoluteAmount: amount
     } = discount;
-    return /*#__PURE__*/React.createElement(CartTotalLine, {
-      key: `promotion-${code}-${amount}`,
+    return /*#__PURE__*/_jsxs(CartTotalLine, {
       isDisabled: isLoading,
-      className: className
-    }, /*#__PURE__*/React.createElement(CartTotalLine.Label, {
-      label: i18n.text('cart.promotion_label', {
-        label: name
-      }),
-      showSeparator: showSeparator,
-      suffix: /*#__PURE__*/React.createElement(PaymentBarPromotionalText, {
-        text: promotionalText
-      })
-    }), /*#__PURE__*/React.createElement(CartTotalLine.Amount, {
-      amount: amount,
-      currency: currency
-    }), hasPromotionCoupons && /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
-      className: spacer
-    }));
+      className: className,
+      children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
+        label: i18n.text('cart.promotion_label', {
+          label: name
+        }),
+        showSeparator: showSeparator,
+        suffix: /*#__PURE__*/_jsx(PaymentBarPromotionalText, {
+          text: promotionalText
+        })
+      }), /*#__PURE__*/_jsx(CartTotalLine.Amount, {
+        amount: amount,
+        currency: currency
+      }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
+        className: spacer
+      })]
+    }, `promotion-${code}-${amount}`);
   });
 };
 PaymentBarAppliedPromotions.defaultProps = {

package/cart/components/PaymentBar/PaymentBarCheckoutButton.js

@@ -13,6 +13,7 @@ import { button, disabledButton } from "./PaymentBarCheckoutButton.style";
  * @param {boolean} isOrderable Whether the cart is orderable.
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PaymentBarCheckoutButton = ({
   isOrderable
 }) => {
@@ -20,24 +21,27 @@ const PaymentBarCheckoutButton = ({
     isLoading
   } = useContext(CartContext);
   const isActive = useMemo(() => isOrderable && !isLoading, [isLoading, isOrderable]);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: CART_CHECKOUT_BUTTON,
     portalProps: {
       isActive
-    }
-  }, /*#__PURE__*/React.createElement(Link, {
-    href: CHECKOUT_PATH,
-    disabled: !isActive,
-    tabIndex: 0,
-    role: "button",
-    "aria-disabled": !isActive
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    disabled: !isActive,
-    type: "regular",
-    className: isActive ? button : disabledButton
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.checkout"
-  }))));
+    },
+    children: /*#__PURE__*/_jsx(Link, {
+      href: CHECKOUT_PATH,
+      disabled: !isActive,
+      tabIndex: 0,
+      role: "button",
+      "aria-disabled": !isActive,
+      children: /*#__PURE__*/_jsx(RippleButton, {
+        disabled: !isActive,
+        type: "regular",
+        className: isActive ? button : disabledButton,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "cart.checkout"
+        })
+      })
+    })
+  });
 };
 PaymentBarCheckoutButton.defaultProps = {
   isOrderable: true

package/cart/components/PaymentBar/PaymentBarContent.js

@@ -18,36 +18,43 @@ import { wrapper, container, checkoutButtonContainer, checkoutButton } from "./P
  * The PaymentBarContent component.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PaymentBarContent({
   showSeparator
 }) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(wrapper, 'theme__cart__payment-bar')
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_PAYMENT_BAR
-  }, /*#__PURE__*/React.createElement(Grid, {
-    className: container
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_PAYMENT_BAR_TOTALS
-  }, /*#__PURE__*/React.createElement(PaymentBarSubTotal, {
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(PaymentBarAppliedPromotions, {
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(PaymentBarPromotionCoupons, {
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(PaymentBarDiscounts, {
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(PaymentBarShippingCost, {
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(PaymentBarTax, {
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(PaymentBarGrandTotal, {
-    showSeparator: showSeparator
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: checkoutButtonContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: checkoutButton
-  }, /*#__PURE__*/React.createElement(PaymentBarCheckoutButton, null)))));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(wrapper, 'theme__cart__payment-bar'),
+    children: /*#__PURE__*/_jsxs(SurroundPortals, {
+      portalName: CART_PAYMENT_BAR,
+      children: [/*#__PURE__*/_jsx(Grid, {
+        className: container,
+        children: /*#__PURE__*/_jsxs(SurroundPortals, {
+          portalName: CART_PAYMENT_BAR_TOTALS,
+          children: [/*#__PURE__*/_jsx(PaymentBarSubTotal, {
+            showSeparator: showSeparator
+          }), /*#__PURE__*/_jsx(PaymentBarAppliedPromotions, {
+            showSeparator: showSeparator
+          }), /*#__PURE__*/_jsx(PaymentBarPromotionCoupons, {
+            showSeparator: showSeparator
+          }), /*#__PURE__*/_jsx(PaymentBarDiscounts, {
+            showSeparator: showSeparator
+          }), /*#__PURE__*/_jsx(PaymentBarShippingCost, {
+            showSeparator: showSeparator
+          }), /*#__PURE__*/_jsx(PaymentBarTax, {
+            showSeparator: showSeparator
+          }), /*#__PURE__*/_jsx(PaymentBarGrandTotal, {
+            showSeparator: showSeparator
+          })]
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: checkoutButtonContainer,
+        children: /*#__PURE__*/_jsx("div", {
+          className: checkoutButton,
+          children: /*#__PURE__*/_jsx(PaymentBarCheckoutButton, {})
+        })
+      })]
+    })
+  });
 }
 PaymentBarContent.defaultProps = {
   showSeparator: true