@alma/widgets 2.3.4 → 2.4.0

package/dist/raw/widgets.modern.js

@@ -2019,11 +2019,33 @@ async function fetchFromApi(url = '', data, headers) {
   return response.json();
 }
 
+const 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;
+};
+
+const getPaymentPlanBoundaries = (plan, configPlan) => {
+  var _plan$constraints;
+
+  // When the plan is not eligible, the purchase amount constraints is given from the merchant config
+  const 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 : {};
+};
+
 const filterELigibility = (eligibilities, configPlans) => {
   // Remove p1x
-  const filteredEligibilityPlans = eligibilities.filter(plan => !(plan.installments_count === 1 && plan.deferred_days === 0 && plan.deferred_months === 0)) // Keeps the plans that have a payment_plan property
-  .filter(plan => plan.payment_plan) // Remove plans that have a reasons property
-  .filter(plan => !plan.reasons); // If no configPlans was provided, return eligibility response
+  const filteredEligibilityPlans = eligibilities.filter(plan => !(plan.installments_count === 1 && plan.deferred_days === 0 && plan.deferred_months === 0)); // If no configPlans was provided, return eligibility response
 
   if (!configPlans) {
     return filteredEligibilityPlans;
@@ -2038,10 +2060,8 @@ const 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));
   });
 };
 
@@ -2108,6 +2128,29 @@ function CrossIcon({
   }));
 }
 
+/**
+ * Prefix classes to avoid name collisions.
+ */
+const prefix = 'alma-eligibility-modal';
+/**
+ * Class names for the **eligibility modale** widget.
+ * Those classes are intended to be used by the **merchant developer**.
+ */
+
+const 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'
+};
+
 const _excluded = ["children", "isOpen", "onClose", "className", "contentClassName", "scrollable"];
 
 const ControlledModal = _ref => {
@@ -2139,7 +2182,7 @@ const ControlledModal = _ref => {
     className: s$1.header
   }, /*#__PURE__*/React.createElement("button", {
     onClick: onClose,
-    className: s$1.closeButton,
+    className: cx(s$1.closeButton, STATIC_CUSTOMISATION_CLASSES.closeButton),
     "data-testid": "modal-close-button"
   }, /*#__PURE__*/React.createElement(CrossIcon, null))), /*#__PURE__*/React.createElement("div", {
     className: cx(s$1.content, contentClassName, {
@@ -2168,6 +2211,18 @@ const paymentPlanShorthandName = payment => {
     return `${installmentsCount}x`;
   }
 };
+
+const withNoFee = payment => {
+  var _payment$payment_plan;
+
+  if ((_payment$payment_plan = payment.payment_plan) != null && _payment$payment_plan.every(plan => plan.customer_fee === 0 && plan.customer_interest === 0)) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, ' ', /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "payment-plan-strings.no-fee",
+      defaultMessage: '(sans frais)'
+    }));
+  }
+};
+
 const paymentPlanInfoText = payment => {
   const {
     deferred_days,
@@ -2176,19 +2231,11 @@ const paymentPlanInfoText = payment => {
     eligible,
     purchase_amount: purchaseAmount,
     minAmount = 0,
-    maxAmount = 0
+    maxAmount = 0,
+    payment_plan
   } = payment;
   const deferredDaysCount = deferred_days + deferred_months * 30;
 
-  const withNoFee = () => {
-    if (payment.payment_plan.every(plan => plan.customer_fee === 0 && plan.customer_interest === 0)) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, ' ', /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "payment-plan-strings.no-fee",
-        defaultMessage: '(sans frais)'
-      }));
-    }
-  };
-
   if (!eligible) {
     return purchaseAmount > maxAmount ? /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "payment-plan-strings.ineligible-greater-than-max",
@@ -2211,26 +2258,31 @@ const 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "payment-plan-strings.deferred",
       defaultMessage: "{totalAmount} \u00E0 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) {
-    const areInstallmentsOfSameAmount = payment.payment_plan.every((installment, index) => index === 0 || installment.total_amount === payment.payment_plan[0].total_amount);
+    const areInstallmentsOfSameAmount = payment_plan == null ? void 0 : payment_plan.every((installment, index) => index === 0 || installment.total_amount === payment_plan[0].total_amount);
 
     if (areInstallmentsOfSameAmount) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -2238,13 +2290,13 @@ const paymentPlanInfoText = payment => {
         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
         }
-      }), withNoFee());
+      }), withNoFee(payment));
     }
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -2252,18 +2304,18 @@ const paymentPlanInfoText = payment => {
       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(FormattedMessage, {
@@ -2279,11 +2331,11 @@ const EligibilityPlansButtons = ({
   currentPlanIndex,
   setCurrentPlanIndex
 }) => /*#__PURE__*/React.createElement("div", {
-  className: s$2.buttons
+  className: cx(s$2.buttons, STATIC_CUSTOMISATION_CLASSES.eligibilityOptions)
 }, eligibilityPlans.map((eligibilityPlan, index) => /*#__PURE__*/React.createElement("button", {
   key: index,
   className: cx({
-    [s$2.active]: index === currentPlanIndex
+    [cx(s$2.active, STATIC_CUSTOMISATION_CLASSES.activeOption)]: index === currentPlanIndex
   }),
   onClick: () => setCurrentPlanIndex(index)
 }, paymentPlanShorthandName(eligibilityPlan))));
@@ -2300,10 +2352,10 @@ const Schedule = ({
   const isCredit = currentPlan && currentPlan.installments_count > 4;
   const intl = useIntl();
   return /*#__PURE__*/React.createElement("div", {
-    className: s$3.schedule,
+    className: cx(s$3.schedule, STATIC_CUSTOMISATION_CLASSES.scheduleDetails),
     "data-testid": "modal-installments-element"
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx(s$3.scheduleLine, s$3.total)
+    className: cx(s$3.scheduleLine, s$3.total, STATIC_CUSTOMISATION_CLASSES.scheduleTotal)
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "eligibility-modal.total",
     defaultMessage: "Total"
@@ -2312,7 +2364,7 @@ const Schedule = ({
     style: "currency",
     currency: "EUR"
   }))), /*#__PURE__*/React.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.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "eligibility-modal.credit-cost",
     defaultMessage: "Dont co\u00FBt du cr\u00E9dit"
@@ -2362,13 +2414,15 @@ const Schedule = ({
 var s$4 = {"list":"_180ro","listItem":"_1HqCO","bullet":"_3B8wx"};
 
 const Info = () => /*#__PURE__*/React.createElement("div", {
-  className: s$4.list,
+  className: cx(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(FormattedMessage, {
+}, "1"), /*#__PURE__*/React.createElement("div", {
+  className: STATIC_CUSTOMISATION_CLASSES.infoMessage
+}, /*#__PURE__*/React.createElement(FormattedMessage, {
   id: "eligibility-modal.bullet-1",
   defaultMessage: "Choisissez <strong>Alma</strong> au moment du paiement.",
   values: {
@@ -2378,7 +2432,9 @@ const Info = () => /*#__PURE__*/React.createElement("div", {
   className: s$4.listItem
 }, /*#__PURE__*/React.createElement("div", {
   className: s$4.bullet
-}, "2"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+}, "2"), /*#__PURE__*/React.createElement("div", {
+  className: STATIC_CUSTOMISATION_CLASSES.infoMessage
+}, /*#__PURE__*/React.createElement(FormattedMessage, {
   id: "eligibility-modal.bullet-2",
   defaultMessage: "Renseignez les <strong>informations</strong> demand\u00E9es.",
   values: {
@@ -2388,7 +2444,9 @@ const Info = () => /*#__PURE__*/React.createElement("div", {
   className: s$4.listItem
 }, /*#__PURE__*/React.createElement("div", {
   className: s$4.bullet
-}, "3"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+}, "3"), /*#__PURE__*/React.createElement("div", {
+  className: STATIC_CUSTOMISATION_CLASSES.infoMessage
+}, /*#__PURE__*/React.createElement(FormattedMessage, {
   id: "eligibility-modal.bullet-3",
   defaultMessage: "La validation de votre paiement <strong>instantan\u00E9e</strong> !",
   values: {
@@ -2439,7 +2497,7 @@ const Logo = () => /*#__PURE__*/React.createElement("div", {
 var s$6 = {"title":"_3ERx-"};
 
 const Title = () => /*#__PURE__*/React.createElement("div", {
-  className: s$6.title,
+  className: cx(s$6.title, STATIC_CUSTOMISATION_CLASSES.title),
   "data-testid": "modal-title-element"
 }, /*#__PURE__*/React.createElement(FormattedMessage, {
   id: "eligibility-modal.title",
@@ -2457,9 +2515,9 @@ const DesktopModal = ({
   className: s$7.container,
   "data-testid": "modal-container"
 }, /*#__PURE__*/React.createElement("div", {
-  className: cx([s$7.block, s$7.left])
+  className: cx([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: cx(s$7.block, STATIC_CUSTOMISATION_CLASSES.rightSide)
 }, children));
 
 var s$8 = {"noEligibility":"_17qNJ","loader":"_2oTJq"};
@@ -2606,6 +2664,24 @@ const getIndexOfActivePlan = ({
   return 0;
 };
 
+/**
+ * Prefix classes to avoid name collisions.
+ */
+const prefix$1 = 'alma-payment-plans';
+/**
+ * Class names for the **payment plans** widget.
+ * Those classes are intended to be used by the **merchant developer**.
+ */
+
+const 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"};
 
 const VERY_LONG_TIME_IN_MS = 1000 * 3600 * 24 * 365;
@@ -2625,7 +2701,7 @@ const PaymentPlanWidget = ({
     eligibilityPlans,
     suggestedPaymentPlan: suggestedPaymentPlan != null ? suggestedPaymentPlan : 0
   });
-  const isSuggestedPaymentPlanSpecified = suggestedPaymentPlan !== undefined; // 👈  The merchant decided to focus a tab and remove animated transition.
+  const isSuggestedPaymentPlanSpecified = suggestedPaymentPlan !== undefined; // 👈  The merchant decided to focus a tab
 
   const isTransitionSpecified = transitionDelay !== undefined; // 👈  The merchant has specified a transition time
 
@@ -2703,28 +2779,28 @@ const PaymentPlanWidget = ({
     className: cx(s$b.widgetButton, {
       [s$b.clickable]: eligiblePlans.length > 0,
       [s$b.unClickable]: eligiblePlans.length === 0
-    }),
+    }, STATIC_CUSTOMISATION_CLASSES$1.container),
     "data-testid": "widget-button"
   }, /*#__PURE__*/React.createElement("div", {
-    className: s$b.primaryContainer
+    className: cx(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: cx(s$b.paymentPlans, STATIC_CUSTOMISATION_CLASSES$1.eligibilityOptions)
   }, eligibilityPlans.map((eligibilityPlan, key) => {
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       onMouseEnter: () => onHover(key),
       onMouseOut: onLeave,
       className: cx(s$b.plan, {
-        [s$b.active]: current === key,
-        [s$b.notEligible]: !eligibilityPlan.eligible
+        [cx(s$b.active, STATIC_CUSTOMISATION_CLASSES$1.activeOption)]: current === key,
+        [cx(s$b.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)]: !eligibilityPlan.eligible
       })
     }, paymentPlanShorthandName(eligibilityPlan));
   }))), /*#__PURE__*/React.createElement("div", {
     className: cx(s$b.info, {
-      [s$b.notEligible]: eligibilityPlans[current] && !eligibilityPlans[current].eligible
-    })
+      [cx(s$b.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)]: eligibilityPlans[current] && !eligibilityPlans[current].eligible
+    }, STATIC_CUSTOMISATION_CLASSES$1.paymentInfo)
   }, eligibilityPlans.length !== 0 && paymentPlanInfoText(eligibilityPlans[current]))), isOpen && /*#__PURE__*/React.createElement(EligibilityModal, {
     initialPlanIndex: getIndexWithinEligiblePlans(current),
     onClose: closeModal,