Dev v0.0.18 (#47)

* Small auth context refactor to ensure customer state updated

* Fixed customer state with update action in authReducer

Author: roncodes

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/storefront-app",
-    "version": "0.0.17",
+    "version": "0.0.18",
     "private": true,
     "scripts": {
         "android": "react-native run-android",

src/contexts/AuthContext.native.tsx

@@ -15,6 +15,8 @@ const authReducer = (state, action) => {
     switch (action.type) {
         case 'RESTORE_SESSION':
             return { ...state, customer: action.customer };
+        case 'UPDATE':
+            return { ...state, customer: action.customer };
         case 'LOGIN':
             return { ...state, phone: action.phone, isSendingCode: action.isSendingCode ?? false };
         case 'CREATING_ACCOUNT':
@@ -69,6 +71,7 @@ export const AuthProvider = ({ children }) => {
             }
 
             setStoredCustomer(customerInstance.serialize());
+            dispatch({ type: 'UPDATE', customer: customerInstance });
             EventRegister.emit('customer.updated', customerInstance);
         },
         [storefront, setStoredCustomer, authToken]
@@ -109,7 +112,7 @@ export const AuthProvider = ({ children }) => {
 
     // Update customer meta attributes
     const updateCustomerMeta = async (newMeta = {}) => {
-        const meta = { ...state.customer.getAttribute('meta'), ...newMeta };
+        const meta = { ...state.customer.getAttribute('meta', {}), ...newMeta };
         try {
             const customer = await state.customer.update({ meta });
             setCustomer(customer);

src/contexts/AuthContext.web.tsx

@@ -14,6 +14,8 @@ const authReducer = (state, action) => {
     switch (action.type) {
         case 'RESTORE_SESSION':
             return { ...state, customer: action.customer };
+        case 'UPDATE':
+            return { ...state, customer: action.customer };
         case 'LOGIN':
             return { ...state, phone: action.phone, isSendingCode: action.isSendingCode ?? false };
         case 'CREATING_ACCOUNT':
@@ -68,6 +70,7 @@ export const AuthProvider = ({ children }) => {
             }
 
             setStoredCustomer(customerInstance.serialize());
+            dispatch({ type: 'UPDATE', customer: customerInstance });
             EventRegister.emit('customer.updated', customerInstance);
         },
         [storefront, setStoredCustomer, authToken]
@@ -108,7 +111,7 @@ export const AuthProvider = ({ children }) => {
 
     // Update customer meta attributes
     const updateCustomerMeta = async (newMeta = {}) => {
-        const meta = { ...state.customer.getAttribute('meta'), ...newMeta };
+        const meta = { ...state.customer.getAttribute('meta', {}), ...newMeta };
         try {
             const customer = await state.customer.update({ meta });
             setCustomer(customer);

src/hooks/use-qpay-checkout.ts

@@ -26,16 +26,12 @@ export default function useQPayCheckout({ onOrderComplete }) {
     const { currentLocation: deliveryLocation, updateDefaultLocation } = useCurrentLocation();
     const { listen } = useSocketClusterClient();
     const [cart, updateCart] = useCart();
-    const defaultCompanyRegistrationNo = useMemo(() => {
-        return customer?.getAttribute('meta.ebarimt_registration_no', '') ?? '';
-    }, [customer]);
     const [checkoutOptions, setCheckoutOptions] = useState({
         leavingTip: false,
         tip: 0,
         leavingDeliveryTip: false,
         deliveryTip: 0,
         pickup: storefrontConfig('prioritizePickup') ? 1 : 0,
-        ebarimt_registration_no: defaultCompanyRegistrationNo,
     });
     const [invoice, setInvoice] = useState();
     const [checkoutId, setCheckoutId] = useState();
@@ -44,9 +40,17 @@ export default function useQPayCheckout({ onOrderComplete }) {
     const [isServiceQuoteUnavailable, setIsServiceQuoteUnavailable] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
     const [isCapturingOrder, setIsCapturingOrder] = useState(false);
-    const [isPersonal, setIsPersonal] = useState(isBlank(defaultCompanyRegistrationNo));
     const [error, setError] = useState(false);
+    // Order notes
     const [orderNotes, setOrderNotes] = useStorage(`${customer?.id ?? 'anon'}_order_notes`, '');
+    // Ebarimt company registration no
+    const companyRegistrationNumber = useMemo(() => {
+        if (customer && typeof customer.getAttribute === 'function') {
+            return customer.getAttribute('meta.ebarimt_registration_no', '');
+        }
+        return '';
+    }, [customer]);
+    const [isPersonal, setIsPersonal] = useState(isBlank(companyRegistrationNumber));
     const listenerRef = useRef();
     const hasOrderCompleted = useRef(false);
     const cartContentsString = JSON.stringify(cart.contents() || []);
@@ -141,7 +145,7 @@ export default function useQPayCheckout({ onOrderComplete }) {
     const debouncedUpdateRegistration = useMemo(
         () =>
             debounce((registrationNumber) => {
-                setCheckoutOptions((prev) => ({ ...prev, ebarimt_registration_no: registrationNumber }));
+                updateCustomerMeta({ ebarimt_registration_no: registrationNumber });
             }, 500), // 500ms delay
         []
     );
@@ -372,7 +376,7 @@ export default function useQPayCheckout({ onOrderComplete }) {
             isPersonal,
             setIsPersonal,
             isCompany: !isPersonal,
-            companyRegistrationNumber: customer?.getAttribute('meta.ebarimt_registration_no', '') ?? '',
+            companyRegistrationNumber,
             setCompanyRegistrationNumber,
         }),
         [
@@ -397,6 +401,7 @@ export default function useQPayCheckout({ onOrderComplete }) {
             isServiceQuoteUnavailable,
             isPersonal,
             setIsPersonal,
+            companyRegistrationNumber,
             setCompanyRegistrationNumber,
         ]
     );

src/screens/CartScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { useNavigation, useFocusEffect } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { Animated, Pressable, StyleSheet, LayoutAnimation, UIManager, Platform } from 'react-native';
 import { useSafeTabBarHeight as useBottomTabBarHeight } from '../hooks/use-safe-tab-bar-height';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -149,13 +149,6 @@ const CartScreen = ({ route }) => {
         setDisplayedItems(cart ? cart.contents() : []);
     }, [cart]);
 
-    // Run once
-    useFocusEffect(
-        useCallback(() => {
-            refreshCustomer();
-        }, [])
-    );
-
     const renderRightActions = (cartItem) => (
         <XStack height='100%' width={200} minHeight={100} maxHeight={125}>
             <Pressable style={{ flex: 1 }} onPress={() => handleEdit(cartItem)}>

test-vehicle-instantiation.js

@@ -285,7 +285,7 @@
         "vatRegistration": "VAT Registration",
         "personal": "Personal",
         "company": "Company",
-        "companyRegistrationNumber": "Company Registration No."
+        "companyRegistrationNumber": "Company Registration"
     },
     "SavedLocationScreen": {
         "addressSaved": "Address saved.",

translations/en.json

@@ -283,7 +283,7 @@
         "vatRegistration": "НӨАТ Registration",
         "personal": "Хувь хүн",
         "company": "Байгуулга",
-        "companyRegistrationNumber": "Компанийн регистерийн дугаар"
+        "companyRegistrationNumber": "Компани рд"
     },
     "SavedLocationScreen": {
         "addressSaved": "Хаяг хадгалагдсан.",