@alma/widgets 2.6.0 → 2.8.0

package/dist/raw/widgets.css

@@ -369,6 +369,16 @@
   }
 }
 
+._1N3yO {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+}
+._83cGn {
+  margin: 8px 10px 0 0;
+}
+
 ._180ro {
   display: flex;
   flex-direction: column;
@@ -552,6 +562,10 @@
   border-bottom: 3px solid var(--blue-300);
 }
 
+._2Kqjn._3dG_J._2icEF {
+  border-bottom-color: var(--red-600);
+}
+
 ._2Kqjn._3dG_J._3O1bg {
   border-bottom-color: var(--gray-600);
   cursor: not-allowed;

package/dist/raw/widgets.js

@@ -1842,7 +1842,7 @@ var messagesDE = {
 	"eligibility-modal.title": "<highlighted>Bezahlen Sie in Raten</highlighted> per Kreditkarte mit Alma.",
 	"eligibility-modal.title-deferred": "<highlighted>Bezahlen Sie in Raten</highlighted> oder später per Kreditkarte mit Alma.",
 	"eligibility-modal.total": "Insgesamt",
-	"installments.today": "Heutzutage",
+	"installments.today": "Heute",
 	"payment-plan-strings.day-abbreviation": "J{numberOfDeferredDays}",
 	"payment-plan-strings.default-message": "Bezahlen Sie in Raten mit Alma",
 	"payment-plan-strings.deferred": "{totalAmount} zu zahlen am {dueDate}",
@@ -1885,7 +1885,7 @@ var messagesES = {
 	"eligibility-modal.credit-cost": "Coste de crédito (incl. en el total)",
 	"eligibility-modal.credit-cost-amount": "{creditCost} (TAE {TAEG})",
 	"eligibility-modal.no-eligibility": "Uy, parece que la simulación no ha funcionado.",
-	"eligibility-modal.title": "<highlighted>Paga a plazos</highlighted> con tarjeta de crédito con Alma.",
+	"eligibility-modal.title": "<highlighted>Paga a plazos</highlighted> con tu tarjeta, a través de Alma.",
 	"eligibility-modal.title-deferred": "<highlighted>Paga a plazos</highlighted> o más adelante con tu tarjeta, a través de Alma.",
 	"eligibility-modal.total": "Total",
 	"installments.today": "Hoy",
@@ -1931,8 +1931,8 @@ var messagesIT = {
 	"eligibility-modal.credit-cost": "Di cui commissioni",
 	"eligibility-modal.credit-cost-amount": "{creditCost} (TAEG {TAEG})",
 	"eligibility-modal.no-eligibility": "Ops, sembra che la simulazione non abbia funzionato.",
-	"eligibility-modal.title": "<highlighted>Paga a rate</highlighted> con carta di credito con Alma.",
-	"eligibility-modal.title-deferred": "<highlighted>Paga a rate</highlighted> e posticipa il pagamento con Alma, senza interessi.",
+	"eligibility-modal.title": "<highlighted>Paga a rate</highlighted> con Alma, senza interessi.",
+	"eligibility-modal.title-deferred": "<highlighted>Paga a rate</highlighted> o posticipa il pagamento con Alma, senza interessi.",
 	"eligibility-modal.total": "Totale",
 	"installments.today": "Oggi",
 	"payment-plan-strings.day-abbreviation": "G{numberOfDeferredDays}",
@@ -1973,9 +1973,6 @@ var getTranslationsByLocale = function getTranslationsByLocale(locale) {
     case Locale.fr:
       return messagesFR;
 
-    case Locale.en:
-      return messagesEN;
-
     case Locale.es:
       return messagesES;
 
@@ -1990,6 +1987,7 @@ var getTranslationsByLocale = function getTranslationsByLocale(locale) {
     case Locale['nl-NL']:
       return messagesNL;
 
+    case Locale.en:
     default:
       return messagesEN;
   }
@@ -2197,6 +2195,7 @@ var STATIC_CUSTOMISATION_CLASSES = {
   scheduleDetails: prefix + '-schedule-details',
   scheduleTotal: prefix + '-schedule-total',
   scheduleCredit: prefix + '-schedule-credit',
+  cardContainer: prefix + '-card-logos',
   summary: prefix + '-summary'
 };
 
@@ -2214,6 +2213,7 @@ var ControlledModal = function ControlledModal(_ref) {
       scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  /* istanbul ignore next */
   Modal.setAppElement('body');
   return /*#__PURE__*/React__default.createElement(Modal, Object.assign({
     className: cx(s$1.modal, className),
@@ -2472,16 +2472,187 @@ var Schedule = function Schedule(_ref) {
   }))));
 };
 
-var s$4 = {"list":"_180ro","listItem":"_1HqCO","bullet":"_3B8wx"};
+var AmexCard = function AmexCard() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "16",
+    viewBox: "0 0 24 16"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: "cardamex",
+    x1: "10.914%",
+    x2: "87.432%",
+    y1: "86.279%",
+    y2: "15.035%"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    offset: "0%",
+    stopColor: "#3FA9F5"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "100%",
+    stopColor: "#0071BC"
+  }))), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.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__default.createElement("g", {
+    fill: "#FFF"
+  }, /*#__PURE__*/React__default.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__default.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__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "16",
+    viewBox: "0 0 24 16"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React__default.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__default.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__default.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__default.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__default.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 MasterCard = function MasterCard() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "24px",
+    height: "16px",
+    viewBox: "0 0 24 16",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Parcours-1C-B",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "mobile-1C-Paiement-V1",
+    transform: "translate(-269.000000, -313.000000)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "mastercard",
+    transform: "translate(269.000000, 313.000000)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    id: "Rectangle",
+    fill: "#FFFFFF",
+    x: "0",
+    y: "0",
+    width: "24",
+    height: "16",
+    rx: "1"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    id: "Group-6",
+    transform: "translate(4.000000, 3.000000)"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    id: "Oval-4-Copy",
+    fill: "#EA001B",
+    cx: "5.05263158",
+    cy: "5.05263158",
+    r: "5.05263158"
+  }), /*#__PURE__*/React__default.createElement("circle", {
+    id: "Oval-4",
+    fillOpacity: "0.25",
+    fill: "#F79F1A",
+    cx: "10.9473684",
+    cy: "5.05263158",
+    r: "5.05263158"
+  }), /*#__PURE__*/React__default.createElement("circle", {
+    id: "Oval-4-Copy-2",
+    fillOpacity: "0.9",
+    fill: "#F79F1A",
+    cx: "10.9473684",
+    cy: "5.05263158",
+    r: "5.05263158"
+  }), /*#__PURE__*/React__default.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__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "16",
+    viewBox: "0 0 24 16"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: "cardcb",
+    x1: "5.842%",
+    x2: "95.393%",
+    y1: "81.753%",
+    y2: "17.344%"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    offset: "0%",
+    stopColor: "#39B54A"
+  }), ' ', /*#__PURE__*/React__default.createElement("stop", {
+    offset: "100%",
+    stopColor: "#0A5296"
+  }))), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React__default.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__default.createElement("g", {
+    fill: "#FFF"
+  }, /*#__PURE__*/React__default.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;
+  // We transform to a Set and back to avoid duplicate values (ex : amex, amex)
+  var uniqueCards = Array.from(new Set(cards));
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-testid": "card-logos",
+    className: cx(s$4.cardContainer, STATIC_CUSTOMISATION_CLASSES.cardContainer)
+  }, uniqueCards.map(function (card) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: card,
+      className: s$4.card,
+      "data-testid": "card-logo-" + card
+    }, card === 'cb' && /*#__PURE__*/React__default.createElement(CbCard, null), card === 'amex' && /*#__PURE__*/React__default.createElement(AmexCard, null), card === 'mastercard' && /*#__PURE__*/React__default.createElement(MasterCard, null), card === 'visa' && /*#__PURE__*/React__default.createElement(VisaCard, null));
+  }));
+};
+
+var s$5 = {"list":"_180ro","listItem":"_1HqCO","bullet":"_3B8wx"};
 
 var Info = function Info() {
   return /*#__PURE__*/React__default.createElement("div", {
-    className: cx(s$4.list, STATIC_CUSTOMISATION_CLASSES.info),
+    className: cx(s$5.list, STATIC_CUSTOMISATION_CLASSES.info),
     "data-testid": "modal-info-element"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: s$4.listItem
+    className: s$5.listItem
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: s$4.bullet
+    className: s$5.bullet
   }, "1"), /*#__PURE__*/React__default.createElement("div", {
     className: STATIC_CUSTOMISATION_CLASSES.infoMessage
   }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
@@ -2493,9 +2664,9 @@ var Info = function Info() {
       }
     }
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: s$4.listItem
+    className: s$5.listItem
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: s$4.bullet
+    className: s$5.bullet
   }, "2"), /*#__PURE__*/React__default.createElement("div", {
     className: STATIC_CUSTOMISATION_CLASSES.infoMessage
   }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
@@ -2507,9 +2678,9 @@ var Info = function Info() {
       }
     }
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: s$4.listItem
+    className: s$5.listItem
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: s$4.bullet
+    className: s$5.bullet
   }, "3"), /*#__PURE__*/React__default.createElement("div", {
     className: STATIC_CUSTOMISATION_CLASSES.infoMessage
   }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
@@ -2523,12 +2694,21 @@ var Info = function Info() {
   }))));
 };
 
+var COLORS;
+
+(function (COLORS) {
+  COLORS["ALMA"] = "#FF414D";
+  COLORS["MONOCHROME"] = "#00425D";
+})(COLORS || (COLORS = {}));
+
 function LogoIcon(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? '#00425D' : _ref$color,
-      _ref$underlineColor = _ref.underlineColor,
-      underlineColor = _ref$underlineColor === void 0 ? '#00425D' : _ref$underlineColor,
-      className = _ref.className;
+  var className = _ref.className,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? COLORS.MONOCHROME : _ref$color,
+      _ref$monochrome = _ref.monochrome,
+      monochrome = _ref$monochrome === void 0 ? true : _ref$monochrome,
+      underlineColor = _ref.underlineColor;
+  var defaultUnderlineColor = monochrome ? COLORS.MONOCHROME : COLORS.ALMA;
   return /*#__PURE__*/React__default.createElement("svg", {
     className: className,
     width: "35",
@@ -2552,26 +2732,26 @@ function LogoIcon(_ref) {
     y: "20",
     width: "40",
     height: "3",
-    fill: underlineColor
+    fill: underlineColor || defaultUnderlineColor
   }));
 }
 
-var s$5 = {"logo":"_3Oyv_"};
+var s$6 = {"logo":"_3Oyv_"};
 
 var Logo = function Logo() {
   return /*#__PURE__*/React__default.createElement("div", {
-    className: s$5.logo
+    className: s$6.logo
   }, /*#__PURE__*/React__default.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__default.createElement("div", {
-    className: cx(s$6.title, STATIC_CUSTOMISATION_CLASSES.title),
+    className: cx(s$7.title, STATIC_CUSTOMISATION_CLASSES.title),
     "data-testid": "modal-title-element"
   }, isSomePlanDeferred ? /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
     id: 'eligibility-modal.title-deferred',
@@ -2592,43 +2772,50 @@ var Title = function Title(_ref) {
   }));
 };
 
-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__default.createElement("div", {
-    className: s$7.container,
+    className: s$8.container,
     "data-testid": "modal-container"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cx([s$7.block, s$7.left, STATIC_CUSTOMISATION_CLASSES.leftSide])
+    className: cx([s$8.block, s$8.left, STATIC_CUSTOMISATION_CLASSES.leftSide])
   }, /*#__PURE__*/React__default.createElement(Title, {
     isSomePlanDeferred: isSomePlanDeferred
-  }), /*#__PURE__*/React__default.createElement(Info, null), /*#__PURE__*/React__default.createElement(Logo, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(s$7.block, STATIC_CUSTOMISATION_CLASSES.rightSide)
+  }), /*#__PURE__*/React__default.createElement(Info, null), cards && /*#__PURE__*/React__default.createElement(Cards, {
+    cards: cards
+  }), /*#__PURE__*/React__default.createElement(Logo, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: cx(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__default.createElement("div", {
-    className: s$9.container,
+    className: s$a.container,
     "data-testid": "modal-container"
   }, /*#__PURE__*/React__default.createElement(Title, {
     isSomePlanDeferred: isSomePlanDeferred
-  }), children, /*#__PURE__*/React__default.createElement(Info, null), /*#__PURE__*/React__default.createElement(Logo, null));
+  }), children, /*#__PURE__*/React__default.createElement(Info, null), cards && /*#__PURE__*/React__default.createElement(Cards, {
+    cards: cards
+  }), /*#__PURE__*/React__default.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],
@@ -2651,11 +2838,12 @@ var EligibilityModal = function EligibilityModal(_ref) {
     scrollable: true,
     isOpen: true
   }, /*#__PURE__*/React__default.createElement(ModalComponent, {
-    isSomePlanDeferred: isSomePlanDeferred
+    isSomePlanDeferred: isSomePlanDeferred,
+    cards: cards
   }, status === apiStatus.PENDING && /*#__PURE__*/React__default.createElement("div", {
-    className: s$8.loader
+    className: s$9.loader
   }, /*#__PURE__*/React__default.createElement(LoadingIndicator, null)), status === apiStatus.SUCCESS && eligiblePlans.length === 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: s$8.noEligibility
+    className: s$9.noEligibility
   }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
     id: "eligibility-modal.no-eligibility",
     defaultMessage: "Oups, il semblerait que la simulation n'ait pas fonctionn\xE9."
@@ -2676,7 +2864,8 @@ var ModalContainer = function ModalContainer(_ref) {
   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],
@@ -2686,21 +2875,22 @@ var ModalContainer = function ModalContainer(_ref) {
     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__default.createElement("div", {
-    className: cx(s$a.loadingIndicator, className),
+    className: cx(s$b.loadingIndicator, className),
     "data-testid": "loader"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: s$a.line1
+    className: s$b.line1
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: s$a.line2
+    className: s$b.line2
   }));
 };
 
@@ -2793,7 +2983,7 @@ var STATIC_CUSTOMISATION_CLASSES$1 = {
   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","polychrome":"_2icEF","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;
@@ -2801,12 +2991,14 @@ var DEFAULT_TRANSITION_TIME = 5500;
 var PaymentPlanWidget = function PaymentPlanWidget(_ref) {
   var _cx, _cx3;
 
-  var purchaseAmount = _ref.purchaseAmount,
-      apiData = _ref.apiData,
+  var apiData = _ref.apiData,
       configPlans = _ref.configPlans,
-      transitionDelay = _ref.transitionDelay,
       hideIfNotEligible = _ref.hideIfNotEligible,
-      suggestedPaymentPlan = _ref.suggestedPaymentPlan;
+      monochrome = _ref.monochrome,
+      purchaseAmount = _ref.purchaseAmount,
+      suggestedPaymentPlan = _ref.suggestedPaymentPlan,
+      cards = _ref.cards,
+      transitionDelay = _ref.transitionDelay;
 
   var _useFetchEligibility = useFetchEligibility(purchaseAmount, apiData, configPlans),
       eligibilityPlans = _useFetchEligibility[0],
@@ -2886,7 +3078,7 @@ var PaymentPlanWidget = function PaymentPlanWidget(_ref) {
 
   if (status === apiStatus.PENDING) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: cx(s$b.widgetButton, s$b.pending)
+      className: cx(s$c.widgetButton, s$c.pending)
     }, /*#__PURE__*/React__default.createElement(Loader, null));
   }
 
@@ -2904,32 +3096,35 @@ var PaymentPlanWidget = function PaymentPlanWidget(_ref) {
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     onClick: handleOpenModal,
-    className: cx(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: cx(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__default.createElement("div", {
-    className: cx(s$b.primaryContainer, STATIC_CUSTOMISATION_CLASSES$1.eligibilityLine)
+    className: cx(s$c.primaryContainer, STATIC_CUSTOMISATION_CLASSES$1.eligibilityLine)
   }, /*#__PURE__*/React__default.createElement(LogoIcon, {
-    className: s$b.logo
+    className: s$c.logo,
+    monochrome: monochrome
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(s$b.paymentPlans, STATIC_CUSTOMISATION_CLASSES$1.eligibilityOptions)
+    className: cx(s$c.paymentPlans, STATIC_CUSTOMISATION_CLASSES$1.eligibilityOptions)
   }, eligibilityPlans.map(function (eligibilityPlan, key) {
     var _cx2;
 
+    var isCurrent = key === current;
     return /*#__PURE__*/React__default.createElement("div", {
       key: key,
       onMouseEnter: function onMouseEnter() {
         return onHover(key);
       },
       onMouseOut: onLeave,
-      className: cx(s$b.plan, (_cx2 = {}, _cx2[cx(s$b.active, STATIC_CUSTOMISATION_CLASSES$1.activeOption)] = current === key, _cx2[cx(s$b.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = !eligibilityPlan.eligible, _cx2))
+      className: cx(s$c.plan, (_cx2 = {}, _cx2[cx(s$c.active, STATIC_CUSTOMISATION_CLASSES$1.activeOption)] = isCurrent, _cx2[s$c.polychrome] = !monochrome && isCurrent, _cx2[cx(s$c.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = !eligibilityPlan.eligible, _cx2))
     }, paymentPlanShorthandName(eligibilityPlan));
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(s$b.info, (_cx3 = {}, _cx3[cx(s$b.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = eligibilityPlans[current] && !eligibilityPlans[current].eligible, _cx3), STATIC_CUSTOMISATION_CLASSES$1.paymentInfo)
+    className: cx(s$c.info, (_cx3 = {}, _cx3[cx(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__default.createElement(EligibilityModal, {
     initialPlanIndex: getIndexWithinEligiblePlans(current),
     onClose: closeModal,
     eligibilityPlans: eligiblePlans,
-    status: status
+    status: status,
+    cards: cards
   }));
 };
 
@@ -2955,20 +3150,25 @@ var WidgetsController = /*#__PURE__*/function () {
           plans = options.plans,
           transitionDelay = options.transitionDelay,
           hideIfNotEligible = options.hideIfNotEligible,
+          _options$monochrome = options.monochrome,
+          monochrome = _options$monochrome === void 0 ? true : _options$monochrome,
           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__default.createElement(Provider, {
           locale: locale
         }, /*#__PURE__*/React__default.createElement(PaymentPlanWidget, {
-          purchaseAmount: purchaseAmount,
           apiData: this.apiData,
           configPlans: plans,
-          transitionDelay: transitionDelay,
           hideIfNotEligible: hideIfNotEligible,
-          suggestedPaymentPlan: suggestedPaymentPlan
+          monochrome: monochrome,
+          purchaseAmount: purchaseAmount,
+          suggestedPaymentPlan: suggestedPaymentPlan,
+          cards: cards,
+          transitionDelay: transitionDelay
         })), document.querySelector(container));
       }
     }
@@ -2979,7 +3179,8 @@ var WidgetsController = /*#__PURE__*/function () {
           _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);
@@ -2992,7 +3193,8 @@ var WidgetsController = /*#__PURE__*/function () {
           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.