@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

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

package/cart/components/PaymentBar/PaymentBarDiscounts.js

@@ -15,6 +15,7 @@ import connect from "./PaymentBarDiscounts.connector";
  * @param {string|null} [props.className=null] The class name for styling.
  * @returns {JSX.Element|null} The rendered component or null.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PaymentBarDiscounts({
   discounts,
   showSeparator,
@@ -28,28 +29,29 @@ function PaymentBarDiscounts({
   if (!discounts) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_PAYMENT_BAR_TOTALS_DISCOUNTS
-  }, discounts.map(({
-    label,
-    amount
-  }) => /*#__PURE__*/React.createElement(CartTotalLine, {
-    key: `discount-${label}-${amount}`,
-    type: "discount",
-    isDisabled: isLoading,
-    className: className
-  }, /*#__PURE__*/React.createElement(CartTotalLine.Label, {
-    label: label ? 'cart.discount_with_label' : 'cart.discount',
-    labelParams: {
-      label
-    },
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(CartTotalLine.Amount, {
-    amount: -amount,
-    currency: currency
-  }), hasPromotionCoupons && /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
-    className: spacer
-  }))));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CART_PAYMENT_BAR_TOTALS_DISCOUNTS,
+    children: discounts.map(({
+      label,
+      amount
+    }) => /*#__PURE__*/_jsxs(CartTotalLine, {
+      type: "discount",
+      isDisabled: isLoading,
+      className: className,
+      children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
+        label: label ? 'cart.discount_with_label' : 'cart.discount',
+        labelParams: {
+          label
+        },
+        showSeparator: showSeparator
+      }), /*#__PURE__*/_jsx(CartTotalLine.Amount, {
+        amount: -amount,
+        currency: currency
+      }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
+        className: spacer
+      })]
+    }, `discount-${label}-${amount}`))
+  });
 }
 PaymentBarDiscounts.defaultProps = {
   discounts: null,

package/cart/components/PaymentBar/PaymentBarGrandTotal.js

@@ -16,6 +16,7 @@ import connect from "./PaymentBarGrandTotal.connector";
  * @param {string|null} [props.className=null] The class name for styling.
  * @returns {JSX.Element|null} The rendered component or null.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PaymentBarGrandTotal = ({
   amount,
   label,
@@ -33,21 +34,23 @@ const PaymentBarGrandTotal = ({
   if (hideTotal) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_PAYMENT_BAR_TOTALS_GRAND_TOTAL
-  }, /*#__PURE__*/React.createElement(CartTotalLine, {
-    isDisabled: isLoading,
-    type: "grandTotal",
-    className: className
-  }, /*#__PURE__*/React.createElement(CartTotalLine.Label, {
-    label: label,
-    showSeparator: showSeparator
-  }), /*#__PURE__*/React.createElement(CartTotalLine.Amount, {
-    amount: amount,
-    currency: currency
-  }), hasPromotionCoupons && /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
-    className: spacer
-  })));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CART_PAYMENT_BAR_TOTALS_GRAND_TOTAL,
+    children: /*#__PURE__*/_jsxs(CartTotalLine, {
+      isDisabled: isLoading,
+      type: "grandTotal",
+      className: className,
+      children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
+        label: label,
+        showSeparator: showSeparator
+      }), /*#__PURE__*/_jsx(CartTotalLine.Amount, {
+        amount: amount,
+        currency: currency
+      }), hasPromotionCoupons && /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
+        className: spacer
+      })]
+    })
+  });
 };
 PaymentBarGrandTotal.defaultProps = {
   className: null,

package/cart/components/PaymentBar/PaymentBarPromotionCouponMessages.js

@@ -7,6 +7,7 @@ import { errorBehavior } from '@shopgate/engage/core';
 import { responsiveMediaQuery } from '@shopgate/engage/styles';
 import { CartContext } from "../../cart.context";
 import { spacer } from "./PaymentBarContent.style";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   line: css({
     justifyContent: 'start',
@@ -51,19 +52,22 @@ const PaymentBarPromotionCouponMessages = ({
     message,
     additionalParams,
     type
-  }) => /*#__PURE__*/React.createElement(CartTotalLine, {
+  }) => /*#__PURE__*/_jsx(CartTotalLine, {
     className: styles.line,
-    key: message
-  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
-    className: spacer
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.message, {
-      [styles.loading]: isLoading,
-      [styles.error]: type === 'error',
-      [styles.warning]: type === 'warning',
-      [styles.info]: type === 'info'
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(CartTotalLine.Spacer, {
+        className: spacer
+      }), /*#__PURE__*/_jsx("div", {
+        className: classNames(styles.message, {
+          [styles.loading]: isLoading,
+          [styles.error]: type === 'error',
+          [styles.warning]: type === 'warning',
+          [styles.info]: type === 'info'
+        }),
+        children: errorBehavior.getErrorMessage(message, additionalParams)
+      })]
     })
-  }, errorBehavior.getErrorMessage(message, additionalParams)))));
+  }, message));
 };
 PaymentBarPromotionCouponMessages.defaultProps = {
   messages: []

package/cart/components/PaymentBar/PaymentBarPromotionCoupons.js

@@ -11,6 +11,7 @@ import { CartContext } from "../../cart.context";
 import PaymentBarPromotionalText from "./PaymentBarPromotionalText";
 import { spacer } from "./PaymentBarContent.style";
 import connect from "./PaymentBarPromotionCoupons.connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   icon: css({
     backgroundColor: '#898989',
@@ -63,42 +64,45 @@ const PaymentBarPromotionCoupons = ({
         type
       }) => type === 'error');
     }
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: `promotion-coupon-${code}-${amount}`
-    }, /*#__PURE__*/React.createElement(CartTotalLine, {
-      isDisabled: isLoading,
-      className: classNames(className, {
-        [styles.withMessages]: !!messages.length
-      })
-    }, /*#__PURE__*/React.createElement(CartTotalLine.Label, {
-      label: i18n.text('cart.coupon_label', {
-        label: code
-      }),
-      showSeparator: showSeparator,
-      suffix: !hasError ? /*#__PURE__*/React.createElement(PaymentBarPromotionalText, {
-        text: promotionalText
-      }) : null
-    }), amount && /*#__PURE__*/React.createElement(CartTotalLine.Amount, {
-      amount: amount,
-      currency: currency
-    }), /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
-      className: spacer
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.icon,
-      onClick: () => {
-        deleteCoupon(code);
-      },
-      onKeyDown: () => {
-        deleteCoupon(code);
-      },
-      role: "button",
-      tabIndex: 0
-    }, /*#__PURE__*/React.createElement(CrossIcon, null)))), /*#__PURE__*/React.createElement(PaymentBarPromotionCouponMessages, {
-      messages: messages
-    }), hasError && /*#__PURE__*/React.createElement(PaymentBarPromotionalText, {
-      text: promotionalText,
-      renderIcon: false
-    }));
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsxs(CartTotalLine, {
+        isDisabled: isLoading,
+        className: classNames(className, {
+          [styles.withMessages]: !!messages.length
+        }),
+        children: [/*#__PURE__*/_jsx(CartTotalLine.Label, {
+          label: i18n.text('cart.coupon_label', {
+            label: code
+          }),
+          showSeparator: showSeparator,
+          suffix: !hasError ? /*#__PURE__*/_jsx(PaymentBarPromotionalText, {
+            text: promotionalText
+          }) : null
+        }), amount && /*#__PURE__*/_jsx(CartTotalLine.Amount, {
+          amount: amount,
+          currency: currency
+        }), /*#__PURE__*/_jsx(CartTotalLine.Spacer, {
+          className: spacer,
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.icon,
+            onClick: () => {
+              deleteCoupon(code);
+            },
+            onKeyDown: () => {
+              deleteCoupon(code);
+            },
+            role: "button",
+            tabIndex: 0,
+            children: /*#__PURE__*/_jsx(CrossIcon, {})
+          })
+        })]
+      }), /*#__PURE__*/_jsx(PaymentBarPromotionCouponMessages, {
+        messages: messages
+      }), hasError && /*#__PURE__*/_jsx(PaymentBarPromotionalText, {
+        text: promotionalText,
+        renderIcon: false
+      })]
+    }, `promotion-coupon-${code}-${amount}`);
   });
 };
 PaymentBarPromotionCoupons.defaultProps = {