@alma/widgets 2.5.0 → 2.7.0

package/dist/raw/widgets.umd.js

@@ -16780,7 +16780,9 @@
     closeButton: prefix + '-close-button',
     scheduleDetails: prefix + '-schedule-details',
     scheduleTotal: prefix + '-schedule-total',
-    scheduleCredit: prefix + '-schedule-credit'
+    scheduleCredit: prefix + '-schedule-credit',
+    cardContainer: prefix + '-card-logos',
+    summary: prefix + '-summary'
   };
 
   var _excluded = ["children", "isOpen", "onClose", "className", "contentClassName", "scrollable"];
@@ -18322,7 +18324,7 @@
     }));
   };
 
-  var s$3 = {"schedule":"_MPKjS","scheduleLine":"_1A7Qv","total":"_14Ejo","creditCost":"_1ZIgu","creditMessage":"_1BUr8"};
+  var s$3 = {"schedule":"_MPKjS","scheduleLine":"_1A7Qv","total":"_14Ejo","summary":"_65ZpD","creditCost":"_1ZIgu","creditCostAmount":"_tUTZp","creditMessage":"_1BUr8"};
 
   var Schedule = function Schedule(_ref) {
     var currentPlan = _ref.currentPlan;
@@ -18332,9 +18334,29 @@
     var customerFees = priceFromCents(currentPlan ? currentPlan.customer_total_cost_amount : 0);
     var isCredit = currentPlan && currentPlan.installments_count > 4;
     var intl = useIntl();
-    return /*#__PURE__*/react.createElement("div", {
+    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
       className: classnames(s$3.schedule, STATIC_CUSTOMISATION_CLASSES.scheduleDetails),
       "data-testid": "modal-installments-element"
+    }, ((currentPlan == null ? void 0 : currentPlan.payment_plan) || []).map(function (installment, index) {
+      return /*#__PURE__*/react.createElement("div", {
+        className: s$3.scheduleLine,
+        key: index
+      }, /*#__PURE__*/react.createElement("span", null, isToday(installment.due_date * 1000) ? /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
+        id: "installments.today",
+        defaultMessage: "Aujourd'hui"
+      }) : /*#__PURE__*/react.createElement(FormattedDate, {
+        value: installment.due_date * 1000,
+        day: "numeric",
+        month: "long",
+        year: "numeric"
+      })), /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement(FormattedNumber, {
+        value: priceFromCents(installment.total_amount),
+        style: "currency",
+        currency: "EUR"
+      })));
+    })), /*#__PURE__*/react.createElement("div", {
+      className: classnames(s$3.summary, STATIC_CUSTOMISATION_CLASSES.summary),
+      "data-testid": "modal-summary"
     }, /*#__PURE__*/react.createElement("div", {
       className: classnames(s$3.scheduleLine, s$3.total, STATIC_CUSTOMISATION_CLASSES.scheduleTotal)
     }, /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
@@ -18352,7 +18374,9 @@
     })) : /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: "eligibility-modal.cost",
       defaultMessage: "Dont frais"
-    })), /*#__PURE__*/react.createElement("span", null, isCredit ? /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
+    })), /*#__PURE__*/react.createElement("span", {
+      className: s$3.creditCostAmount
+    }, isCredit ? /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: "eligibility-modal.credit-cost-amount",
       defaultMessage: "{creditCost} (TAEG {TAEG})",
       values: {
@@ -18369,41 +18393,192 @@
       value: customerFees,
       style: "currency",
       currency: "EUR"
-    }))), ((currentPlan == null ? void 0 : currentPlan.payment_plan) || []).map(function (installment, index) {
-      return /*#__PURE__*/react.createElement("div", {
-        className: s$3.scheduleLine,
-        key: index
-      }, /*#__PURE__*/react.createElement("span", null, isToday(installment.due_date * 1000) ? /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
-        id: "installments.today",
-        defaultMessage: "Aujourd'hui"
-      }) : /*#__PURE__*/react.createElement(FormattedDate, {
-        value: installment.due_date * 1000,
-        day: "numeric",
-        month: "long",
-        year: "numeric"
-      })), /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement(FormattedNumber, {
-        value: priceFromCents(installment.total_amount),
-        style: "currency",
-        currency: "EUR"
-      })));
-    }), isCredit && /*#__PURE__*/react.createElement("p", {
+    }))), isCredit && /*#__PURE__*/react.createElement("p", {
       className: s$3.creditMessage
     }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: "eligibility-modal.credit-commitment",
       defaultMessage: "Un cr\xE9dit vous engage et doit \xEAtre rembours\xE9. V\xE9rifiez vos capacit\xE9s de remboursement\n              avant de vous engager."
+    }))));
+  };
+
+  var AmexCard = function AmexCard() {
+    return /*#__PURE__*/react.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "16",
+      viewBox: "0 0 24 16"
+    }, /*#__PURE__*/react.createElement("defs", null, /*#__PURE__*/react.createElement("linearGradient", {
+      id: "cardamex",
+      x1: "10.914%",
+      x2: "87.432%",
+      y1: "86.279%",
+      y2: "15.035%"
+    }, /*#__PURE__*/react.createElement("stop", {
+      offset: "0%",
+      stopColor: "#3FA9F5"
+    }), /*#__PURE__*/react.createElement("stop", {
+      offset: "100%",
+      stopColor: "#0071BC"
+    }))), /*#__PURE__*/react.createElement("g", {
+      fill: "none",
+      fillRule: "evenodd"
+    }, /*#__PURE__*/react.createElement("path", {
+      fill: "url(#cardamex)",
+      fillRule: "nonzero",
+      d: "M22.559 16H1.379C.627 16 0 15.392 0 14.662V1.338C0 .608.627 0 1.379 0H22.62C23.373 0 24 .608 24 1.338v13.324c-.063.73-.627 1.338-1.441 1.338z"
+    }), /*#__PURE__*/react.createElement("g", {
+      fill: "#FFF"
+    }, /*#__PURE__*/react.createElement("path", {
+      d: "M10.115 8.711L8.889 6.044H7.295v3.852L5.517 6.044H4.17l-1.778 4.03h1.103l.368-.889h2.023l.368.89h2.084V7.11l1.349 2.963h.92l1.348-2.904v2.904h.98v-4.03H11.28l-1.165 2.667zm-5.272-.474H4.23l.613-1.422v.06l.613 1.362h-.613z"
+    }), /*#__PURE__*/react.createElement("path", {
+      fillRule: "nonzero",
+      d: "M19.372 7.94l.735-.77 1.042-1.185h-1.287L18.697 7.23l-1.164-1.245h-3.985v3.97h3.923l1.226-1.303 1.165 1.304h1.287L20.107 8.71l-.735-.77zM16.92 9.186h-2.33v-.77h2.268v-.77H14.59v-.712h2.33L18.084 8 16.92 9.185z"
+    }))));
+  };
+
+  var VisaCard = function VisaCard() {
+    return /*#__PURE__*/react.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "16",
+      viewBox: "0 0 24 16"
+    }, /*#__PURE__*/react.createElement("g", {
+      fill: "none",
+      fillRule: "nonzero"
+    }, /*#__PURE__*/react.createElement("path", {
+      fill: "#FCFCFC",
+      d: "M22.684 16H1.38C.627 16 0 15.39 0 14.656V1.344C0 .61.627 0 1.379 0H22.62C23.373 0 24 .61 24 1.344v13.374c0 .671-.564 1.282-1.316 1.282z"
+    }), ' ', /*#__PURE__*/react.createElement("path", {
+      fill: "#005098",
+      d: "M8.889 10.726l.948-5.393h1.482l-.949 5.393zM15.704 5.452a3.658 3.658 0 0 0-1.304-.237c-1.481 0-2.489.71-2.489 1.778 0 .77.711 1.185 1.304 1.481.592.237.77.415.77.652 0 .355-.474.533-.889.533-.592 0-.889-.059-1.363-.296l-.177-.06-.178 1.186c.355.178 1.007.296 1.659.296 1.54 0 2.548-.71 2.548-1.837 0-.592-.415-1.067-1.244-1.481-.534-.237-.83-.415-.83-.652 0-.237.237-.474.83-.474.474 0 .83.118 1.126.178l.118.059.119-1.126M19.496 5.333H18.37c-.355 0-.592.119-.77.474l-2.193 4.919h1.541s.237-.652.296-.83h1.897c.059.178.178.83.178.83h1.362l-1.185-5.393zM17.66 8.77l.593-1.481s.118-.296.178-.533l.118.474s.296 1.303.356 1.54h-1.245zM7.644 5.333L6.222 9.007l-.178-.77C5.748 7.348 4.92 6.459 4.03 5.985l1.303 4.682h1.541l2.311-5.393h-1.54"
+    }), /*#__PURE__*/react.createElement("path", {
+      fill: "#F6A500",
+      d: "M4.919 5.333h-2.37v.119c1.836.474 3.08 1.54 3.555 2.844L5.57 5.807c-.118-.414-.355-.474-.651-.474"
+    }), /*#__PURE__*/react.createElement("path", {
+      fill: "#0A5296",
+      d: "M23.937 3.23H0V1.316C0 .598.627 0 1.379 0H22.62C23.373 0 24 .598 24 1.316V3.23h-.063z"
+    }), /*#__PURE__*/react.createElement("path", {
+      fill: "#F4A428",
+      d: "M.063 13H24v1.8c0 .655-.625 1.2-1.375 1.2H1.375C.625 16 0 15.455 0 14.8V13h.063z"
     })));
   };
 
-  var s$4 = {"list":"_180ro","listItem":"_1HqCO","bullet":"_3B8wx"};
+  var MasterCard = function MasterCard() {
+    return /*#__PURE__*/react.createElement("svg", {
+      width: "24px",
+      height: "16px",
+      viewBox: "0 0 24 16",
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/react.createElement("g", {
+      id: "Parcours-1C-B",
+      stroke: "none",
+      strokeWidth: "1",
+      fill: "none",
+      fillRule: "evenodd"
+    }, /*#__PURE__*/react.createElement("g", {
+      id: "mobile-1C-Paiement-V1",
+      transform: "translate(-269.000000, -313.000000)"
+    }, /*#__PURE__*/react.createElement("g", {
+      id: "mastercard",
+      transform: "translate(269.000000, 313.000000)"
+    }, /*#__PURE__*/react.createElement("rect", {
+      id: "Rectangle",
+      fill: "#FFFFFF",
+      x: "0",
+      y: "0",
+      width: "24",
+      height: "16",
+      rx: "1"
+    }), /*#__PURE__*/react.createElement("g", {
+      id: "Group-6",
+      transform: "translate(4.000000, 3.000000)"
+    }, /*#__PURE__*/react.createElement("circle", {
+      id: "Oval-4-Copy",
+      fill: "#EA001B",
+      cx: "5.05263158",
+      cy: "5.05263158",
+      r: "5.05263158"
+    }), /*#__PURE__*/react.createElement("circle", {
+      id: "Oval-4",
+      fillOpacity: "0.25",
+      fill: "#F79F1A",
+      cx: "10.9473684",
+      cy: "5.05263158",
+      r: "5.05263158"
+    }), /*#__PURE__*/react.createElement("circle", {
+      id: "Oval-4-Copy-2",
+      fillOpacity: "0.9",
+      fill: "#F79F1A",
+      cx: "10.9473684",
+      cy: "5.05263158",
+      r: "5.05263158"
+    }), /*#__PURE__*/react.createElement("circle", {
+      id: "Oval-4-Copy-3",
+      fillOpacity: "0.3",
+      fill: "#EA001B",
+      cx: "5.05263158",
+      cy: "5.05263158",
+      r: "5.05263158"
+    }))))));
+  };
+
+  var CbCard = function CbCard() {
+    return /*#__PURE__*/react.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "16",
+      viewBox: "0 0 24 16"
+    }, /*#__PURE__*/react.createElement("defs", null, /*#__PURE__*/react.createElement("linearGradient", {
+      id: "cardcb",
+      x1: "5.842%",
+      x2: "95.393%",
+      y1: "81.753%",
+      y2: "17.344%"
+    }, /*#__PURE__*/react.createElement("stop", {
+      offset: "0%",
+      stopColor: "#39B54A"
+    }), ' ', /*#__PURE__*/react.createElement("stop", {
+      offset: "100%",
+      stopColor: "#0A5296"
+    }))), /*#__PURE__*/react.createElement("g", {
+      fill: "none",
+      fillRule: "nonzero"
+    }, /*#__PURE__*/react.createElement("path", {
+      fill: "url(#cardcb)",
+      d: "M22.621 16H1.38C.627 16 0 15.392 0 14.662V1.338C0 .608.627 0 1.379 0H22.62C23.373 0 24 .608 24 1.338v13.324c-.063.73-.627 1.338-1.379 1.338z"
+    }), /*#__PURE__*/react.createElement("g", {
+      fill: "#FFF"
+    }, /*#__PURE__*/react.createElement("path", {
+      d: "M19.094 4.03h-6.437V8h6.498c1.165 0 2.084-.889 2.084-2.015-.06-1.066-.98-1.955-2.145-1.955zM19.094 8.593h-6.437v3.97h6.498c1.165 0 2.084-.889 2.084-2.015-.06-1.067-.98-1.955-2.145-1.955zM7.017 8.06h4.966c-.245-2.371-2.391-4.267-4.966-4.267-2.758 0-5.027 2.074-5.027 4.681s2.269 4.682 5.027 4.682c2.698 0 4.904-2.015 5.027-4.563H7.017v-.534z"
+    }))));
+  };
+
+  var s$4 = {"cardContainer":"_1N3yO","card":"_83cGn"};
+
+  var Cards = function Cards(_ref) {
+    var cards = _ref.cards;
+    return /*#__PURE__*/react.createElement("div", {
+      className: classnames(s$4.cardContainer, STATIC_CUSTOMISATION_CLASSES.cardContainer)
+    }, cards.map(function (card) {
+      return /*#__PURE__*/react.createElement("div", {
+        key: card,
+        className: s$4.card,
+        "data-testid": "card-logo-" + card
+      }, card === 'cb' && /*#__PURE__*/react.createElement(CbCard, null), card === 'amex' && /*#__PURE__*/react.createElement(AmexCard, null), card === 'mastercard' && /*#__PURE__*/react.createElement(MasterCard, null), card === 'visa' && /*#__PURE__*/react.createElement(VisaCard, null));
+    }));
+  };
+
+  var s$5 = {"list":"_180ro","listItem":"_1HqCO","bullet":"_3B8wx"};
 
   var Info = function Info() {
     return /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$4.list, STATIC_CUSTOMISATION_CLASSES.info),
+      className: classnames(s$5.list, STATIC_CUSTOMISATION_CLASSES.info),
       "data-testid": "modal-info-element"
     }, /*#__PURE__*/react.createElement("div", {
-      className: s$4.listItem
+      className: s$5.listItem
     }, /*#__PURE__*/react.createElement("div", {
-      className: s$4.bullet
+      className: s$5.bullet
     }, "1"), /*#__PURE__*/react.createElement("div", {
       className: STATIC_CUSTOMISATION_CLASSES.infoMessage
     }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
@@ -18415,9 +18590,9 @@
         }
       }
     }))), /*#__PURE__*/react.createElement("div", {
-      className: s$4.listItem
+      className: s$5.listItem
     }, /*#__PURE__*/react.createElement("div", {
-      className: s$4.bullet
+      className: s$5.bullet
     }, "2"), /*#__PURE__*/react.createElement("div", {
       className: STATIC_CUSTOMISATION_CLASSES.infoMessage
     }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
@@ -18429,9 +18604,9 @@
         }
       }
     }))), /*#__PURE__*/react.createElement("div", {
-      className: s$4.listItem
+      className: s$5.listItem
     }, /*#__PURE__*/react.createElement("div", {
-      className: s$4.bullet
+      className: s$5.bullet
     }, "3"), /*#__PURE__*/react.createElement("div", {
       className: STATIC_CUSTOMISATION_CLASSES.infoMessage
     }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
@@ -18478,22 +18653,22 @@
     }));
   }
 
-  var s$5 = {"logo":"_3Oyv_"};
+  var s$6 = {"logo":"_3Oyv_"};
 
   var Logo = function Logo() {
     return /*#__PURE__*/react.createElement("div", {
-      className: s$5.logo
+      className: s$6.logo
     }, /*#__PURE__*/react.createElement(LogoIcon, {
       underlineColor: "#FF414D"
     }));
   };
 
-  var s$6 = {"title":"_3ERx-"};
+  var s$7 = {"title":"_3ERx-"};
 
   var Title = function Title(_ref) {
     var isSomePlanDeferred = _ref.isSomePlanDeferred;
     return /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$6.title, STATIC_CUSTOMISATION_CLASSES.title),
+      className: classnames(s$7.title, STATIC_CUSTOMISATION_CLASSES.title),
       "data-testid": "modal-title-element"
     }, isSomePlanDeferred ? /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: 'eligibility-modal.title-deferred',
@@ -18514,43 +18689,50 @@
     }));
   };
 
-  var s$7 = {"container":"_21g6u","block":"_3zaP5","left":"_2SBRC"};
+  var s$8 = {"container":"_21g6u","block":"_3zaP5","left":"_2SBRC"};
 
   var DesktopModal = function DesktopModal(_ref) {
     var children = _ref.children,
-        isSomePlanDeferred = _ref.isSomePlanDeferred;
+        isSomePlanDeferred = _ref.isSomePlanDeferred,
+        cards = _ref.cards;
     return /*#__PURE__*/react.createElement("div", {
-      className: s$7.container,
+      className: s$8.container,
       "data-testid": "modal-container"
     }, /*#__PURE__*/react.createElement("div", {
-      className: classnames([s$7.block, s$7.left, STATIC_CUSTOMISATION_CLASSES.leftSide])
+      className: classnames([s$8.block, s$8.left, STATIC_CUSTOMISATION_CLASSES.leftSide])
     }, /*#__PURE__*/react.createElement(Title, {
       isSomePlanDeferred: isSomePlanDeferred
-    }), /*#__PURE__*/react.createElement(Info, null), /*#__PURE__*/react.createElement(Logo, null)), /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$7.block, STATIC_CUSTOMISATION_CLASSES.rightSide)
+    }), /*#__PURE__*/react.createElement(Info, null), cards && /*#__PURE__*/react.createElement(Cards, {
+      cards: cards
+    }), /*#__PURE__*/react.createElement(Logo, null)), /*#__PURE__*/react.createElement("div", {
+      className: classnames(s$8.block, STATIC_CUSTOMISATION_CLASSES.rightSide)
     }, children));
   };
 
-  var s$8 = {"noEligibility":"_17qNJ","loader":"_2oTJq"};
+  var s$9 = {"noEligibility":"_17qNJ","loader":"_2oTJq"};
 
-  var s$9 = {"container":"_2G7Ch"};
+  var s$a = {"container":"_2G7Ch"};
 
   var MobileModal = function MobileModal(_ref) {
     var children = _ref.children,
-        isSomePlanDeferred = _ref.isSomePlanDeferred;
+        isSomePlanDeferred = _ref.isSomePlanDeferred,
+        cards = _ref.cards;
     return /*#__PURE__*/react.createElement("div", {
-      className: s$9.container,
+      className: s$a.container,
       "data-testid": "modal-container"
     }, /*#__PURE__*/react.createElement(Title, {
       isSomePlanDeferred: isSomePlanDeferred
-    }), children, /*#__PURE__*/react.createElement(Info, null), /*#__PURE__*/react.createElement(Logo, null));
+    }), children, /*#__PURE__*/react.createElement(Info, null), cards && /*#__PURE__*/react.createElement(Cards, {
+      cards: cards
+    }), /*#__PURE__*/react.createElement(Logo, null));
   };
 
   var EligibilityModal = function EligibilityModal(_ref) {
     var initialPlanIndex = _ref.initialPlanIndex,
         onClose = _ref.onClose,
         eligibilityPlans = _ref.eligibilityPlans,
-        status = _ref.status;
+        status = _ref.status,
+        cards = _ref.cards;
 
     var _useState = react.useState(initialPlanIndex || 0),
         currentPlanIndex = _useState[0],
@@ -18573,11 +18755,12 @@
       scrollable: true,
       isOpen: true
     }, /*#__PURE__*/react.createElement(ModalComponent, {
-      isSomePlanDeferred: isSomePlanDeferred
+      isSomePlanDeferred: isSomePlanDeferred,
+      cards: cards
     }, status === apiStatus.PENDING && /*#__PURE__*/react.createElement("div", {
-      className: s$8.loader
+      className: s$9.loader
     }, /*#__PURE__*/react.createElement(LoadingIndicator, null)), status === apiStatus.SUCCESS && eligiblePlans.length === 0 && /*#__PURE__*/react.createElement("div", {
-      className: s$8.noEligibility
+      className: s$9.noEligibility
     }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: "eligibility-modal.no-eligibility",
       defaultMessage: "Oups, il semblerait que la simulation n'ait pas fonctionn\xE9."
@@ -18598,7 +18781,8 @@
     var purchaseAmount = _ref.purchaseAmount,
         apiData = _ref.apiData,
         configPlans = _ref.configPlans,
-        onClose = _ref.onClose;
+        onClose = _ref.onClose,
+        cards = _ref.cards;
 
     var _useFetchEligibility = useFetchEligibility(purchaseAmount, apiData, configPlans),
         eligibilityPlans = _useFetchEligibility[0],
@@ -18608,21 +18792,22 @@
       initialPlanIndex: 0,
       onClose: onClose,
       eligibilityPlans: eligibilityPlans,
-      status: status
+      status: status,
+      cards: cards
     });
   };
 
-  var s$a = {"loadingIndicator":"_2SwwZ","line1":"_2qODo","line2":"_2YO01"};
+  var s$b = {"loadingIndicator":"_2SwwZ","line1":"_2qODo","line2":"_2YO01"};
 
   var Loader = function Loader(_ref) {
     var className = _ref.className;
     return /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$a.loadingIndicator, className),
+      className: classnames(s$b.loadingIndicator, className),
       "data-testid": "loader"
     }, /*#__PURE__*/react.createElement("div", {
-      className: s$a.line1
+      className: s$b.line1
     }), /*#__PURE__*/react.createElement("div", {
-      className: s$a.line2
+      className: s$b.line2
     }));
   };
 
@@ -18715,7 +18900,7 @@
     activeOption: prefix$1 + '-active-option'
   };
 
-  var s$b = {"widgetButton":"_TSkFv","logo":"_LJ4nZ","primaryContainer":"_bMClc","paymentPlans":"_17c_S","plan":"_2Kqjn","active":"_3dG_J","notEligible":"_3O1bg","info":"_25GrF","loader":"_30j1O","error":"_R0YlN","errorText":"_2kGhu","errorButton":"_73d_Y","pending":"_1ZDMS","clickable":"_UksZa","unClickable":"_1lr-q"};
+  var s$c = {"widgetButton":"_TSkFv","logo":"_LJ4nZ","primaryContainer":"_bMClc","paymentPlans":"_17c_S","plan":"_2Kqjn","active":"_3dG_J","notEligible":"_3O1bg","info":"_25GrF","loader":"_30j1O","error":"_R0YlN","errorText":"_2kGhu","errorButton":"_73d_Y","pending":"_1ZDMS","clickable":"_UksZa","unClickable":"_1lr-q"};
 
   var VERY_LONG_TIME_IN_MS = 1000 * 3600 * 24 * 365;
   var DEFAULT_TRANSITION_TIME = 5500;
@@ -18728,7 +18913,8 @@
         configPlans = _ref.configPlans,
         transitionDelay = _ref.transitionDelay,
         hideIfNotEligible = _ref.hideIfNotEligible,
-        suggestedPaymentPlan = _ref.suggestedPaymentPlan;
+        suggestedPaymentPlan = _ref.suggestedPaymentPlan,
+        cards = _ref.cards;
 
     var _useFetchEligibility = useFetchEligibility(purchaseAmount, apiData, configPlans),
         eligibilityPlans = _useFetchEligibility[0],
@@ -18808,7 +18994,7 @@
 
     if (status === apiStatus.PENDING) {
       return /*#__PURE__*/react.createElement("div", {
-        className: classnames(s$b.widgetButton, s$b.pending)
+        className: classnames(s$c.widgetButton, s$c.pending)
       }, /*#__PURE__*/react.createElement(Loader, null));
     }
 
@@ -18826,14 +19012,14 @@
 
     return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
       onClick: handleOpenModal,
-      className: classnames(s$b.widgetButton, (_cx = {}, _cx[s$b.clickable] = eligiblePlans.length > 0, _cx[s$b.unClickable] = eligiblePlans.length === 0, _cx), STATIC_CUSTOMISATION_CLASSES$1.container),
+      className: classnames(s$c.widgetButton, (_cx = {}, _cx[s$c.clickable] = eligiblePlans.length > 0, _cx[s$c.unClickable] = eligiblePlans.length === 0, _cx), STATIC_CUSTOMISATION_CLASSES$1.container),
       "data-testid": "widget-button"
     }, /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$b.primaryContainer, STATIC_CUSTOMISATION_CLASSES$1.eligibilityLine)
+      className: classnames(s$c.primaryContainer, STATIC_CUSTOMISATION_CLASSES$1.eligibilityLine)
     }, /*#__PURE__*/react.createElement(LogoIcon, {
-      className: s$b.logo
+      className: s$c.logo
     }), /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$b.paymentPlans, STATIC_CUSTOMISATION_CLASSES$1.eligibilityOptions)
+      className: classnames(s$c.paymentPlans, STATIC_CUSTOMISATION_CLASSES$1.eligibilityOptions)
     }, eligibilityPlans.map(function (eligibilityPlan, key) {
       var _cx2;
 
@@ -18843,15 +19029,16 @@
           return onHover(key);
         },
         onMouseOut: onLeave,
-        className: classnames(s$b.plan, (_cx2 = {}, _cx2[classnames(s$b.active, STATIC_CUSTOMISATION_CLASSES$1.activeOption)] = current === key, _cx2[classnames(s$b.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = !eligibilityPlan.eligible, _cx2))
+        className: classnames(s$c.plan, (_cx2 = {}, _cx2[classnames(s$c.active, STATIC_CUSTOMISATION_CLASSES$1.activeOption)] = current === key, _cx2[classnames(s$c.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = !eligibilityPlan.eligible, _cx2))
       }, paymentPlanShorthandName(eligibilityPlan));
     }))), /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$b.info, (_cx3 = {}, _cx3[classnames(s$b.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = eligibilityPlans[current] && !eligibilityPlans[current].eligible, _cx3), STATIC_CUSTOMISATION_CLASSES$1.paymentInfo)
+      className: classnames(s$c.info, (_cx3 = {}, _cx3[classnames(s$c.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = eligibilityPlans[current] && !eligibilityPlans[current].eligible, _cx3), STATIC_CUSTOMISATION_CLASSES$1.paymentInfo)
     }, eligibilityPlans.length !== 0 && paymentPlanInfoText(eligibilityPlans[current]))), isOpen && /*#__PURE__*/react.createElement(EligibilityModal, {
       initialPlanIndex: getIndexWithinEligiblePlans(current),
       onClose: closeModal,
       eligibilityPlans: eligiblePlans,
-      status: status
+      status: status,
+      cards: cards
     }));
   };
 
@@ -18879,7 +19066,8 @@
             hideIfNotEligible = options.hideIfNotEligible,
             suggestedPaymentPlan = options.suggestedPaymentPlan,
             _options$locale = options.locale,
-            locale = _options$locale === void 0 ? Locale.en : _options$locale;
+            locale = _options$locale === void 0 ? Locale.en : _options$locale,
+            cards = options.cards;
 
         if (containerDiv) {
           reactDom.render( /*#__PURE__*/react.createElement(Provider$1, {
@@ -18890,7 +19078,8 @@
             configPlans: plans,
             transitionDelay: transitionDelay,
             hideIfNotEligible: hideIfNotEligible,
-            suggestedPaymentPlan: suggestedPaymentPlan
+            suggestedPaymentPlan: suggestedPaymentPlan,
+            cards: cards
           })), document.querySelector(container));
         }
       }
@@ -18901,7 +19090,8 @@
             _purchaseAmount = options.purchaseAmount,
             _plans = options.plans,
             _options$locale2 = options.locale,
-            _locale = _options$locale2 === void 0 ? Locale.en : _options$locale2;
+            _locale = _options$locale2 === void 0 ? Locale.en : _options$locale2,
+            _cards = options.cards;
 
         var close = function close() {
           return containerDiv && reactDom.unmountComponentAtNode(containerDiv);
@@ -18914,7 +19104,8 @@
             purchaseAmount: _purchaseAmount,
             apiData: _this.apiData,
             configPlans: _plans,
-            onClose: close
+            onClose: close,
+            cards: _cards
           })), document.querySelector(_container));
         }; // if clickableSelector is provided, add an onClick event handler to open the Modal.