@alma/widgets 2.4.0 → 2.6.0

package/dist/raw/widgets.modern.js

@@ -1815,8 +1815,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}",
@@ -1838,7 +1839,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}",
@@ -1860,7 +1862,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}",
@@ -1881,8 +1884,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}",
@@ -1904,7 +1908,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}",
@@ -1926,7 +1931,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}",
@@ -2148,7 +2154,8 @@ const STATIC_CUSTOMISATION_CLASSES = {
   closeButton: prefix + '-close-button',
   scheduleDetails: prefix + '-schedule-details',
   scheduleTotal: prefix + '-schedule-total',
-  scheduleCredit: prefix + '-schedule-credit'
+  scheduleCredit: prefix + '-schedule-credit',
+  summary: prefix + '-summary'
 };
 
 const _excluded = ["children", "isOpen", "onClose", "className", "contentClassName", "scrollable"];
@@ -2340,7 +2347,7 @@ const EligibilityPlansButtons = ({
   onClick: () => setCurrentPlanIndex(index)
 }, paymentPlanShorthandName(eligibilityPlan))));
 
-var s$3 = {"schedule":"_MPKjS","scheduleLine":"_1A7Qv","total":"_14Ejo","creditCost":"_1ZIgu","creditMessage":"_1BUr8"};
+var s$3 = {"schedule":"_MPKjS","scheduleLine":"_1A7Qv","total":"_14Ejo","summary":"_65ZpD","creditCost":"_1ZIgu","creditCostAmount":"_tUTZp","creditMessage":"_1BUr8"};
 
 const Schedule = ({
   currentPlan
@@ -2351,9 +2358,27 @@ const Schedule = ({
   const customerFees = priceFromCents(currentPlan ? currentPlan.customer_total_cost_amount : 0);
   const isCredit = currentPlan && currentPlan.installments_count > 4;
   const intl = useIntl();
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: cx(s$3.schedule, STATIC_CUSTOMISATION_CLASSES.scheduleDetails),
     "data-testid": "modal-installments-element"
+  }, ((currentPlan == null ? void 0 : currentPlan.payment_plan) || []).map((installment, index) => /*#__PURE__*/React.createElement("div", {
+    className: s$3.scheduleLine,
+    key: index
+  }, /*#__PURE__*/React.createElement("span", null, isToday(installment.due_date * 1000) ? /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "installments.today",
+    defaultMessage: "Aujourd'hui"
+  }) : /*#__PURE__*/React.createElement(FormattedDate, {
+    value: installment.due_date * 1000,
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedNumber, {
+    value: priceFromCents(installment.total_amount),
+    style: "currency",
+    currency: "EUR"
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: cx(s$3.summary, STATIC_CUSTOMISATION_CLASSES.summary),
+    "data-testid": "modal-summary"
   }, /*#__PURE__*/React.createElement("div", {
     className: cx(s$3.scheduleLine, s$3.total, STATIC_CUSTOMISATION_CLASSES.scheduleTotal)
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -2371,7 +2396,9 @@ const Schedule = ({
   })) : /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "eligibility-modal.cost",
     defaultMessage: "Dont frais"
-  })), /*#__PURE__*/React.createElement("span", null, isCredit ? /*#__PURE__*/React.createElement(FormattedMessage, {
+  })), /*#__PURE__*/React.createElement("span", {
+    className: s$3.creditCostAmount
+  }, isCredit ? /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "eligibility-modal.credit-cost-amount",
     defaultMessage: "{creditCost} (TAEG {TAEG})",
     values: {
@@ -2388,27 +2415,12 @@ const Schedule = ({
     value: customerFees,
     style: "currency",
     currency: "EUR"
-  }))), ((currentPlan == null ? void 0 : currentPlan.payment_plan) || []).map((installment, index) => /*#__PURE__*/React.createElement("div", {
-    className: s$3.scheduleLine,
-    key: index
-  }, /*#__PURE__*/React.createElement("span", null, isToday(installment.due_date * 1000) ? /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "installments.today",
-    defaultMessage: "Aujourd'hui"
-  }) : /*#__PURE__*/React.createElement(FormattedDate, {
-    value: installment.due_date * 1000,
-    day: "numeric",
-    month: "long",
-    year: "numeric"
-  })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedNumber, {
-    value: priceFromCents(installment.total_amount),
-    style: "currency",
-    currency: "EUR"
-  })))), isCredit && /*#__PURE__*/React.createElement("p", {
+  }))), isCredit && /*#__PURE__*/React.createElement("p", {
     className: s$3.creditMessage
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "eligibility-modal.credit-commitment",
     defaultMessage: "Un cr\u00E9dit vous engage et doit \u00EAtre rembours\u00E9. V\u00E9rifiez vos capacit\u00E9s de remboursement\n              avant de vous engager."
-  })));
+  }))));
 };
 
 var s$4 = {"list":"_180ro","listItem":"_1HqCO","bullet":"_3B8wx"};
@@ -2496,27 +2508,38 @@ const Logo = () => /*#__PURE__*/React.createElement("div", {
 
 var s$6 = {"title":"_3ERx-"};
 
-const Title = () => /*#__PURE__*/React.createElement("div", {
+const Title = ({
+  isSomePlanDeferred
+}) => /*#__PURE__*/React.createElement("div", {
   className: cx(s$6.title, STATIC_CUSTOMISATION_CLASSES.title),
   "data-testid": "modal-title-element"
-}, /*#__PURE__*/React.createElement(FormattedMessage, {
-  id: "eligibility-modal.title",
+}, isSomePlanDeferred ? /*#__PURE__*/React.createElement(FormattedMessage, {
+  id: 'eligibility-modal.title-deferred',
   defaultMessage: "<highlighted>Payez en plusieurs fois</highlighted> ou plus tard par carte bancaire avec Alma.",
   values: {
     highlighted: (...chunks) => /*#__PURE__*/React.createElement("span", null, chunks)
   }
+}) : /*#__PURE__*/React.createElement(FormattedMessage, {
+  id: 'eligibility-modal.title',
+  defaultMessage: "<highlighted>Payez en plusieurs fois</highlighted> par carte bancaire avec Alma.",
+  values: {
+    highlighted: (...chunks) => /*#__PURE__*/React.createElement("span", null, chunks)
+  }
 }));
 
 var s$7 = {"container":"_21g6u","block":"_3zaP5","left":"_2SBRC"};
 
 const DesktopModal = ({
-  children
+  children,
+  isSomePlanDeferred
 }) => /*#__PURE__*/React.createElement("div", {
   className: s$7.container,
   "data-testid": "modal-container"
 }, /*#__PURE__*/React.createElement("div", {
   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", {
+}, /*#__PURE__*/React.createElement(Title, {
+  isSomePlanDeferred: isSomePlanDeferred
+}), /*#__PURE__*/React.createElement(Info, null), /*#__PURE__*/React.createElement(Logo, null)), /*#__PURE__*/React.createElement("div", {
   className: cx(s$7.block, STATIC_CUSTOMISATION_CLASSES.rightSide)
 }, children));
 
@@ -2525,11 +2548,14 @@ var s$8 = {"noEligibility":"_17qNJ","loader":"_2oTJq"};
 var s$9 = {"container":"_2G7Ch"};
 
 const MobileModal = ({
-  children
+  children,
+  isSomePlanDeferred
 }) => /*#__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));
 
 const EligibilityModal = ({
   initialPlanIndex,
@@ -2544,25 +2570,21 @@ const EligibilityModal = ({
   const ModalComponent = isBigScreen ? DesktopModal : MobileModal;
   const eligiblePlans = eligibilityPlans.filter(plan => plan.eligible);
   const currentPlan = eligiblePlans[currentPlanIndex];
-  const modalProps = {
-    eligibilityPlans: eligiblePlans,
-    currentPlanIndex,
-    setCurrentPlanIndex,
-    currentPlan,
-    status
-  };
+  const isSomePlanDeferred = eligibilityPlans.some(plan => 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(FormattedMessage, {
     id: "eligibility-modal.no-eligibility",
-    defaultMessage: "Oups, il semblerait que la simulation n'aie pas fonctionn\u00E9."
+    defaultMessage: "Oups, il semblerait que la simulation n'ait pas fonctionn\u00E9."
   })), status === apiStatus.SUCCESS && eligiblePlans.length >= 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EligibilityPlansButtons, {
     eligibilityPlans: eligiblePlans,
     currentPlanIndex: currentPlanIndex,