@alma/widgets 2.3.4 → 2.5.1

package/dist/raw/widgets.js

@@ -1838,8 +1838,9 @@ var messagesDE = {
 	"eligibility-modal.credit-commitment": "Ein Kredit verpflichtet Sie und muss zurückgezahlt werden. Prüfen Sie Ihre Rückzahlungsfähigkeit, bevor Sie sich verpflichten.",
 	"eligibility-modal.credit-cost": "Davon Kreditkosten",
 	"eligibility-modal.credit-cost-amount": "{creditCost} (APR {TAEG})",
-	"eligibility-modal.no-eligibility": "Ups, die Simulation scheint nicht funktioniert zu haben.",
-	"eligibility-modal.title": "<highlighted>Bezahlen Sie in Raten</highlighted> oder später per Kreditkarte mit Alma.",
+	"eligibility-modal.no-eligibility": "Ups, die Simulation hat anscheinend nicht funktioniert.",
+	"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",
 	"payment-plan-strings.day-abbreviation": "J{numberOfDeferredDays}",
@@ -1861,7 +1862,8 @@ var messagesEN = {
 	"eligibility-modal.credit-cost": "Of which cost of credit",
 	"eligibility-modal.credit-cost-amount": "{creditCost} (APR {TAEG})",
 	"eligibility-modal.no-eligibility": "Oops, looks like the simulation didn't work.",
-	"eligibility-modal.title": "<highlighted>Pay in installments</highlighted> or later by credit card with Alma.",
+	"eligibility-modal.title": "<highlighted>Pay in installments</highlighted> by credit card with Alma.",
+	"eligibility-modal.title-deferred": "<highlighted>Pay in installments</highlighted> or later by credit card with Alma.",
 	"eligibility-modal.total": "Total",
 	"installments.today": "Today",
 	"payment-plan-strings.day-abbreviation": "T{numberOfDeferredDays}",
@@ -1883,7 +1885,8 @@ 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> o más adelante con tu tarjeta, a través de Alma.",
+	"eligibility-modal.title": "<highlighted>Paga a plazos</highlighted> con tarjeta de crédito con 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",
 	"payment-plan-strings.day-abbreviation": "D{numberOfDeferredDays}",
@@ -1904,8 +1907,9 @@ var messagesFR = {
 	"eligibility-modal.credit-commitment": "Un crédit vous engage et doit être remboursé. Vérifiez vos capacités de remboursement avant de vous engager.",
 	"eligibility-modal.credit-cost": "Dont coût du crédit",
 	"eligibility-modal.credit-cost-amount": "{creditCost} (TAEG {TAEG})",
-	"eligibility-modal.no-eligibility": "Oups, il semblerait que la simulation n'aie pas fonctionné.",
-	"eligibility-modal.title": "<highlighted>Payez en plusieurs fois</highlighted> ou plus tard par carte bancaire avec Alma.",
+	"eligibility-modal.no-eligibility": "Oups, il semblerait que la simulation n'ait pas fonctionné.",
+	"eligibility-modal.title": "<highlighted>Payez en plusieurs fois</highlighted> par carte bancaire avec Alma.",
+	"eligibility-modal.title-deferred": "<highlighted>Payez en plusieurs fois</highlighted> ou plus tard par carte bancaire avec Alma.",
 	"eligibility-modal.total": "Total",
 	"installments.today": "Aujourd'hui",
 	"payment-plan-strings.day-abbreviation": "J{numberOfDeferredDays}",
@@ -1927,7 +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> e posticipa il pagamento con Alma, senza interessi.",
+	"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.total": "Totale",
 	"installments.today": "Oggi",
 	"payment-plan-strings.day-abbreviation": "G{numberOfDeferredDays}",
@@ -1949,7 +1954,8 @@ var messagesNL = {
 	"eligibility-modal.credit-cost": "Waarvan kosten van krediet",
 	"eligibility-modal.credit-cost-amount": "{creditCost} (APR {TAEG})",
 	"eligibility-modal.no-eligibility": "Oeps, het lijkt erop dat de simulatie niet werkte.",
-	"eligibility-modal.title": "<highlighted>Betaal in termijnen</highlighted> of later per credit card met Alma.",
+	"eligibility-modal.title": "<highlighted>Betaal in termijnen</highlighted> met kredietkaart bij Alma.",
+	"eligibility-modal.title-deferred": "<highlighted>Betaal in termijnen</highlighted> of later per credit card met Alma.",
 	"eligibility-modal.total": "Totaal",
 	"installments.today": "Tegenwoordig",
 	"payment-plan-strings.day-abbreviation": "J{numberOfDeferredDays}",
@@ -2052,16 +2058,34 @@ var fetchFromApi = function fetchFromApi(url, data, headers) {
   }
 };
 
+var isPlanEligible = function isPlanEligible(plan, configPlan) {
+  if (!plan.eligible) {
+    return false;
+  }
+
+  return configPlan ? plan.purchase_amount >= (configPlan == null ? void 0 : configPlan.minAmount) && plan.purchase_amount <= (configPlan == null ? void 0 : configPlan.maxAmount) : false;
+};
+
+var getPaymentPlanBoundaries = function getPaymentPlanBoundaries(plan, configPlan) {
+  var _plan$constraints;
+
+  // When the plan is not eligible, the purchase amount constraints is given from the merchant config
+  var purchaseAmountConstraints = (_plan$constraints = plan.constraints) == null ? void 0 : _plan$constraints.purchase_amount;
+
+  if (purchaseAmountConstraints && configPlan) {
+    return {
+      minAmount: Math.max(configPlan.minAmount, purchaseAmountConstraints == null ? void 0 : purchaseAmountConstraints.minimum),
+      maxAmount: Math.min(configPlan.maxAmount, purchaseAmountConstraints == null ? void 0 : purchaseAmountConstraints.maximum)
+    };
+  }
+
+  return configPlan != null ? configPlan : {};
+};
+
 var filterELigibility = function filterELigibility(eligibilities, configPlans) {
   // Remove p1x
   var filteredEligibilityPlans = eligibilities.filter(function (plan) {
     return !(plan.installments_count === 1 && plan.deferred_days === 0 && plan.deferred_months === 0);
-  }) // Keeps the plans that have a payment_plan property
-  .filter(function (plan) {
-    return plan.payment_plan;
-  }) // Remove plans that have a reasons property
-  .filter(function (plan) {
-    return !plan.reasons;
   }); // If no configPlans was provided, return eligibility response
 
   if (!configPlans) {
@@ -2077,10 +2101,8 @@ var filterELigibility = function filterELigibility(eligibilities, configPlans) {
       return plan.installments_count === configPlan.installmentsCount && eligibilityDeferredDays === configPlanDeferredDays;
     });
     return _extends({}, plan, {
-      eligible: relatedConfigPlan ? plan.purchase_amount >= (relatedConfigPlan == null ? void 0 : relatedConfigPlan.minAmount) && plan.purchase_amount <= (relatedConfigPlan == null ? void 0 : relatedConfigPlan.maxAmount) : false,
-      minAmount: relatedConfigPlan == null ? void 0 : relatedConfigPlan.minAmount,
-      maxAmount: relatedConfigPlan == null ? void 0 : relatedConfigPlan.maxAmount
-    });
+      eligible: isPlanEligible(plan, relatedConfigPlan)
+    }, getPaymentPlanBoundaries(plan, relatedConfigPlan));
   });
 };
 
@@ -2154,6 +2176,29 @@ function CrossIcon(_ref) {
   }));
 }
 
+/**
+ * Prefix classes to avoid name collisions.
+ */
+var prefix = 'alma-eligibility-modal';
+/**
+ * Class names for the **eligibility modale** widget.
+ * Those classes are intended to be used by the **merchant developer**.
+ */
+
+var STATIC_CUSTOMISATION_CLASSES = {
+  leftSide: prefix + '-left-side',
+  rightSide: prefix + '-right-side',
+  title: prefix + '-title',
+  info: prefix + '-info',
+  infoMessage: prefix + '-info-message',
+  eligibilityOptions: prefix + '-eligibility-options',
+  activeOption: prefix + '-active-option',
+  closeButton: prefix + '-close-button',
+  scheduleDetails: prefix + '-schedule-details',
+  scheduleTotal: prefix + '-schedule-total',
+  scheduleCredit: prefix + '-schedule-credit'
+};
+
 var _excluded = ["children", "isOpen", "onClose", "className", "contentClassName", "scrollable"];
 
 var ControlledModal = function ControlledModal(_ref) {
@@ -2186,7 +2231,7 @@ var ControlledModal = function ControlledModal(_ref) {
     className: s$1.header
   }, /*#__PURE__*/React__default.createElement("button", {
     onClick: onClose,
-    className: s$1.closeButton,
+    className: cx(s$1.closeButton, STATIC_CUSTOMISATION_CLASSES.closeButton),
     "data-testid": "modal-close-button"
   }, /*#__PURE__*/React__default.createElement(CrossIcon, null))), /*#__PURE__*/React__default.createElement("div", {
     className: cx(s$1.content, contentClassName, (_cx = {}, _cx[s$1.contentScrollable] = scrollable, _cx))
@@ -2211,6 +2256,20 @@ var paymentPlanShorthandName = function paymentPlanShorthandName(payment) {
     return installmentsCount + "x";
   }
 };
+
+var withNoFee = function withNoFee(payment) {
+  var _payment$payment_plan;
+
+  if ((_payment$payment_plan = payment.payment_plan) != null && _payment$payment_plan.every(function (plan) {
+    return plan.customer_fee === 0 && plan.customer_interest === 0;
+  })) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
+      id: "payment-plan-strings.no-fee",
+      defaultMessage: '(sans frais)'
+    }));
+  }
+};
+
 var paymentPlanInfoText = function paymentPlanInfoText(payment) {
   var deferred_days = payment.deferred_days,
       deferred_months = payment.deferred_months,
@@ -2220,20 +2279,10 @@ var paymentPlanInfoText = function paymentPlanInfoText(payment) {
       _payment$minAmount = payment.minAmount,
       minAmount = _payment$minAmount === void 0 ? 0 : _payment$minAmount,
       _payment$maxAmount = payment.maxAmount,
-      maxAmount = _payment$maxAmount === void 0 ? 0 : _payment$maxAmount;
+      maxAmount = _payment$maxAmount === void 0 ? 0 : _payment$maxAmount,
+      payment_plan = payment.payment_plan;
   var deferredDaysCount = deferred_days + deferred_months * 30;
 
-  var withNoFee = function withNoFee() {
-    if (payment.payment_plan.every(function (plan) {
-      return plan.customer_fee === 0 && plan.customer_interest === 0;
-    })) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
-        id: "payment-plan-strings.no-fee",
-        defaultMessage: '(sans frais)'
-      }));
-    }
-  };
-
   if (!eligible) {
     return purchaseAmount > maxAmount ? /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
       id: "payment-plan-strings.ineligible-greater-than-max",
@@ -2256,27 +2305,32 @@ var paymentPlanInfoText = function paymentPlanInfoText(payment) {
         })
       }
     });
+  } else if (!payment_plan) {
+    /* This error should never happen. We added this condition to avoid a typescript warning on
+         payment_plan possibly undefined. As far as we know, it only happens when the plan is not
+         eligible, which is checked above. */
+    throw Error("No payment plan provided for payment in " + installmentsCount + " installments. Please contact us if you see this error.");
   } else if (deferredDaysCount !== 0 && installmentsCount === 1) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
       id: "payment-plan-strings.deferred",
       defaultMessage: "{totalAmount} \xE0 payer le {dueDate}",
       values: {
         totalAmount: /*#__PURE__*/React__default.createElement(reactIntl.FormattedNumber, {
-          value: priceFromCents(payment.payment_plan[0].total_amount),
+          value: priceFromCents(payment_plan[0].total_amount),
           style: "currency",
           currency: "EUR"
         }),
         dueDate: /*#__PURE__*/React__default.createElement(reactIntl.FormattedDate, {
-          value: dateFns.secondsToMilliseconds(payment.payment_plan[0].due_date),
+          value: dateFns.secondsToMilliseconds(payment_plan[0].due_date),
           day: "numeric",
           month: "long",
           year: "numeric"
         })
       }
-    }), withNoFee());
+    }), withNoFee(payment));
   } else if (installmentsCount > 0) {
-    var areInstallmentsOfSameAmount = payment.payment_plan.every(function (installment, index) {
-      return index === 0 || installment.total_amount === payment.payment_plan[0].total_amount;
+    var areInstallmentsOfSameAmount = payment_plan == null ? void 0 : payment_plan.every(function (installment, index) {
+      return index === 0 || installment.total_amount === payment_plan[0].total_amount;
     });
 
     if (areInstallmentsOfSameAmount) {
@@ -2285,13 +2339,13 @@ var paymentPlanInfoText = function paymentPlanInfoText(payment) {
         defaultMessage: "{installmentsCount} x {totalAmount}",
         values: {
           totalAmount: /*#__PURE__*/React__default.createElement(reactIntl.FormattedNumber, {
-            value: priceFromCents(payment.payment_plan[0].total_amount),
+            value: priceFromCents(payment_plan[0].total_amount),
             style: "currency",
             currency: "EUR"
           }),
           installmentsCount: installmentsCount
         }
-      }), withNoFee());
+      }), withNoFee(payment));
     }
 
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
@@ -2299,18 +2353,18 @@ var paymentPlanInfoText = function paymentPlanInfoText(payment) {
       defaultMessage: "{numberOfRemainingInstallments, plural, one {{firstInstallmentAmount} puis {numberOfRemainingInstallments} x {othersInstallmentAmount}} other {{firstInstallmentAmount} puis {numberOfRemainingInstallments} x {othersInstallmentAmount}}}",
       values: {
         firstInstallmentAmount: /*#__PURE__*/React__default.createElement(reactIntl.FormattedNumber, {
-          value: priceFromCents(payment.payment_plan[0].total_amount),
+          value: priceFromCents(payment_plan[0].total_amount),
           style: "currency",
           currency: "EUR"
         }),
         numberOfRemainingInstallments: installmentsCount - 1,
         othersInstallmentAmount: /*#__PURE__*/React__default.createElement(reactIntl.FormattedNumber, {
-          value: priceFromCents(payment.payment_plan[1].total_amount),
+          value: priceFromCents(payment_plan[1].total_amount),
           style: "currency",
           currency: "EUR"
         })
       }
-    }), withNoFee());
+    }), withNoFee(payment));
   }
 
   return /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
@@ -2326,13 +2380,13 @@ var EligibilityPlansButtons = function EligibilityPlansButtons(_ref) {
       currentPlanIndex = _ref.currentPlanIndex,
       setCurrentPlanIndex = _ref.setCurrentPlanIndex;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: s$2.buttons
+    className: cx(s$2.buttons, STATIC_CUSTOMISATION_CLASSES.eligibilityOptions)
   }, eligibilityPlans.map(function (eligibilityPlan, index) {
     var _cx;
 
     return /*#__PURE__*/React__default.createElement("button", {
       key: index,
-      className: cx((_cx = {}, _cx[s$2.active] = index === currentPlanIndex, _cx)),
+      className: cx((_cx = {}, _cx[cx(s$2.active, STATIC_CUSTOMISATION_CLASSES.activeOption)] = index === currentPlanIndex, _cx)),
       onClick: function onClick() {
         return setCurrentPlanIndex(index);
       }
@@ -2351,10 +2405,10 @@ var Schedule = function Schedule(_ref) {
   var isCredit = currentPlan && currentPlan.installments_count > 4;
   var intl = reactIntl.useIntl();
   return /*#__PURE__*/React__default.createElement("div", {
-    className: s$3.schedule,
+    className: cx(s$3.schedule, STATIC_CUSTOMISATION_CLASSES.scheduleDetails),
     "data-testid": "modal-installments-element"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cx(s$3.scheduleLine, s$3.total)
+    className: cx(s$3.scheduleLine, s$3.total, STATIC_CUSTOMISATION_CLASSES.scheduleTotal)
   }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
     id: "eligibility-modal.total",
     defaultMessage: "Total"
@@ -2363,7 +2417,7 @@ var Schedule = function Schedule(_ref) {
     style: "currency",
     currency: "EUR"
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(s$3.scheduleLine, s$3.creditCost)
+    className: cx(s$3.scheduleLine, s$3.creditCost, STATIC_CUSTOMISATION_CLASSES.scheduleCredit)
   }, isCredit ? /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
     id: "eligibility-modal.credit-cost",
     defaultMessage: "Dont co\xFBt du cr\xE9dit"
@@ -2416,13 +2470,15 @@ var s$4 = {"list":"_180ro","listItem":"_1HqCO","bullet":"_3B8wx"};
 
 var Info = function Info() {
   return /*#__PURE__*/React__default.createElement("div", {
-    className: s$4.list,
+    className: cx(s$4.list, STATIC_CUSTOMISATION_CLASSES.info),
     "data-testid": "modal-info-element"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: s$4.listItem
   }, /*#__PURE__*/React__default.createElement("div", {
     className: s$4.bullet
-  }, "1"), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
+  }, "1"), /*#__PURE__*/React__default.createElement("div", {
+    className: STATIC_CUSTOMISATION_CLASSES.infoMessage
+  }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
     id: "eligibility-modal.bullet-1",
     defaultMessage: "Choisissez <strong>Alma</strong> au moment du paiement.",
     values: {
@@ -2434,7 +2490,9 @@ var Info = function Info() {
     className: s$4.listItem
   }, /*#__PURE__*/React__default.createElement("div", {
     className: s$4.bullet
-  }, "2"), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
+  }, "2"), /*#__PURE__*/React__default.createElement("div", {
+    className: STATIC_CUSTOMISATION_CLASSES.infoMessage
+  }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
     id: "eligibility-modal.bullet-2",
     defaultMessage: "Renseignez les <strong>informations</strong> demand\xE9es.",
     values: {
@@ -2446,7 +2504,9 @@ var Info = function Info() {
     className: s$4.listItem
   }, /*#__PURE__*/React__default.createElement("div", {
     className: s$4.bullet
-  }, "3"), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
+  }, "3"), /*#__PURE__*/React__default.createElement("div", {
+    className: STATIC_CUSTOMISATION_CLASSES.infoMessage
+  }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
     id: "eligibility-modal.bullet-3",
     defaultMessage: "La validation de votre paiement <strong>instantan\xE9e</strong> !",
     values: {
@@ -2502,32 +2562,44 @@ var Logo = function Logo() {
 
 var s$6 = {"title":"_3ERx-"};
 
-var Title = function Title() {
+var Title = function Title(_ref) {
+  var isSomePlanDeferred = _ref.isSomePlanDeferred;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: s$6.title,
+    className: cx(s$6.title, STATIC_CUSTOMISATION_CLASSES.title),
     "data-testid": "modal-title-element"
-  }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
-    id: "eligibility-modal.title",
+  }, isSomePlanDeferred ? /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
+    id: 'eligibility-modal.title-deferred',
     defaultMessage: "<highlighted>Payez en plusieurs fois</highlighted> ou plus tard par carte bancaire avec Alma.",
     values: {
       highlighted: function highlighted() {
         return /*#__PURE__*/React__default.createElement("span", null, [].slice.call(arguments));
       }
     }
+  }) : /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
+    id: 'eligibility-modal.title',
+    defaultMessage: "<highlighted>Payez en plusieurs fois</highlighted> par carte bancaire avec Alma.",
+    values: {
+      highlighted: function highlighted() {
+        return /*#__PURE__*/React__default.createElement("span", null, [].slice.call(arguments));
+      }
+    }
   }));
 };
 
 var s$7 = {"container":"_21g6u","block":"_3zaP5","left":"_2SBRC"};
 
 var DesktopModal = function DesktopModal(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      isSomePlanDeferred = _ref.isSomePlanDeferred;
   return /*#__PURE__*/React__default.createElement("div", {
     className: s$7.container,
     "data-testid": "modal-container"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cx([s$7.block, s$7.left])
-  }, /*#__PURE__*/React__default.createElement(Title, null), /*#__PURE__*/React__default.createElement(Info, null), /*#__PURE__*/React__default.createElement(Logo, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: s$7.block
+    className: cx([s$7.block, s$7.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)
   }, children));
 };
 
@@ -2536,11 +2608,14 @@ var s$8 = {"noEligibility":"_17qNJ","loader":"_2oTJq"};
 var s$9 = {"container":"_2G7Ch"};
 
 var MobileModal = function MobileModal(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      isSomePlanDeferred = _ref.isSomePlanDeferred;
   return /*#__PURE__*/React__default.createElement("div", {
     className: s$9.container,
     "data-testid": "modal-container"
-  }, /*#__PURE__*/React__default.createElement(Title, null), children, /*#__PURE__*/React__default.createElement(Info, null), /*#__PURE__*/React__default.createElement(Logo, null));
+  }, /*#__PURE__*/React__default.createElement(Title, {
+    isSomePlanDeferred: isSomePlanDeferred
+  }), children, /*#__PURE__*/React__default.createElement(Info, null), /*#__PURE__*/React__default.createElement(Logo, null));
 };
 
 var EligibilityModal = function EligibilityModal(_ref) {
@@ -2561,25 +2636,23 @@ var EligibilityModal = function EligibilityModal(_ref) {
     return plan.eligible;
   });
   var currentPlan = eligiblePlans[currentPlanIndex];
-  var modalProps = {
-    eligibilityPlans: eligiblePlans,
-    currentPlanIndex: currentPlanIndex,
-    setCurrentPlanIndex: setCurrentPlanIndex,
-    currentPlan: currentPlan,
-    status: status
-  };
+  var isSomePlanDeferred = eligibilityPlans.some(function (plan) {
+    return plan.deferred_days > 0 || plan.deferred_months > 0;
+  });
   return /*#__PURE__*/React__default.createElement(ControlledModal, {
     onClose: onClose,
     ariaHideApp: false,
     scrollable: true,
     isOpen: true
-  }, /*#__PURE__*/React__default.createElement(ModalComponent, Object.assign({}, modalProps), status === apiStatus.PENDING && /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalComponent, {
+    isSomePlanDeferred: isSomePlanDeferred
+  }, status === apiStatus.PENDING && /*#__PURE__*/React__default.createElement("div", {
     className: s$8.loader
   }, /*#__PURE__*/React__default.createElement(LoadingIndicator, null)), status === apiStatus.SUCCESS && eligiblePlans.length === 0 && /*#__PURE__*/React__default.createElement("div", {
     className: s$8.noEligibility
   }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, {
     id: "eligibility-modal.no-eligibility",
-    defaultMessage: "Oups, il semblerait que la simulation n'aie pas fonctionn\xE9."
+    defaultMessage: "Oups, il semblerait que la simulation n'ait pas fonctionn\xE9."
   })), status === apiStatus.SUCCESS && eligiblePlans.length >= 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(EligibilityPlansButtons, {
     eligibilityPlans: eligiblePlans,
     currentPlanIndex: currentPlanIndex,
@@ -2696,6 +2769,24 @@ var getIndexOfActivePlan = function getIndexOfActivePlan(_ref) {
   return 0;
 };
 
+/**
+ * Prefix classes to avoid name collisions.
+ */
+var prefix$1 = 'alma-payment-plans';
+/**
+ * Class names for the **payment plans** widget.
+ * Those classes are intended to be used by the **merchant developer**.
+ */
+
+var STATIC_CUSTOMISATION_CLASSES$1 = {
+  container: prefix$1 + '-container',
+  eligibilityLine: prefix$1 + '-eligibility-line',
+  eligibilityOptions: prefix$1 + '-eligibility-options',
+  notEligibleOption: prefix$1 + '-not-eligible-option',
+  paymentInfo: prefix$1 + '-payment-info',
+  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 VERY_LONG_TIME_IN_MS = 1000 * 3600 * 24 * 365;
@@ -2722,7 +2813,7 @@ var PaymentPlanWidget = function PaymentPlanWidget(_ref) {
     eligibilityPlans: eligibilityPlans,
     suggestedPaymentPlan: suggestedPaymentPlan != null ? suggestedPaymentPlan : 0
   });
-  var isSuggestedPaymentPlanSpecified = suggestedPaymentPlan !== undefined; // 👈  The merchant decided to focus a tab and remove animated transition.
+  var isSuggestedPaymentPlanSpecified = suggestedPaymentPlan !== undefined; // 👈  The merchant decided to focus a tab
 
   var isTransitionSpecified = transitionDelay !== undefined; // 👈  The merchant has specified a transition time
 
@@ -2807,14 +2898,14 @@ 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)),
+    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),
     "data-testid": "widget-button"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: s$b.primaryContainer
+    className: cx(s$b.primaryContainer, STATIC_CUSTOMISATION_CLASSES$1.eligibilityLine)
   }, /*#__PURE__*/React__default.createElement(LogoIcon, {
     className: s$b.logo
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: s$b.paymentPlans
+    className: cx(s$b.paymentPlans, STATIC_CUSTOMISATION_CLASSES$1.eligibilityOptions)
   }, eligibilityPlans.map(function (eligibilityPlan, key) {
     var _cx2;
 
@@ -2824,10 +2915,10 @@ var PaymentPlanWidget = function PaymentPlanWidget(_ref) {
         return onHover(key);
       },
       onMouseOut: onLeave,
-      className: cx(s$b.plan, (_cx2 = {}, _cx2[s$b.active] = current === key, _cx2[s$b.notEligible] = !eligibilityPlan.eligible, _cx2))
+      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))
     }, paymentPlanShorthandName(eligibilityPlan));
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(s$b.info, (_cx3 = {}, _cx3[s$b.notEligible] = eligibilityPlans[current] && !eligibilityPlans[current].eligible, _cx3))
+    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)
   }, eligibilityPlans.length !== 0 && paymentPlanInfoText(eligibilityPlans[current]))), isOpen && /*#__PURE__*/React__default.createElement(EligibilityModal, {
     initialPlanIndex: getIndexWithinEligiblePlans(current),
     onClose: closeModal,