@splpi/estore-shared-components 7.0.1 → 7.0.2

package/dist/index.mjs

@@ -226,6 +226,37 @@ var STANDARD_ICON_BUTTON_STYLES = {
   }
 };
 
+// src/hooks/ocrStorage.ts
+var OCR_STORAGE_KEY = "ocrResult";
+var readStored = () => {
+  try {
+    const raw = localStorage.getItem(OCR_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+};
+var readOcrResult = (section) => {
+  if (typeof window === "undefined") return null;
+  const stored = readStored();
+  if (!stored || stored.applied?.[section]) return null;
+  return stored;
+};
+var markOcrApplied = (section) => {
+  if (typeof window === "undefined") return false;
+  const stored = readStored();
+  if (!stored || stored.applied?.[section]) return false;
+  try {
+    localStorage.setItem(
+      OCR_STORAGE_KEY,
+      JSON.stringify({ ...stored, applied: { ...stored.applied, [section]: true } })
+    );
+  } catch {
+    return false;
+  }
+  return true;
+};
+
 // src/NewSaleForm/LifePlanApplication1.tsx
 import { useEffect, useState as useState2 } from "react";
 
@@ -329,11 +360,20 @@ var civilStatusCollection = createListCollection({
     { label: "Annulled", value: "annulled" }
   ]
 });
+var applyOcr = (data, ocr) => ocr ? {
+  ...data,
+  firstName: ocr.firstName || data.firstName || "",
+  middleName: ocr.middleName || data.middleName || "",
+  lastName: ocr.lastName || data.lastName || "",
+  birthDate: ocr.birthDate || data.birthDate || "",
+  idType: ocr.idType || data.idType || "",
+  idNumber: ocr.idNumber || data.idNumber || ""
+} : data;
 var LifePlanApplication1 = ({
   initialData,
   onUpdate
 }) => {
-  const [formData, setFormData] = useState2({
+  const [formData, setFormData] = useState2(() => applyOcr({
     firstName: initialData?.firstName ?? "Juan",
     middleName: initialData?.middleName ?? "Santos",
     lastName: initialData?.lastName ?? "Dela Cruz",
@@ -350,49 +390,14 @@ var LifePlanApplication1 = ({
     emailAddress: initialData?.emailAddress ?? "juan.delacruz@example.com",
     mailingAddress: initialData?.mailingAddress ?? "123 Mabini Street, Barangay San Antonio, Makati City",
     landLineNumber: initialData?.landLineNumber ?? "02-8123-4567"
-  });
+  }, readOcrResult("personal")));
   const updateFormData = (nextData) => {
     setFormData(nextData);
     onUpdate?.(nextData);
   };
   useEffect(() => {
-    const OCRValue = typeof window === "undefined" ? null : localStorage.getItem("ocrResult");
-    if (OCRValue != null) {
-      try {
-        const ocrData = JSON.parse(OCRValue);
-        let formattedBirthDate = "";
-        if (typeof ocrData?.birthDate === "string") {
-          const [month, day, year] = ocrData.birthDate.split("/").map((part) => part.trim());
-          if (month && day && year) {
-            formattedBirthDate = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
-          }
-        }
-        let mappedIdType = "";
-        if (ocrData?.idType) {
-          const normalizedIdType = ocrData.idType.toLowerCase().replace(/\s+/g, "_").replace(/'/g, "");
-          if (normalizedIdType.includes("passport")) {
-            mappedIdType = "passport";
-          } else if (normalizedIdType.includes("driver")) {
-            mappedIdType = "driver_license";
-          } else if (normalizedIdType.includes("national") || normalizedIdType.includes("id")) {
-            mappedIdType = "national_id";
-          }
-        }
-        const updatedData = {
-          ...formData,
-          firstName: ocrData?.firstName || "",
-          lastName: ocrData?.lastName || "",
-          middleName: ocrData?.middleName || "",
-          birthDate: formattedBirthDate || "",
-          idType: mappedIdType || ""
-        };
-        updateFormData(updatedData);
-      } catch (e) {
-        console.error("Failed to parse OCR value:", e);
-        localStorage.removeItem("ocrResult");
-      }
-    }
-  }, []);
+    if (markOcrApplied("personal")) onUpdate?.(formData);
+  }, [formData, onUpdate]);
   return /* @__PURE__ */ jsxs2(
     Grid,
     {
@@ -849,22 +854,45 @@ var cityOptions = [
   "Bongao",
   "Ipil"
 ].map((city) => ({ label: city, value: city }));
-var districtOptions = cityOptions;
-var barangayOptions = cityOptions;
 var provinceCollection = createListCollection2({ items: provinceOptions });
 var cityCollection = createListCollection2({ items: cityOptions });
-var districtCollection = createListCollection2({ items: districtOptions });
-var barangayCollection = createListCollection2({ items: barangayOptions });
+var normalizePlace = (value) => value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/^city of\s+/, "").replace(/\s+city$/, "").replace(/[^a-z0-9]/g, "");
+var matchOption = (candidates, options) => {
+  for (const candidate of candidates ?? []) {
+    const key = normalizePlace(candidate);
+    const match = options.find(
+      (option) => normalizePlace(option.value) === key
+    );
+    if (match) return match.value;
+  }
+  return "";
+};
 var LifePlanApplication2 = ({
-  onAddressUpdate
+  onAddressUpdate,
+  parseAddress
 }) => {
-  const OCRValue = typeof window === "undefined" ? null : localStorage.getItem("ocrResult");
-  const [lot, setLot] = useState3("123");
-  const [street, setStreet] = useState3("Mabini Street");
-  const [city, setCity] = useState3("Makati");
-  const [province, setProvince] = useState3("Metro Manila");
-  const [district, setDistrict] = useState3("Taguig");
-  const [barangay, setBarangay] = useState3("San Juan");
+  const [lot, setLot] = useState3("");
+  const [street, setStreet] = useState3("");
+  const [city, setCity] = useState3("");
+  const [province, setProvince] = useState3("");
+  const [district, setDistrict] = useState3("");
+  const [barangay, setBarangay] = useState3("");
+  useEffect2(() => {
+    if (!parseAddress) return;
+    const ocr = readOcrResult("address");
+    if (!ocr?.addressLine) return;
+    markOcrApplied("address");
+    parseAddress(ocr.addressLine).then((result) => {
+      setLot(result.lot ?? "");
+      setStreet(result.street ?? "");
+      setProvince(matchOption(result.provinceCandidates, provinceOptions));
+      setCity(matchOption(result.cityCandidates, cityOptions));
+      setDistrict(result.district ?? "");
+      setBarangay(result.barangay ?? "");
+    }).catch((error) => {
+      console.error("Error parsing address:", error);
+    });
+  }, [parseAddress]);
   useEffect2(() => {
     onAddressUpdate?.({
       lot,
@@ -920,44 +948,22 @@ var LifePlanApplication2 = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx3(Field3.Root, { children: /* @__PURE__ */ jsxs3(
-          Select2.Root,
+        /* @__PURE__ */ jsx3(Field3.Root, { children: /* @__PURE__ */ jsx3(
+          FloatingLabelInput,
           {
-            value: [district],
-            onValueChange: (e) => setDistrict(e.value[0] ?? ""),
-            collection: districtCollection,
-            width: "100%",
-            children: [
-              /* @__PURE__ */ jsx3(Select2.HiddenSelect, {}),
-              /* @__PURE__ */ jsxs3(Select2.Control, { children: [
-                /* @__PURE__ */ jsx3(Select2.Trigger, { children: /* @__PURE__ */ jsx3(Select2.ValueText, { placeholder: "Select District" }) }),
-                /* @__PURE__ */ jsx3(Select2.IndicatorGroup, { children: /* @__PURE__ */ jsx3(Select2.Indicator, {}) })
-              ] }),
-              /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(Select2.Positioner, { children: /* @__PURE__ */ jsx3(Select2.Content, { children: districtOptions.map((item) => /* @__PURE__ */ jsxs3(Select2.Item, { item, children: [
-                item.label,
-                /* @__PURE__ */ jsx3(Select2.ItemIndicator, {})
-              ] }, item.value)) }) }) })
-            ]
+            id: "district",
+            label: "District",
+            value: district,
+            onChange: (e) => setDistrict(e.target.value)
           }
         ) }),
-        /* @__PURE__ */ jsx3(Field3.Root, { children: /* @__PURE__ */ jsxs3(
-          Select2.Root,
+        /* @__PURE__ */ jsx3(Field3.Root, { children: /* @__PURE__ */ jsx3(
+          FloatingLabelInput,
           {
-            value: [barangay],
-            onValueChange: (e) => setBarangay(e.value[0] ?? ""),
-            collection: barangayCollection,
-            width: "100%",
-            children: [
-              /* @__PURE__ */ jsx3(Select2.HiddenSelect, {}),
-              /* @__PURE__ */ jsxs3(Select2.Control, { children: [
-                /* @__PURE__ */ jsx3(Select2.Trigger, { children: /* @__PURE__ */ jsx3(Select2.ValueText, { placeholder: "Select Barangay" }) }),
-                /* @__PURE__ */ jsx3(Select2.IndicatorGroup, { children: /* @__PURE__ */ jsx3(Select2.Indicator, {}) })
-              ] }),
-              /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(Select2.Positioner, { children: /* @__PURE__ */ jsx3(Select2.Content, { children: barangayOptions.map((item) => /* @__PURE__ */ jsxs3(Select2.Item, { item, children: [
-                item.label,
-                /* @__PURE__ */ jsx3(Select2.ItemIndicator, {})
-              ] }, item.value)) }) }) })
-            ]
+            id: "barangay",
+            label: "Barangay",
+            value: barangay,
+            onChange: (e) => setBarangay(e.target.value)
           }
         ) }),
         /* @__PURE__ */ jsx3(Field3.Root, { children: /* @__PURE__ */ jsx3(
@@ -2261,7 +2267,8 @@ var isEmploymentComplete = (e) => !!e && [
 var LifePlanApplicationFormWrapper = ({
   openSection,
   openSectionKey,
-  onValidChange
+  onValidChange,
+  parseAddress
 }) => {
   const [applicationData, setApplicationData] = useState7(
     createEmptyApplicationData
@@ -2336,7 +2343,13 @@ var LifePlanApplicationFormWrapper = ({
       description: "Where you currently live",
       value: "address",
       complete: isAddressComplete(applicationData.address),
-      page: /* @__PURE__ */ jsx10(LifePlanApplication2_default, { onAddressUpdate: handleAddressUpdate })
+      page: /* @__PURE__ */ jsx10(
+        LifePlanApplication2_default,
+        {
+          onAddressUpdate: handleAddressUpdate,
+          ...parseAddress ? { parseAddress } : {}
+        }
+      )
     },
     {
       icon: IoIosInformationCircleOutline,
@@ -3091,6 +3104,9 @@ var createLifePlanSteps = (confirmationProps) => [
       if (confirmationProps?.onApplicationValidChange !== void 0) {
         applicationFormWrapperProps.onValidChange = confirmationProps.onApplicationValidChange;
       }
+      if (confirmationProps?.parseAddress !== void 0) {
+        applicationFormWrapperProps.parseAddress = confirmationProps.parseAddress;
+      }
       return /* @__PURE__ */ jsx14(LifePlanApplicationFormWrapper_default, { ...applicationFormWrapperProps });
     })()
   },
@@ -3474,10 +3490,20 @@ var horizontal_stepper_default = HorizontalStepper;
 
 // src/NewSaleForm/SharedLifePlanApplication.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
+var safeParse = (value) => {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+};
 var SharedLifePlanApplication = ({
   title = "Life Plan Application",
   description = "Please fill out the form below to apply for a life plan.",
-  onPaymentError
+  onPaymentError,
+  onCheckout,
+  parseAddress
 }) => {
   const [currentStep, setCurrentStep] = useState11(0);
   const [loading, setLoading] = useState11(false);
@@ -3490,6 +3516,7 @@ var SharedLifePlanApplication = ({
     ...applicationSection ? { applicationSection } : {},
     applicationSectionKey,
     onApplicationValidChange: setApplicationValid,
+    ...parseAddress ? { parseAddress } : {},
     onEdit: (section) => {
       setApplicationSection(section ?? "personal");
       setApplicationSectionKey((key) => key + 1);
@@ -3500,6 +3527,38 @@ var SharedLifePlanApplication = ({
   const handleCheckout = async () => {
     if (!allAgreementsAccepted) return;
     setLoading(true);
+    try {
+      if (!onCheckout) {
+        throw new Error("onCheckout prop is not provided");
+      }
+      const checkoutRaw = sessionStorage.getItem("CheckoutCart");
+      const cartRaw = sessionStorage.getItem("Cart");
+      const parsed = safeParse(checkoutRaw) ?? safeParse(cartRaw);
+      const items = Array.isArray(parsed) ? parsed : parsed ? [parsed] : [];
+      if (items.length === 0) {
+        throw new Error("No items to checkout");
+      }
+      const applicationData = loadApplicationDataFromLocalStorage() ?? createEmptyApplicationData();
+      const checkoutPayload = items.map((item) => ({
+        planDesc: item.planDesc,
+        mode: item.mode,
+        ipInstAmt: Number(item.price),
+        planTerm: item.planTerm,
+        quantity: item.quantity ?? 1
+      }));
+      const checkoutUrl = await onCheckout({
+        items: checkoutPayload,
+        application: applicationData
+      });
+      if (!checkoutUrl) throw new Error("Checkout URL not found");
+      window.location.href = checkoutUrl;
+    } catch (error) {
+      console.error(error);
+      onPaymentError?.(error);
+      alert("Failed to proceed to payment");
+    } finally {
+      setLoading(false);
+    }
   };
   return /* @__PURE__ */ jsx16(Box14, { w: "full", overflowX: "hidden", children: /* @__PURE__ */ jsx16(
     horizontal_stepper_default,
@@ -3517,8 +3576,8 @@ var SharedLifePlanApplication_default = SharedLifePlanApplication;
 
 // src/NewSaleForm/LifePlanApplicationStepWrapper.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-var LifePlanApplicationStepWrapper = () => {
-  return /* @__PURE__ */ jsx17(SharedLifePlanApplication_default, {});
+var LifePlanApplicationStepWrapper = (props) => {
+  return /* @__PURE__ */ jsx17(SharedLifePlanApplication_default, { ...props });
 };
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
 
@@ -5547,10 +5606,13 @@ export {
   LifePlanApplicationFormWrapper_default as LifePlanApplicationFormWrapper,
   LifePlanApplicationStepWrapper_default as LifePlanApplicationStepWrapper,
   NotifyInstall,
+  OCR_STORAGE_KEY,
   SharedLifePlanApplication_default as SharedLifePlanApplication,
   UserProfile_default as UserProfile,
   createEmptyApplicationData,
   loadApplicationDataFromLocalStorage,
+  markOcrApplied,
+  readOcrResult,
   saveApplicationDataToLocalStorage
 };
 //# sourceMappingURL=index.mjs.map