@reevit/react 0.6.0 → 0.7.0

package/README.md

@@ -293,6 +293,20 @@ function MpesaPayment() {
 | Monnify | NG | Card, Bank Transfer, USSD |
 | M-Pesa | KE, TZ | Mobile Money (STK Push) |
 
+## Release Notes
+
+### v0.7.0
+
+- Redesigned checkout UI with premium visual polish
+- New typography system: Grato Classic for body, ABC Repro Mono for amounts
+- Layered shadow system for natural depth
+- Replaced emoji icons with inline SVG icons (consistent cross-platform rendering)
+- New loading animation (three-dot pulse), success glow effect, and countdown bar
+- Improved dark mode contrast and surfaces
+- Mobile bottom-sheet pattern with touch-friendly targets (44px+)
+- Smoother animations with cubic-bezier easing curves
+- Removed external Google Fonts dependency (zero network requests for fonts)
+
 ## License
 
 MIT © [Reevit](https://reevit.io)

package/dist/index.js

@@ -817,30 +817,47 @@ function detectCountryFromCurrency(currency) {
   };
   return currencyToCountry[currency.toUpperCase()] || "GH";
 }
+var MethodIcons = {
+  card: () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "10", x2: "23", y2: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "15", x2: "9", y2: "15" })
+  ] }),
+  mobile_money: () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "18", x2: "12", y2: "18.01", strokeWidth: "2", strokeLinecap: "round" })
+  ] }),
+  bank_transfer: () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21h18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10h18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3l9 7H3l9-7z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 10v8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 10v8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 10v8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 10v8" })
+  ] }),
+  apple_pay: () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) }),
+  google_pay: () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z", fill: "currentColor" }) })
+};
 var methodConfig = {
   card: {
     label: "Card",
-    icon: "\u{1F4B3}",
     description: "Pay with Visa, Mastercard, or other cards"
   },
   mobile_money: {
     label: "Mobile Money",
-    icon: "\u{1F4F1}",
     description: "MTN, Telecel, AirtelTigo Money"
   },
   bank_transfer: {
     label: "Bank Transfer",
-    icon: "\u{1F3E6}",
     description: "Pay directly from your bank account"
   },
   apple_pay: {
     label: "Apple Pay",
-    icon: "\u{1F34E}",
     description: "Pay with Apple Pay"
   },
   google_pay: {
     label: "Google Pay",
-    icon: "\u{1F916}",
     description: "Pay with Google Pay"
   }
 };
@@ -890,7 +907,6 @@ function PaymentMethodSelector({
         ),
         style: selectedTheme?.backgroundColor ? { backgroundColor: selectedTheme.backgroundColor } : void 0,
         children: methods.map((method, index) => {
-          const config = methodConfig[method];
           const isSelected = selectedMethod === method;
           const methodLabel = getMethodLabel(method);
           const methodDescription = getMethodDescription(method);
@@ -921,7 +937,7 @@ function PaymentMethodSelector({
                     className: "reevit-method-option__logo-img"
                   },
                   i
-                )) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__icon", children: config.icon }) }),
+                )) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__icon", children: MethodIcons[method]() }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-method-option__content", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__label", style: selectedTheme?.textColor ? { color: selectedTheme.textColor } : void 0, children: methodLabel }),
                   !isGrid && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-method-option__description", style: selectedTheme?.descriptionColor ? { color: selectedTheme.descriptionColor } : void 0, children: methodDescription })
@@ -2481,7 +2497,11 @@ function ReevitCheckout({
   const renderContent = () => {
     if (status === "loading" || status === "processing") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-loading reevit-animate-fade-in", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-spinner" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-dot-pulse", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-dot-pulse__dot" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-dot-pulse__dot" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-dot-pulse__dot" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: status === "loading" ? "Preparing checkout..." : "Processing payment..." })
       ] });
     }
@@ -2497,12 +2517,22 @@ function ReevitCheckout({
           "Reference: ",
           result.reference
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "reevit-success__redirect", children: "Redirecting in a moment..." })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "reevit-success__redirect", children: "Redirecting in a moment..." }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "reevit-success__countdown",
+            style: { animationDuration: `${successDelayMs}ms` }
+          }
+        )
       ] });
     }
     if (status === "failed" && error && !error.recoverable) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-error reevit-animate-fade-in", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: "\u2715" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Payment Failed" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: error.message }),
         /* @__PURE__ */ jsxRuntime.jsx("button", { className: "reevit-btn reevit-btn--primary", onClick: handleBack, children: "Try Again" })
@@ -2624,7 +2654,11 @@ function ReevitCheckout({
           );
         default:
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-error", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "reevit-error__icon", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+            ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Provider Not Supported" }),
             /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
               "Provider (",