@alma/widgets 2.3.4 → 2.4.0

package/dist/raw/widgets.umd.js

@@ -14473,16 +14473,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 +14516,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 +16754,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 +16809,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 +18178,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 +18201,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 +18227,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 +18261,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 +18275,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 +18302,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 +18327,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 +18339,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 +18392,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 +18412,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 +18426,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: {
@@ -18432,7 +18486,7 @@
 
   var Title = function Title() {
     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",
@@ -18453,9 +18507,9 @@
       className: s$7.container,
       "data-testid": "modal-container"
     }, /*#__PURE__*/react.createElement("div", {
-      className: classnames([s$7.block, s$7.left])
+      className: classnames([s$7.block, s$7.left, STATIC_CUSTOMISATION_CLASSES.leftSide])
     }, /*#__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, STATIC_CUSTOMISATION_CLASSES.rightSide)
     }, children));
   };
 
@@ -18624,6 +18678,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 +18722,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 +18807,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 +18824,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,