@splpi/estore-shared-components 7.0.3 → 7.0.5

package/dist/index.mjs

@@ -230,7 +230,7 @@ var STANDARD_ICON_BUTTON_STYLES = {
 var OCR_STORAGE_KEY = "ocrResult";
 var readStored = () => {
   try {
-    const raw = localStorage.getItem(OCR_STORAGE_KEY);
+    const raw = sessionStorage.getItem(OCR_STORAGE_KEY);
     return raw ? JSON.parse(raw) : null;
   } catch {
     return null;
@@ -247,7 +247,7 @@ var markOcrApplied = (section) => {
   const stored = readStored();
   if (!stored || stored.applied?.[section]) return false;
   try {
-    localStorage.setItem(
+    sessionStorage.setItem(
       OCR_STORAGE_KEY,
       JSON.stringify({ ...stored, applied: { ...stored.applied, [section]: true } })
     );
@@ -259,14 +259,14 @@ var markOcrApplied = (section) => {
 var saveOcrResult = (value) => {
   if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(OCR_STORAGE_KEY, JSON.stringify(value));
+    sessionStorage.setItem(OCR_STORAGE_KEY, JSON.stringify(value));
   } catch {
   }
 };
 var clearOcrResult = () => {
   if (typeof window === "undefined") return;
   try {
-    localStorage.removeItem(OCR_STORAGE_KEY);
+    sessionStorage.removeItem(OCR_STORAGE_KEY);
   } catch {
   }
 };
@@ -388,22 +388,22 @@ var LifePlanApplication1 = ({
   onUpdate
 }) => {
   const [formData, setFormData] = useState2(() => applyOcr({
-    firstName: initialData?.firstName ?? "Juan",
-    middleName: initialData?.middleName ?? "Santos",
-    lastName: initialData?.lastName ?? "Dela Cruz",
+    firstName: initialData?.firstName ?? "",
+    middleName: initialData?.middleName ?? "",
+    lastName: initialData?.lastName ?? "",
     suffix: initialData?.suffix ?? "",
-    birthDate: initialData?.birthDate ?? "1990-05-15",
-    idType: initialData?.idType ?? "national_id",
-    idNumber: initialData?.idNumber ?? "1234-5678-9012",
-    height: initialData?.height ?? 5.7,
-    weight: initialData?.weight ?? 154,
-    gender: initialData?.gender ?? "male",
-    civilStatus: initialData?.civilStatus ?? "married",
-    nationality: initialData?.nationality ?? "Filipino",
-    mobileNumber: initialData?.mobileNumber ?? "0917-123-4567",
-    emailAddress: initialData?.emailAddress ?? "juan.delacruz@example.com",
-    mailingAddress: initialData?.mailingAddress ?? "123 Mabini Street, Barangay San Antonio, Makati City",
-    landLineNumber: initialData?.landLineNumber ?? "02-8123-4567"
+    birthDate: initialData?.birthDate ?? "",
+    idType: initialData?.idType ?? "",
+    idNumber: initialData?.idNumber ?? "",
+    height: initialData?.height ?? 0,
+    weight: initialData?.weight ?? 0,
+    gender: initialData?.gender ?? "",
+    civilStatus: initialData?.civilStatus ?? "",
+    nationality: initialData?.nationality ?? "",
+    mobileNumber: initialData?.mobileNumber ?? "",
+    emailAddress: initialData?.emailAddress ?? "",
+    mailingAddress: initialData?.mailingAddress ?? "",
+    landLineNumber: initialData?.landLineNumber ?? ""
   }, readOcrResult("personal")));
   const updateFormData = (nextData) => {
     setFormData(nextData);
@@ -882,15 +882,16 @@ var matchOption = (candidates, options) => {
   return "";
 };
 var LifePlanApplication2 = ({
+  initialData,
   onAddressUpdate,
   parseAddress
 }) => {
-  const [lot, setLot] = useState3("");
-  const [street, setStreet] = useState3("");
-  const [city, setCity] = useState3("");
-  const [province, setProvince] = useState3("");
-  const [district, setDistrict] = useState3("");
-  const [barangay, setBarangay] = useState3("");
+  const [lot, setLot] = useState3(initialData?.lot ?? "");
+  const [street, setStreet] = useState3(initialData?.street ?? "");
+  const [city, setCity] = useState3(initialData?.city ?? "");
+  const [province, setProvince] = useState3(initialData?.province ?? "");
+  const [district, setDistrict] = useState3(initialData?.district ?? "");
+  const [barangay, setBarangay] = useState3(initialData?.barangay ?? "");
   useEffect2(() => {
     if (!parseAddress) return;
     const ocr = readOcrResult("address");
@@ -1013,13 +1014,13 @@ var LifePlanApplication3 = ({
   onUpdate
 }) => {
   const [formData, setFormData] = React.useState({
-    occupation: initialData?.occupation ?? "Software Engineer",
-    employerName: initialData?.employerName ?? "ABC Technologies Inc.",
-    employmentStatus: initialData?.employmentStatus ?? "Regular",
-    officeAddress: initialData?.officeAddress ?? "456 Ayala Avenue, Bel-Air, Makati City",
-    TIN: initialData?.TIN ?? "123-456-789-000",
-    SSS: initialData?.SSS ?? "34-1234567-8",
-    sourceOfIncome: initialData?.sourceOfIncome ?? "Salary"
+    occupation: initialData?.occupation ?? "",
+    employerName: initialData?.employerName ?? "",
+    employmentStatus: initialData?.employmentStatus ?? "",
+    officeAddress: initialData?.officeAddress ?? "",
+    TIN: initialData?.TIN ?? "",
+    SSS: initialData?.SSS ?? "",
+    sourceOfIncome: initialData?.sourceOfIncome ?? ""
   });
   const updateFormData = (nextData) => {
     setFormData(nextData);
@@ -1169,6 +1170,7 @@ var RowItem = ({
 
 // src/lib/applicationData.ts
 var LIFE_PLAN_APPLICATION_KEY = "LifePlanApplication";
+var APPLICATION_DATA_CHANGE_EVENT = "lifeplan-application:change";
 var createEmptyApplicationData = () => ({
   personalInfo: {
     firstName: "",
@@ -1213,19 +1215,57 @@ var createEmptyApplicationData = () => ({
     healthDeclaration4: false
   }
 });
-var loadApplicationDataFromLocalStorage = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+var getStorage = () => {
   if (typeof window === "undefined") return null;
   try {
-    const stored = window.localStorage.getItem(storageKey);
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+};
+var notifyChange = (storageKey) => {
+  window.dispatchEvent(
+    new CustomEvent(APPLICATION_DATA_CHANGE_EVENT, { detail: { storageKey } })
+  );
+};
+var loadApplicationData = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  const storage = getStorage();
+  if (!storage) return null;
+  try {
+    const stored = storage.getItem(storageKey);
     return stored ? JSON.parse(stored) : null;
   } catch {
     return null;
   }
 };
-var saveApplicationDataToLocalStorage = (data, storageKey = LIFE_PLAN_APPLICATION_KEY) => {
-  if (typeof window === "undefined") return;
-  window.localStorage.setItem(storageKey, JSON.stringify(data));
+var saveApplicationData = (data, storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  const storage = getStorage();
+  if (!storage) return;
+  try {
+    storage.setItem(storageKey, JSON.stringify(data));
+  } catch {
+    return;
+  }
+  notifyChange(storageKey);
+};
+var updateApplicationData = (patch, storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  const current = loadApplicationData(storageKey) ?? createEmptyApplicationData();
+  const next = { ...current, ...patch };
+  saveApplicationData(next, storageKey);
+  return next;
+};
+var clearApplicationData = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  const storage = getStorage();
+  if (!storage) return;
+  try {
+    storage.removeItem(storageKey);
+  } catch {
+    return;
+  }
+  notifyChange(storageKey);
 };
+var loadApplicationDataFromLocalStorage = loadApplicationData;
+var saveApplicationDataToLocalStorage = saveApplicationData;
 
 // src/NewSaleForm/beneficiary.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -1279,13 +1319,13 @@ var Beneficiary = ({ onUpdate }) => {
       contingent.length > 0 ? contingent[0] : void 0,
       allBeneficiaries
     );
-    const currentData = loadApplicationDataFromLocalStorage() ?? createEmptyApplicationData();
+    const currentData = loadApplicationData() ?? createEmptyApplicationData();
     const {
       principalBeneficiary: _oldPrincipal,
       contingentBeneficiary: _oldContingent,
       ...restData
     } = currentData;
-    saveApplicationDataToLocalStorage({
+    saveApplicationData({
       ...restData,
       beneficiaries: allBeneficiaries,
       ...principal[0] ? { principalBeneficiary: principal[0] } : {},
@@ -1294,7 +1334,7 @@ var Beneficiary = ({ onUpdate }) => {
   };
   useEffect3(() => {
     const timeoutId = window.setTimeout(() => {
-      const currentData = loadApplicationDataFromLocalStorage();
+      const currentData = loadApplicationData();
       if (!currentData) return;
       const storedBeneficiaries = currentData.beneficiaries ?? [];
       let principalFromStorage = storedBeneficiaries.filter(
@@ -1954,29 +1994,18 @@ var HealthDeclaration = () => {
     healthDeclaration3: false,
     healthDeclaration4: false
   });
+  const [hydrated, setHydrated] = useState5(false);
   useEffect4(() => {
-    let appData = loadApplicationDataFromLocalStorage();
-    if (!appData) {
-      appData = createEmptyApplicationData();
-      saveApplicationDataToLocalStorage(appData);
-    }
-    if (appData && appData.healthDeclaration) {
+    const appData = loadApplicationData();
+    if (appData?.healthDeclaration) {
       setHealthDeclarationValues(appData.healthDeclaration);
     }
+    setHydrated(true);
   }, []);
   useEffect4(() => {
-    return () => {
-      const appData = loadApplicationDataFromLocalStorage();
-      if (appData) {
-        appData.healthDeclaration = healthDeclarationValues;
-        saveApplicationDataToLocalStorage(appData);
-        console.log(
-          "Health Declaration saved to localStorage",
-          healthDeclarationValues
-        );
-      }
-    };
-  }, [healthDeclarationValues]);
+    if (!hydrated) return;
+    updateApplicationData({ healthDeclaration: healthDeclarationValues });
+  }, [healthDeclarationValues, hydrated]);
   const items = [
     {
       value: "first-item",
@@ -2292,7 +2321,7 @@ var LifePlanApplicationFormWrapper = ({
   const [openSections, setOpenSections] = useState7(["personal"]);
   useEffect5(() => {
     const timeoutId = window.setTimeout(() => {
-      const saved = loadApplicationDataFromLocalStorage();
+      const saved = loadApplicationData();
       if (saved) setApplicationData(saved);
       setHydrated(true);
     }, 0);
@@ -2300,7 +2329,11 @@ var LifePlanApplicationFormWrapper = ({
   }, []);
   useEffect5(() => {
     if (!hydrated) return;
-    saveApplicationDataToLocalStorage(applicationData);
+    updateApplicationData({
+      personalInfo: applicationData.personalInfo,
+      address: applicationData.address,
+      employment: applicationData.employment
+    });
   }, [applicationData, hydrated]);
   const isComplete = isPersonalComplete(applicationData.personalInfo) && isAddressComplete(applicationData.address);
   useEffect5(() => {
@@ -2361,6 +2394,7 @@ var LifePlanApplicationFormWrapper = ({
       page: /* @__PURE__ */ jsx10(
         LifePlanApplication2_default,
         {
+          initialData: applicationData.address,
           onAddressUpdate: handleAddressUpdate,
           ...parseAddress ? { parseAddress } : {}
         }
@@ -2388,6 +2422,7 @@ var LifePlanApplicationFormWrapper = ({
       (prev) => prev.includes(value) ? prev.filter((sectionValue) => sectionValue !== value) : [...prev, value]
     );
   };
+  if (!hydrated) return null;
   return /* @__PURE__ */ jsxs10(Box9, { w: "full", children: [
     /* @__PURE__ */ jsx10(
       Flex4,
@@ -2438,7 +2473,7 @@ var LifePlanApplicationFormWrapper_default = LifePlanApplicationFormWrapper;
 
 // src/NewSaleForm/SharedLifePlanApplication.tsx
 import { Box as Box14 } from "@chakra-ui/react";
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 
 // src/NewSaleForm/data/lifePlanSteps.tsx
 import { FaClipboardCheck, FaFileSignature, FaRegUser as FaRegUser3 } from "react-icons/fa";
@@ -2465,7 +2500,7 @@ import { FaRegAddressCard as FaRegAddressCard2 } from "react-icons/fa6";
 import { FaRegUser as FaRegUser2 } from "react-icons/fa";
 import { IoIosInformationCircleOutline as IoIosInformationCircleOutline2 } from "react-icons/io";
 import { FiEdit2 } from "react-icons/fi";
-import { useEffect as useEffect6, useState as useState9 } from "react";
+import { useEffect as useEffect7, useState as useState10 } from "react";
 
 // src/NewSaleForm/data/checkBoxList.tsx
 import { Box as Box10, Separator as Separator2 } from "@chakra-ui/react";
@@ -2568,9 +2603,22 @@ var checkboxList = [
   }
 ];
 
+// src/hooks/useApplicationData.ts
+import { useEffect as useEffect6, useState as useState8 } from "react";
+function useApplicationData(storageKey = LIFE_PLAN_APPLICATION_KEY) {
+  const [data, setData] = useState8(null);
+  useEffect6(() => {
+    const refresh = () => setData(loadApplicationData(storageKey));
+    refresh();
+    window.addEventListener(APPLICATION_DATA_CHANGE_EVENT, refresh);
+    return () => window.removeEventListener(APPLICATION_DATA_CHANGE_EVENT, refresh);
+  }, [storageKey]);
+  return data;
+}
+
 // src/NewSaleForm/ui/info-card-accordion.tsx
 import { Box as Box11, Button as Button2, Flex as Flex5, Icon as Icon2, Text as Text6 } from "@chakra-ui/react";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { LuChevronDown as LuChevronDown2, LuChevronUp as LuChevronUp2, LuHash as LuHash2, LuPencil as LuPencil2 } from "react-icons/lu";
 import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function InfoCardAccordion({
@@ -2584,7 +2632,7 @@ function InfoCardAccordion({
   onToggle,
   onEdit
 }) {
-  const [internalOpen, setInternalOpen] = useState8(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState9(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
@@ -2697,6 +2745,12 @@ var modeLabel = (mode) => {
       return mode || "-";
   }
 };
+var display = (value) => {
+  if (value === void 0 || value === null) return void 0;
+  if (typeof value === "number") return value > 0 ? String(value) : void 0;
+  return value.trim() !== "" ? value : void 0;
+};
+var classLabel = (beneficiaryClass) => beneficiaryClass === "contingent" ? "Contingent" : "Principal";
 var ApplicationAccordion = ({
   items,
   onEdit
@@ -2768,23 +2822,18 @@ var SectionCard = ({
   }
 );
 var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
-  const [cartItems, setCartItems] = useState9(null);
-  const [lifePlanApplication, setLifePlanApplication] = useState9(null);
-  const [openDialog, setOpenDialog] = useState9(false);
-  const [pendingCheck, setPendingCheck] = useState9(null);
-  const [acceptedAgreements, setAcceptedAgreements] = useState9(
+  const [cartItems, setCartItems] = useState10(null);
+  const lifePlanApplication = useApplicationData();
+  const [openDialog, setOpenDialog] = useState10(false);
+  const [pendingCheck, setPendingCheck] = useState10(null);
+  const [acceptedAgreements, setAcceptedAgreements] = useState10(
     () => checkboxList.map(() => false)
   );
-  useEffect6(() => {
+  useEffect7(() => {
     const loadStoredData = () => {
       try {
         const checkoutStored = sessionStorage.getItem("CheckoutCart");
         const cartStored = sessionStorage.getItem("Cart");
-        const lifePlanApplicationStored = localStorage.getItem(
-          "LifePlanApplication"
-        );
-        const parsedApplicationData = lifePlanApplicationStored ? JSON.parse(lifePlanApplicationStored) : null;
-        setLifePlanApplication(parsedApplicationData);
         if (checkoutStored) {
           const parsedCheckout = JSON.parse(checkoutStored);
           setCartItems(
@@ -2810,23 +2859,18 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
   const acceptedCount = acceptedAgreements.filter(Boolean).length;
   const allAccepted = checkboxList.length > 0 && acceptedCount === checkboxList.length;
   const pendingAgreement = pendingCheck !== null ? checkboxList[pendingCheck] : null;
-  useEffect6(() => {
+  useEffect7(() => {
     onAllAcceptedChange?.(allAccepted);
   }, [allAccepted, onAllAcceptedChange]);
-  const beneficiaries = [
-    {
-      name: "John Doe",
-      relationship: "Relative",
-      dob: "1990-11-02",
-      address: "Sample Street, Sample Barangay, Sample City"
-    },
-    {
-      name: "Jane Smith",
-      relationship: "Relative",
-      dob: "1992-04-15",
-      address: "Sample Avenue, Sample District, Sample City"
-    }
-  ];
+  const beneficiaries = (lifePlanApplication?.beneficiaries ?? []).map(
+    (beneficiary) => ({
+      name: [beneficiary.firstName, beneficiary.middleInitial, beneficiary.lastName].map((part) => part?.trim()).filter(Boolean).join(" "),
+      beneficiaryClass: classLabel(beneficiary.beneficiaryClass),
+      relationship: beneficiary.relationship,
+      dob: beneficiary.birthDate,
+      address: beneficiary.address
+    })
+  );
   const confirmAgreement = () => {
     if (pendingCheck === null) return;
     setAcceptedAgreements((prev) => {
@@ -2845,75 +2889,54 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
       value: selectedPlan ? `\u20B1 ${selectedPlan.total}` : void 0
     }
   ];
+  const personal = lifePlanApplication?.personalInfo;
+  const address = lifePlanApplication?.address;
+  const employment = lifePlanApplication?.employment;
   const personalRows = [
-    { label: "Uploaded ID", value: lifePlanApplication?.personalInfo.idType },
-    { label: "Last Name", value: lifePlanApplication?.personalInfo.lastName },
-    { label: "First Name", value: lifePlanApplication?.personalInfo.firstName },
-    {
-      label: "Middle Name",
-      value: lifePlanApplication?.personalInfo.middleName
-    },
-    { label: "Suffix", value: lifePlanApplication?.personalInfo.suffix },
-    {
-      label: "Date of Birth",
-      value: lifePlanApplication?.personalInfo.birthDate
-    },
-    { label: "Gender", value: lifePlanApplication?.personalInfo.gender },
-    {
-      label: "Contact Number",
-      value: lifePlanApplication?.personalInfo.mobileNumber
-    },
-    { label: "Email", value: lifePlanApplication?.personalInfo.emailAddress },
-    {
-      label: "Landline Number",
-      value: lifePlanApplication?.personalInfo.landLineNumber
-    },
-    {
-      label: "Mailing Address",
-      value: lifePlanApplication?.personalInfo.mailingAddress
-    },
-    {
-      label: "Civil Status",
-      value: lifePlanApplication?.personalInfo.civilStatus
-    }
+    { label: "Uploaded ID", value: display(personal?.idType) },
+    { label: "ID Number", value: display(personal?.idNumber) },
+    { label: "Last Name", value: display(personal?.lastName) },
+    { label: "First Name", value: display(personal?.firstName) },
+    { label: "Middle Name", value: display(personal?.middleName) },
+    { label: "Suffix", value: display(personal?.suffix) },
+    { label: "Date of Birth", value: display(personal?.birthDate) },
+    { label: "Gender", value: display(personal?.gender) },
+    { label: "Civil Status", value: display(personal?.civilStatus) },
+    { label: "Nationality", value: display(personal?.nationality) },
+    { label: "Height", value: display(personal?.height) },
+    { label: "Weight", value: display(personal?.weight) },
+    { label: "Contact Number", value: display(personal?.mobileNumber) },
+    { label: "Email", value: display(personal?.emailAddress) },
+    { label: "Landline Number", value: display(personal?.landLineNumber) },
+    { label: "Mailing Address", value: display(personal?.mailingAddress) }
   ];
   const addressRows = [
-    { label: "Lot #", value: lifePlanApplication?.address.lot },
-    { label: "Street", value: lifePlanApplication?.address.street },
-    { label: "Barangay", value: lifePlanApplication?.address.barangay },
-    { label: "City", value: lifePlanApplication?.address.city },
-    { label: "Province", value: lifePlanApplication?.address.province }
+    { label: "Lot #", value: display(address?.lot) },
+    { label: "Street", value: display(address?.street) },
+    { label: "Barangay", value: display(address?.barangay) },
+    { label: "District", value: display(address?.district) },
+    { label: "City", value: display(address?.city) },
+    { label: "Province", value: display(address?.province) }
   ];
   const employmentRows = [
-    { label: "Occupation", value: lifePlanApplication?.employment.occupation },
-    {
-      label: "Employer Name",
-      value: lifePlanApplication?.employment.employerName
-    },
-    {
-      label: "Employment Status",
-      value: lifePlanApplication?.employment.employmentStatus
-    },
-    {
-      label: "Office Address",
-      value: lifePlanApplication?.employment.officeAddress
-    },
-    { label: "TIN", value: lifePlanApplication?.employment.TIN },
-    { label: "SSS/GSIS", value: lifePlanApplication?.employment.SSS },
-    {
-      label: "Source of Income",
-      value: lifePlanApplication?.employment.sourceOfIncome
-    }
+    { label: "Occupation", value: display(employment?.occupation) },
+    { label: "Employer Name", value: display(employment?.employerName) },
+    { label: "Employment Status", value: display(employment?.employmentStatus) },
+    { label: "Office Address", value: display(employment?.officeAddress) },
+    { label: "TIN", value: display(employment?.TIN) },
+    { label: "SSS/GSIS", value: display(employment?.SSS) },
+    { label: "Source of Income", value: display(employment?.sourceOfIncome) }
   ];
-  const beneficiaryItems = /* @__PURE__ */ jsx13(VStack6, { align: "stretch", gap: 4, children: beneficiaries.map((beneficiary, index) => /* @__PURE__ */ jsxs13(Box12, { children: [
-    /* @__PURE__ */ jsx13(Text7, { fontWeight: "semibold", fontSize: "sm", mb: 1, children: beneficiary.name }),
+  const beneficiaryItems = beneficiaries.length === 0 ? /* @__PURE__ */ jsx13(Text7, { fontSize: "sm", color: "gray.500", children: "No beneficiaries added." }) : /* @__PURE__ */ jsx13(VStack6, { align: "stretch", gap: 4, children: beneficiaries.map((beneficiary, index) => /* @__PURE__ */ jsxs13(Box12, { children: [
+    /* @__PURE__ */ jsx13(Text7, { fontWeight: "semibold", fontSize: "sm", mb: 1, children: display(beneficiary.name) ?? "-" }),
     /* @__PURE__ */ jsx13(
       ReviewRows2,
       {
         rows: [
-          { label: "Relationship", value: beneficiary.relationship },
-          { label: "Date of Birth", value: beneficiary.dob },
-          { label: "Address", value: beneficiary.address }
+          { label: "Type", value: beneficiary.beneficiaryClass },
+          { label: "Relationship", value: display(beneficiary.relationship) },
+          { label: "Date of Birth", value: display(beneficiary.dob) },
+          { label: "Address", value: display(beneficiary.address) }
         ]
       }
     )
@@ -3166,7 +3189,7 @@ var createLifePlanSteps = (confirmationProps) => [
 ];
 
 // src/NewSaleForm/ui/horizontal-stepper.tsx
-import { useRef, useState as useState10 } from "react";
+import { useRef, useState as useState11 } from "react";
 import { Box as Box13, ButtonGroup, Flex as Flex7, Steps, Text as Text8 } from "@chakra-ui/react";
 import { PrimaryMdButton as PrimaryMdButton2, SecondaryMdButton as SecondaryMdButton2 } from "st-peter-ui";
 import { LuChevronLeft, LuChevronRight, LuCheck as LuCheck2 } from "react-icons/lu";
@@ -3185,7 +3208,7 @@ var HorizontalStepper = ({
   nextDisabled,
   submitButtonText = "Proceed To Payment"
 }) => {
-  const [localActiveStep, setLocalActiveStep] = useState10(0);
+  const [localActiveStep, setLocalActiveStep] = useState11(0);
   const activeStep = controlledActiveStep !== void 0 ? controlledActiveStep : localActiveStep;
   const formTopRef = useRef(null);
   const isCompact = steps.length < 3;
@@ -3503,8 +3526,131 @@ var HorizontalStepper = ({
 };
 var horizontal_stepper_default = HorizontalStepper;
 
+// src/services/MainAPIClient.ts
+import axios from "axios";
+var APIError = class extends Error {
+  status;
+  constructor(message, status) {
+    super(message);
+    this.name = "APIError";
+    this.status = status;
+  }
+};
+var readEnvBaseUrl = () => {
+  try {
+    return process.env.NEXT_PUBLIC_API_URL;
+  } catch {
+    return void 0;
+  }
+};
+var apiClient = axios.create({
+  baseURL: readEnvBaseUrl() ?? "",
+  timeout: 15e3,
+  headers: {
+    "Content-Type": "application/json"
+  }
+});
+var configureApi = (options) => {
+  apiClient.defaults.baseURL = options.baseUrl;
+};
+apiClient.interceptors.request.use((config) => {
+  if (!config.baseURL) {
+    throw new APIError(
+      "API URL is not set. Add NEXT_PUBLIC_API_URL to .env.local or call configureApi({ baseUrl })."
+    );
+  }
+  return config;
+});
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error instanceof APIError) return Promise.reject(error);
+    const status = error.response?.status;
+    const message = error.response?.data?.message || error.message || "Something went wrong";
+    console.error(`[API] ${error.config?.method?.toUpperCase()} ${error.config?.url} failed (${status ?? "no response"}):`, message);
+    return Promise.reject(new APIError(message, status));
+  }
+);
+var api = {
+  get: (url, params, config) => apiClient.get(url, { ...config, params }).then((res) => res.data),
+  post: (url, payload, config) => apiClient.post(url, payload, config).then((res) => res.data),
+  put: (url, payload, config) => apiClient.put(url, payload, config).then((res) => res.data),
+  delete: (url, config) => apiClient.delete(url, config).then((res) => res.data)
+};
+
+// src/services/GeoApifyService.ts
+var ENDPOINTS = {
+  parse: "/Address/Parse"
+};
+var GeoApifyService = {
+  async parseAddress(text) {
+    return api.get(ENDPOINTS.parse, {
+      text: text.replace(/\s+/g, " ").trim()
+    });
+  }
+};
+
+// src/services/PayMongoService.ts
+var ENDPOINTS2 = {
+  checkout: "/PayMongoAPI/CreateCheckout",
+  newSalesCheckout: "/PayMongoAPI/CreateNewSalesCheckout"
+};
+var toWholeNumber = (value) => {
+  const n = Number(value);
+  return value !== void 0 && value !== "" && Number.isFinite(n) ? Math.trunc(n) : void 0;
+};
+var toApiItem = (item) => ({
+  planDesc: item.planDesc,
+  ipInstAmt: Number(item.ipInstAmt),
+  quantity: toWholeNumber(item.quantity) ?? 1,
+  planTerm: toWholeNumber(item.planTerm),
+  productCode: item.productCode,
+  contractPrice: item.contractPrice
+});
+var PayMongoService = {
+  async createCheckout(items) {
+    const body = { items: items.map(toApiItem) };
+    console.log("PayMongoService: body =", body);
+    console.log("PayMongoService: ENDPOINTS.checkout =", ENDPOINTS2.checkout);
+    const res = await api.post(ENDPOINTS2.checkout, body);
+    return { checkoutUrl: res?.checkoutUrl };
+  },
+  async createNewSalesCheckout(request) {
+    const body = {
+      items: request.items.map((item) => ({
+        planDesc: item.planDesc,
+        mode: item.mode,
+        ipInstAmt: Number(item.ipInstAmt),
+        quantity: toWholeNumber(item.quantity) ?? 1,
+        planTerm: toWholeNumber(item.planTerm)
+      })),
+      application: request.application,
+      accountNo: request.accountNo ?? "",
+      empCode: request.empCode ?? ""
+    };
+    const res = await api.post(
+      ENDPOINTS2.newSalesCheckout,
+      body,
+      { timeout: 6e4 }
+    );
+    return { checkoutUrl: res?.checkoutUrl, requestId: res?.requestId };
+  }
+};
+
 // src/NewSaleForm/SharedLifePlanApplication.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
+var TEST_ACCOUNT_NO = "SPLPI-22-000021";
+var defaultCheckout = async ({
+  items,
+  application
+}) => {
+  const { checkoutUrl } = await PayMongoService.createNewSalesCheckout({
+    items,
+    application,
+    accountNo: TEST_ACCOUNT_NO
+  });
+  return checkoutUrl;
+};
 var safeParse = (value) => {
   if (!value) return null;
   try {
@@ -3517,21 +3663,21 @@ var SharedLifePlanApplication = ({
   title = "Life Plan Application",
   description = "Please fill out the form below to apply for a life plan.",
   onPaymentError,
-  onCheckout,
-  parseAddress
+  onCheckout = defaultCheckout,
+  parseAddress = GeoApifyService.parseAddress
 }) => {
-  const [currentStep, setCurrentStep] = useState11(0);
-  const [loading, setLoading] = useState11(false);
-  const [allAgreementsAccepted, setAllAgreementsAccepted] = useState11(false);
-  const [applicationSection, setApplicationSection] = useState11();
-  const [applicationSectionKey, setApplicationSectionKey] = useState11(0);
-  const [applicationValid, setApplicationValid] = useState11(false);
+  const [currentStep, setCurrentStep] = useState12(0);
+  const [loading, setLoading] = useState12(false);
+  const [allAgreementsAccepted, setAllAgreementsAccepted] = useState12(false);
+  const [applicationSection, setApplicationSection] = useState12();
+  const [applicationSectionKey, setApplicationSectionKey] = useState12(0);
+  const [applicationValid, setApplicationValid] = useState12(false);
   const steps = createLifePlanSteps({
     onAllAcceptedChange: setAllAgreementsAccepted,
     ...applicationSection ? { applicationSection } : {},
     applicationSectionKey,
     onApplicationValidChange: setApplicationValid,
-    ...parseAddress ? { parseAddress } : {},
+    parseAddress,
     onEdit: (section) => {
       setApplicationSection(section ?? "personal");
       setApplicationSectionKey((key) => key + 1);
@@ -3543,9 +3689,6 @@ var SharedLifePlanApplication = ({
     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);
@@ -3553,7 +3696,7 @@ var SharedLifePlanApplication = ({
       if (items.length === 0) {
         throw new Error("No items to checkout");
       }
-      const applicationData = loadApplicationDataFromLocalStorage() ?? createEmptyApplicationData();
+      const applicationData = loadApplicationData() ?? createEmptyApplicationData();
       const checkoutPayload = items.map((item) => ({
         planDesc: item.planDesc,
         mode: item.mode,
@@ -3597,11 +3740,11 @@ var LifePlanApplicationStepWrapper = (props) => {
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
 
 // src/hooks/useOcr.ts
-import { useCallback as useCallback2, useState as useState12 } from "react";
+import { useCallback as useCallback2, useState as useState13 } from "react";
 function useOcr(scanIdFn) {
-  const [data, setData] = useState12(null);
-  const [loading, setLoading] = useState12(false);
-  const [error, setError] = useState12(null);
+  const [data, setData] = useState13(null);
+  const [loading, setLoading] = useState13(false);
+  const [error, setError] = useState13(null);
   const scanId = useCallback2(
     async (file) => {
       setLoading(true);
@@ -3642,7 +3785,7 @@ import {
   CloseButton as CloseButton3,
   Input as Input4
 } from "@chakra-ui/react";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { LuIdCard, LuSignature } from "react-icons/lu";
 
 // src/GetStarted/Container.tsx
@@ -3665,7 +3808,7 @@ var Container = ({ children }) => {
 var Container_default = Container;
 
 // src/GetStarted/DocumentUploadCard.tsx
-import { useEffect as useEffect7, useRef as useRef2, useState as useState13 } from "react";
+import { useEffect as useEffect8, useRef as useRef2, useState as useState14 } from "react";
 import { Box as Box16, Flex as Flex8, Spinner, Text as Text9, useBreakpointValue as useBreakpointValue2 } from "@chakra-ui/react";
 import {
   LuUpload,
@@ -3704,7 +3847,7 @@ var validate = (file, config) => {
   return null;
 };
 var useDocumentSlot = (config, onProcess, notifyError = defaultNotifyError) => {
-  const [slot, setSlot] = useState13({ status: "idle" });
+  const [slot, setSlot] = useState14({ status: "idle" });
   const timers = useRef2([]);
   const runId = useRef2(0);
   const clearTimers = () => {
@@ -3949,12 +4092,12 @@ function DocumentUploadCard({
   const notifyError = onError ?? defaultNotifyError;
   const { slot, uploadDocument, retryDocument, removeDocument } = useDocumentSlot(config, onProcess, notifyError);
   const status = slot?.status ?? "idle";
-  useEffect7(() => {
+  useEffect8(() => {
     onStatusChange?.(status);
   }, [status, onStatusChange]);
   const browseRef = useRef2(null);
   const cameraRef = useRef2(null);
-  const [dragging, setDragging] = useState13(false);
+  const [dragging, setDragging] = useState14(false);
   const Icon6 = config.icon;
   const isPdf = slot?.fileType === "application/pdf";
   const handleFiles = (files) => {
@@ -4270,6 +4413,96 @@ function DocumentUploadCard({
   );
 }
 
+// src/services/OcrService.ts
+var ENDPOINTS3 = {
+  scan: "/Ocr/Scan"
+};
+var isObject = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+var readField = (source, keys) => {
+  if (!source) return "";
+  for (const key of keys) {
+    const match = Object.keys(source).find(
+      (k) => k.toLowerCase() === key.toLowerCase()
+    );
+    const value = match ? source[match] : void 0;
+    if (typeof value === "string" && value.trim()) return value.trim();
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+};
+var pad = (value) => String(value).padStart(2, "0");
+var toIsoDate = (value) => {
+  if (!value) return "";
+  if (/^\d{4}-\d{2}-\d{2}/.test(value)) return value.slice(0, 10);
+  const parts = value.split(/[/-]/).map((part) => part.trim());
+  if (parts.length === 3 && parts.every(Boolean)) {
+    const [first = "", second = "", third = ""] = parts;
+    if (first.length === 4) return `${first}-${pad(second)}-${pad(third)}`;
+    if (third.length === 4) return `${third}-${pad(first)}-${pad(second)}`;
+  }
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return "";
+  return `${parsed.getFullYear()}-${pad(parsed.getMonth() + 1)}-${pad(parsed.getDate())}`;
+};
+var toIdType = (value) => {
+  const text = value.toLowerCase();
+  if (!text) return "";
+  if (text.includes("passport")) return "passport";
+  if (text.includes("driver")) return "driver_license";
+  if (text.includes("national") || text.includes("id")) return "national_id";
+  return "";
+};
+var toOcrValue = (body) => {
+  const root = isObject(body) ? body : void 0;
+  const nested = root ? Object.entries(root).find(
+    ([key, value]) => key.toLowerCase() === "response" && isObject(value)
+  )?.[1] : void 0;
+  const source = isObject(nested) ? nested : root;
+  return {
+    firstName: readField(source, ["firstName"]),
+    middleName: readField(source, ["middleName"]),
+    lastName: readField(source, ["lastName"]),
+    birthDate: toIsoDate(readField(source, ["birthDate", "dateOfBirth"])),
+    idType: toIdType(readField(source, ["idType"])),
+    idNumber: readField(source, ["idNumber", "idNo"]),
+    addressLine: readField(source, ["addressLine", "address", "completeAddress"])
+  };
+};
+var toFormData = (docType, source) => {
+  const formData = new FormData();
+  formData.append("DocType", docType);
+  if (typeof source === "string") {
+    formData.append("OCRType", "URL");
+    formData.append("ImageUrl", source.trim());
+  } else {
+    formData.append("OCRType", "File");
+    formData.append("File", source);
+  }
+  return formData;
+};
+var OcrService = {
+  async scan(docType, source) {
+    return api.post(ENDPOINTS3.scan, toFormData(docType, source), {
+      headers: { "Content-Type": "multipart/form-data" },
+      timeout: 9e4
+    });
+  },
+  async scanId(source) {
+    const body = await OcrService.scan("ID", source);
+    const result = toOcrValue(body);
+    if (!result.firstName && !result.lastName && !result.idNumber) {
+      const description = isObject(body) ? readField(body, ["description", "message"]) : "";
+      throw new APIError(
+        description || "We couldn't read your ID. Please upload a clearer photo."
+      );
+    }
+    return result;
+  },
+  async scanLpa(source) {
+    return OcrService.scan("LPA", source);
+  }
+};
+
 // src/GetStarted/GetStarted.tsx
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultNotify = (type, message) => {
@@ -4299,13 +4532,13 @@ var SIGNATURE_CONFIG = {
   icon: LuSignature
 };
 var GetStarted = ({
-  scanId: scanIdFn,
+  scanId: scanIdFn = OcrService.scanId,
   onContinue,
   notify = defaultNotify
 }) => {
-  const [uploadDialogOpen, setUploadDialogOpen] = useState14(false);
-  const [referralDialogOpen, setReferralDialogOpen] = useState14(false);
-  const [governmentIdStatus, setGovernmentIdStatus] = useState14("idle");
+  const [uploadDialogOpen, setUploadDialogOpen] = useState15(false);
+  const [referralDialogOpen, setReferralDialogOpen] = useState15(false);
+  const [governmentIdStatus, setGovernmentIdStatus] = useState15("idle");
   const { scanId } = useOcr(scanIdFn);
   return /* @__PURE__ */ jsx20(Container_default, { children: /* @__PURE__ */ jsxs16(
     Box17,
@@ -4751,18 +4984,18 @@ var BottomQuickActions = ({
 var BottomQuickActions_default = BottomQuickActions;
 
 // src/Generic/NotifyInstall.tsx
-import { useEffect as useEffect9, useState as useState16 } from "react";
+import { useEffect as useEffect10, useState as useState17 } from "react";
 import { Button as Button4, Flex as Flex10, HStack as HStack5, Icon as Icon5, Text as Text11, VStack as VStack9 } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "motion/react";
 import { FiDownload, FiPlusSquare, FiShare, FiX } from "react-icons/fi";
 
 // src/hooks/useNotifyInstall.ts
-import { useEffect as useEffect8, useState as useState15 } from "react";
+import { useEffect as useEffect9, useState as useState16 } from "react";
 function useNotifyInstall() {
-  const [isInstalled, setIsInstalled] = useState15(false);
-  const [isMobile, setIsMobile] = useState15(false);
-  const [installPrompt, setInstallPrompt] = useState15(null);
-  useEffect8(() => {
+  const [isInstalled, setIsInstalled] = useState16(false);
+  const [isMobile, setIsMobile] = useState16(false);
+  const [installPrompt, setInstallPrompt] = useState16(null);
+  useEffect9(() => {
     const mobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
     setIsMobile(mobile);
     const installed = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;
@@ -4805,8 +5038,8 @@ function NotifyInstall({
   appName
 }) {
   const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
-  const [isDismissed, setIsDismissed] = useState16(true);
-  useEffect9(() => {
+  const [isDismissed, setIsDismissed] = useState17(true);
+  useEffect10(() => {
     if (localStorage.getItem(DISMISSED_KEY) !== "true") {
       setIsDismissed(false);
     }
@@ -4963,7 +5196,7 @@ function NotifyInstall({
 }
 
 // src/UserProfile/UserProfile.tsx
-import { useEffect as useEffect10, useMemo, useState as useState17 } from "react";
+import { useEffect as useEffect11, useMemo, useState as useState18 } from "react";
 import {
   Avatar,
   Badge as Badge2,
@@ -5319,28 +5552,28 @@ function ReusableProfile({
   onTwoFactorChange,
   onToast = noopToast
 }) {
-  const [profileView, setProfileView] = useState17("main");
-  const [fallbackColorMode, setFallbackColorMode] = useState17("light");
+  const [profileView, setProfileView] = useState18("main");
+  const [fallbackColorMode, setFallbackColorMode] = useState18("light");
   const colorMode = controlledColorMode ?? fallbackColorMode;
-  const [fontSize, setFontSizeLocal] = useState17("md");
-  const [quickNavHrefs, setQuickNavHrefs] = useState17(initialQuickNavHrefs);
-  const [replacingIdx, setReplacingIdx] = useState17(null);
-  const [editName, setEditName] = useState17(user.displayName);
-  const [editLoading, setEditLoading] = useState17(false);
-  const [currentPw, setCurrentPw] = useState17("");
-  const [newPw, setNewPw] = useState17("");
-  const [confirmPw, setConfirmPw] = useState17("");
-  const [showCurrentPw, setShowCurrentPw] = useState17(false);
-  const [showNewPw, setShowNewPw] = useState17(false);
-  const [showConfirmPw, setShowConfirmPw] = useState17(false);
-  const [pwLoading, setPwLoading] = useState17(false);
-  const [twoFactorEnabled, setTwoFactorEnabled] = useState17(
+  const [fontSize, setFontSizeLocal] = useState18("md");
+  const [quickNavHrefs, setQuickNavHrefs] = useState18(initialQuickNavHrefs);
+  const [replacingIdx, setReplacingIdx] = useState18(null);
+  const [editName, setEditName] = useState18(user.displayName);
+  const [editLoading, setEditLoading] = useState18(false);
+  const [currentPw, setCurrentPw] = useState18("");
+  const [newPw, setNewPw] = useState18("");
+  const [confirmPw, setConfirmPw] = useState18("");
+  const [showCurrentPw, setShowCurrentPw] = useState18(false);
+  const [showNewPw, setShowNewPw] = useState18(false);
+  const [showConfirmPw, setShowConfirmPw] = useState18(false);
+  const [pwLoading, setPwLoading] = useState18(false);
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState18(
     initialTwoFactorEnabled
   );
-  const [isMounted, setIsMounted] = useState17(false);
+  const [isMounted, setIsMounted] = useState18(false);
   const isDesktopRaw = useBreakpointValue3({ base: false, md: true });
   const isDesktop = isMounted ? isDesktopRaw ?? false : false;
-  useEffect10(() => {
+  useEffect11(() => {
     setIsMounted(true);
     if (!enableLocalStorage || typeof window === "undefined") return;
     setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -5351,7 +5584,7 @@ function ReusableProfile({
       setQuickNavHrefs(initialQuickNavHrefs);
     }
   }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
-  useEffect10(() => {
+  useEffect11(() => {
     setEditName(user.displayName);
   }, [user.displayName]);
   const availableOptions = useMemo(
@@ -6469,11 +6702,15 @@ function ReusableProfile({
 }
 var UserProfile_default = ReusableProfile;
 export {
+  APIError,
+  APPLICATION_DATA_CHANGE_EVENT,
   beneficiary_default as Beneficiary,
   BottomQuickActions_default as BottomQuickActions,
   DocumentUploadCard,
+  GeoApifyService,
   GetStarted_default as GetStarted,
   HealthDeclaration_default as HealthDeclaration,
+  LIFE_PLAN_APPLICATION_KEY,
   LifePlanApplication1_default as LifePlanApplication1,
   LifePlanApplication2_default as LifePlanApplication2,
   LifePlanApplication3_default as LifePlanApplication3,
@@ -6481,15 +6718,25 @@ export {
   LifePlanApplicationStepWrapper_default as LifePlanApplicationStepWrapper,
   NotifyInstall,
   OCR_STORAGE_KEY,
+  OcrService,
+  PayMongoService,
   SharedLifePlanApplication_default as SharedLifePlanApplication,
   UserProfile_default as UserProfile,
+  api,
+  apiClient,
+  clearApplicationData,
   clearOcrResult,
+  configureApi,
   createEmptyApplicationData,
+  loadApplicationData,
   loadApplicationDataFromLocalStorage,
   markOcrApplied,
   readOcrResult,
+  saveApplicationData,
   saveApplicationDataToLocalStorage,
   saveOcrResult,
+  updateApplicationData,
+  useApplicationData,
   useOcr
 };
 //# sourceMappingURL=index.mjs.map