@alma/widgets 2.3.4 → 2.5.1

package/dist/raw/widgets.umd.js

@@ -6292,8 +6292,9 @@
   	"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}",
@@ -6315,7 +6316,8 @@
   	"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}",
@@ -6337,7 +6339,8 @@
   	"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}",
@@ -6358,8 +6361,9 @@
   	"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}",
@@ -6381,7 +6385,8 @@
   	"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}",
@@ -6403,7 +6408,8 @@
   	"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}",
@@ -14473,16 +14479,34 @@
     }
   };
 
+  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) {
@@ -14498,10 +14522,8 @@
         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));
     });
   };
 
@@ -16738,6 +16760,29 @@
     }));
   }
 
+  /**
+   * 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) {
@@ -16770,7 +16815,7 @@
       className: s$1.header
     }, /*#__PURE__*/react.createElement("button", {
       onClick: onClose,
-      className: s$1.closeButton,
+      className: classnames(s$1.closeButton, STATIC_CUSTOMISATION_CLASSES.closeButton),
       "data-testid": "modal-close-button"
     }, /*#__PURE__*/react.createElement(CrossIcon, null))), /*#__PURE__*/react.createElement("div", {
       className: classnames(s$1.content, contentClassName, (_cx = {}, _cx[s$1.contentScrollable] = scrollable, _cx))
@@ -18139,6 +18184,20 @@
       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.createElement(react.Fragment, null, ' ', /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
+        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,
@@ -18148,20 +18207,10 @@
         _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.createElement(react.Fragment, null, ' ', /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
-          id: "payment-plan-strings.no-fee",
-          defaultMessage: '(sans frais)'
-        }));
-      }
-    };
-
     if (!eligible) {
       return purchaseAmount > maxAmount ? /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
         id: "payment-plan-strings.ineligible-greater-than-max",
@@ -18184,27 +18233,32 @@
           })
         }
       });
+    } 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.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
         id: "payment-plan-strings.deferred",
         defaultMessage: "{totalAmount} \xE0 payer le {dueDate}",
         values: {
           totalAmount: /*#__PURE__*/react.createElement(FormattedNumber, {
-            value: priceFromCents(payment.payment_plan[0].total_amount),
+            value: priceFromCents(payment_plan[0].total_amount),
             style: "currency",
             currency: "EUR"
           }),
           dueDate: /*#__PURE__*/react.createElement(FormattedDate, {
-            value: secondsToMilliseconds(payment.payment_plan[0].due_date),
+            value: 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) {
@@ -18213,13 +18267,13 @@
           defaultMessage: "{installmentsCount} x {totalAmount}",
           values: {
             totalAmount: /*#__PURE__*/react.createElement(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.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
@@ -18227,18 +18281,18 @@
         defaultMessage: "{numberOfRemainingInstallments, plural, one {{firstInstallmentAmount} puis {numberOfRemainingInstallments} x {othersInstallmentAmount}} other {{firstInstallmentAmount} puis {numberOfRemainingInstallments} x {othersInstallmentAmount}}}",
         values: {
           firstInstallmentAmount: /*#__PURE__*/react.createElement(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.createElement(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.createElement(MemoizedFormattedMessage, {
@@ -18254,13 +18308,13 @@
         currentPlanIndex = _ref.currentPlanIndex,
         setCurrentPlanIndex = _ref.setCurrentPlanIndex;
     return /*#__PURE__*/react.createElement("div", {
-      className: s$2.buttons
+      className: classnames(s$2.buttons, STATIC_CUSTOMISATION_CLASSES.eligibilityOptions)
     }, eligibilityPlans.map(function (eligibilityPlan, index) {
       var _cx;
 
       return /*#__PURE__*/react.createElement("button", {
         key: index,
-        className: classnames((_cx = {}, _cx[s$2.active] = index === currentPlanIndex, _cx)),
+        className: classnames((_cx = {}, _cx[classnames(s$2.active, STATIC_CUSTOMISATION_CLASSES.activeOption)] = index === currentPlanIndex, _cx)),
         onClick: function onClick() {
           return setCurrentPlanIndex(index);
         }
@@ -18279,10 +18333,10 @@
     var isCredit = currentPlan && currentPlan.installments_count > 4;
     var intl = useIntl();
     return /*#__PURE__*/react.createElement("div", {
-      className: s$3.schedule,
+      className: classnames(s$3.schedule, STATIC_CUSTOMISATION_CLASSES.scheduleDetails),
       "data-testid": "modal-installments-element"
     }, /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$3.scheduleLine, s$3.total)
+      className: classnames(s$3.scheduleLine, s$3.total, STATIC_CUSTOMISATION_CLASSES.scheduleTotal)
     }, /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: "eligibility-modal.total",
       defaultMessage: "Total"
@@ -18291,7 +18345,7 @@
       style: "currency",
       currency: "EUR"
     }))), /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$3.scheduleLine, s$3.creditCost)
+      className: classnames(s$3.scheduleLine, s$3.creditCost, STATIC_CUSTOMISATION_CLASSES.scheduleCredit)
     }, isCredit ? /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: "eligibility-modal.credit-cost",
       defaultMessage: "Dont co\xFBt du cr\xE9dit"
@@ -18344,13 +18398,15 @@
 
   var Info = function Info() {
     return /*#__PURE__*/react.createElement("div", {
-      className: s$4.list,
+      className: classnames(s$4.list, STATIC_CUSTOMISATION_CLASSES.info),
       "data-testid": "modal-info-element"
     }, /*#__PURE__*/react.createElement("div", {
       className: s$4.listItem
     }, /*#__PURE__*/react.createElement("div", {
       className: s$4.bullet
-    }, "1"), /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
+    }, "1"), /*#__PURE__*/react.createElement("div", {
+      className: STATIC_CUSTOMISATION_CLASSES.infoMessage
+    }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: "eligibility-modal.bullet-1",
       defaultMessage: "Choisissez <strong>Alma</strong> au moment du paiement.",
       values: {
@@ -18362,7 +18418,9 @@
       className: s$4.listItem
     }, /*#__PURE__*/react.createElement("div", {
       className: s$4.bullet
-    }, "2"), /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
+    }, "2"), /*#__PURE__*/react.createElement("div", {
+      className: STATIC_CUSTOMISATION_CLASSES.infoMessage
+    }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: "eligibility-modal.bullet-2",
       defaultMessage: "Renseignez les <strong>informations</strong> demand\xE9es.",
       values: {
@@ -18374,7 +18432,9 @@
       className: s$4.listItem
     }, /*#__PURE__*/react.createElement("div", {
       className: s$4.bullet
-    }, "3"), /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
+    }, "3"), /*#__PURE__*/react.createElement("div", {
+      className: STATIC_CUSTOMISATION_CLASSES.infoMessage
+    }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       id: "eligibility-modal.bullet-3",
       defaultMessage: "La validation de votre paiement <strong>instantan\xE9e</strong> !",
       values: {
@@ -18430,32 +18490,44 @@
 
   var s$6 = {"title":"_3ERx-"};
 
-  var Title = function Title() {
+  var Title = function Title(_ref) {
+    var isSomePlanDeferred = _ref.isSomePlanDeferred;
     return /*#__PURE__*/react.createElement("div", {
-      className: s$6.title,
+      className: classnames(s$6.title, STATIC_CUSTOMISATION_CLASSES.title),
       "data-testid": "modal-title-element"
-    }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
-      id: "eligibility-modal.title",
+    }, isSomePlanDeferred ? /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
+      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.createElement("span", null, [].slice.call(arguments));
         }
       }
+    }) : /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
+      id: 'eligibility-modal.title',
+      defaultMessage: "<highlighted>Payez en plusieurs fois</highlighted> par carte bancaire avec Alma.",
+      values: {
+        highlighted: function highlighted() {
+          return /*#__PURE__*/react.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.createElement("div", {
       className: s$7.container,
       "data-testid": "modal-container"
     }, /*#__PURE__*/react.createElement("div", {
-      className: classnames([s$7.block, s$7.left])
-    }, /*#__PURE__*/react.createElement(Title, null), /*#__PURE__*/react.createElement(Info, null), /*#__PURE__*/react.createElement(Logo, null)), /*#__PURE__*/react.createElement("div", {
-      className: s$7.block
+      className: classnames([s$7.block, s$7.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)
     }, children));
   };
 
@@ -18464,11 +18536,14 @@
   var s$9 = {"container":"_2G7Ch"};
 
   var MobileModal = function MobileModal(_ref) {
-    var children = _ref.children;
+    var children = _ref.children,
+        isSomePlanDeferred = _ref.isSomePlanDeferred;
     return /*#__PURE__*/react.createElement("div", {
       className: s$9.container,
       "data-testid": "modal-container"
-    }, /*#__PURE__*/react.createElement(Title, null), children, /*#__PURE__*/react.createElement(Info, null), /*#__PURE__*/react.createElement(Logo, null));
+    }, /*#__PURE__*/react.createElement(Title, {
+      isSomePlanDeferred: isSomePlanDeferred
+    }), children, /*#__PURE__*/react.createElement(Info, null), /*#__PURE__*/react.createElement(Logo, null));
   };
 
   var EligibilityModal = function EligibilityModal(_ref) {
@@ -18489,25 +18564,23 @@
       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.createElement(ControlledModal, {
       onClose: onClose,
       ariaHideApp: false,
       scrollable: true,
       isOpen: true
-    }, /*#__PURE__*/react.createElement(ModalComponent, Object.assign({}, modalProps), status === apiStatus.PENDING && /*#__PURE__*/react.createElement("div", {
+    }, /*#__PURE__*/react.createElement(ModalComponent, {
+      isSomePlanDeferred: isSomePlanDeferred
+    }, status === apiStatus.PENDING && /*#__PURE__*/react.createElement("div", {
       className: s$8.loader
     }, /*#__PURE__*/react.createElement(LoadingIndicator, null)), status === apiStatus.SUCCESS && eligiblePlans.length === 0 && /*#__PURE__*/react.createElement("div", {
       className: s$8.noEligibility
     }, /*#__PURE__*/react.createElement(MemoizedFormattedMessage, {
       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.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(EligibilityPlansButtons, {
       eligibilityPlans: eligiblePlans,
       currentPlanIndex: currentPlanIndex,
@@ -18624,6 +18697,24 @@
     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;
@@ -18650,7 +18741,7 @@
       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
 
@@ -18735,14 +18826,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)),
+      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),
       "data-testid": "widget-button"
     }, /*#__PURE__*/react.createElement("div", {
-      className: s$b.primaryContainer
+      className: classnames(s$b.primaryContainer, STATIC_CUSTOMISATION_CLASSES$1.eligibilityLine)
     }, /*#__PURE__*/react.createElement(LogoIcon, {
       className: s$b.logo
     }), /*#__PURE__*/react.createElement("div", {
-      className: s$b.paymentPlans
+      className: classnames(s$b.paymentPlans, STATIC_CUSTOMISATION_CLASSES$1.eligibilityOptions)
     }, eligibilityPlans.map(function (eligibilityPlan, key) {
       var _cx2;
 
@@ -18752,10 +18843,10 @@
           return onHover(key);
         },
         onMouseOut: onLeave,
-        className: classnames(s$b.plan, (_cx2 = {}, _cx2[s$b.active] = current === key, _cx2[s$b.notEligible] = !eligibilityPlan.eligible, _cx2))
+        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))
       }, paymentPlanShorthandName(eligibilityPlan));
     }))), /*#__PURE__*/react.createElement("div", {
-      className: classnames(s$b.info, (_cx3 = {}, _cx3[s$b.notEligible] = eligibilityPlans[current] && !eligibilityPlans[current].eligible, _cx3))
+      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)
     }, eligibilityPlans.length !== 0 && paymentPlanInfoText(eligibilityPlans[current]))), isOpen && /*#__PURE__*/react.createElement(EligibilityModal, {
       initialPlanIndex: getIndexWithinEligiblePlans(current),
       onClose: closeModal,