paymob-widget-alpha 1.0.2 → 1.0.3

package/README.md

@@ -118,14 +118,8 @@ The full list of properties is as follows:
 
 ## Notes
 
-- **Rendering**: The widget renders a React app into your `elementId` container.
+- **Rendering**: The widget renders a Installment Widget into your `elementId` container.
 - **Isolation**: UI is rendered inside a Shadow DOM wrapper to reduce CSS conflicts with the host page.
-- **API base URL**: Base URL is resolved from the key prefix (e.g. `egy_`, `are_`, `sau_`, `pak_`, `omn_`) using `publicKey` (and `clientSecret` as a fallback).
-- **Installment plans endpoint**: The widget fetches plans using:
-  - `POST /api/ecommerce/installment-plans/product` with `{ public_key, amount_cents, currency, integration_id? }`
 
-## Troubleshooting
 
-- **Container not found**: Ensure an element exists with the same id passed in `elementId`.
-- **No plans available**: Verify `publicKey`, `currency`, `amount`, and that installment plans exist for the given product/amount.
 

package/main.js

@@ -7846,13 +7846,19 @@ function normalizeBanksWithPlans(installmentPlansProductPayload) {
     var _bankItem$installment, _axios$defaults$baseU, _bankItem$bank_logo;
     const bankInstallmentPlans = (_bankItem$installment = bankItem.installment_plans) != null ? _bankItem$installment : [];
     const installmentOptions = bankInstallmentPlans.map(planFromProduct => {
+      var _planFromProduct$purc, _planFromProduct$conv;
       const interestRate = Number(planFromProduct.interest_rate);
-      const badge = interestRate === 0 ? '0% Interest' : `${interestRate}% Interest`;
+      const purchaseFees = Number((_planFromProduct$purc = planFromProduct.purchase_fees) != null ? _planFromProduct$purc : 0);
+      const convenienceFees = Number((_planFromProduct$conv = planFromProduct.convenience_fees) != null ? _planFromProduct$conv : 0);
+      const fees = purchaseFees + convenienceFees;
+      const noFees = !(planFromProduct.purchase_fees || planFromProduct.convenience_fees);
       return {
         id: planFromProduct.id,
         months: Number(planFromProduct.tenure),
         monthlyAmount: Number(planFromProduct.installment_amount),
-        badge
+        interestRate,
+        fees,
+        noFees
       };
     });
     const minimumMonthlyFromProduct = Number(bankItem.minimum_plan_amount);
@@ -8170,17 +8176,31 @@ function Widget({
                   children: [installmentOption.months, " Months"]
                 })]
               }),
-              hintText: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+              hintText: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
                 style: {
                   display: 'flex',
                   alignItems: 'center',
-                  gap: '10px'
+                  gap: '8px',
+                  flexWrap: 'wrap'
                 },
-                children: /*#__PURE__*/(0,jsx_runtime.jsx)(Badge, {
-                  text: installmentOption.badge,
+                children: [installmentOption.noFees && /*#__PURE__*/(0,jsx_runtime.jsx)(Badge, {
+                  text: "No fees",
                   color: "green",
                   size: "sm"
-                })
+                }), installmentOption.fees > 0 && /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
+                  style: {
+                    color: '#475467',
+                    fontSize: '14px',
+                    fontWeight: 400,
+                    lineHeight: '18px',
+                    letterSpacing: '0.16px'
+                  },
+                  children: ["Including ", currency, " ", installmentOption.fees, " fees"]
+                }), installmentOption.interestRate === 0 && /*#__PURE__*/(0,jsx_runtime.jsx)(Badge, {
+                  text: "0% Interest",
+                  color: "green",
+                  size: "sm"
+                })]
               })
             }, installmentOption.id))
           })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paymob-widget-alpha",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "keywords": ["paymob","widget","paymob-widget"],
   "main": "./main.js",
   "license": "MIT",