From 98267af93d05fd56410e6b32d9ac283e7e51a257 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Thu, 26 Dec 2024 15:06:37 +0800
Subject: [PATCH] implemented account creation and improved checkout flow for
 delivery selection

---
 .prettierrc                               |  12 +-
 .yarnrc.yml                               |   1 -
 README.md                                 | 130 +++++++++++-----------
 index.html                                |   7 +-
 src/components/CheckoutButton.tsx         |  16 ++-
 src/components/CustomerLocationSelect.tsx | 106 +++++++++++-------
 src/components/PhoneInput.tsx             |   8 +-
 src/components/ProductCard.tsx            |   2 +-
 src/contexts/AuthContext.tsx              |  55 +++++++++
 src/hooks/use-current-location.ts         |  16 ++-
 src/hooks/use-qpay-checkout.ts            |   3 +-
 src/hooks/use-saved-locations.ts          |  31 ++++--
 src/hooks/use-stripe-checkout.ts          |   1 +
 src/navigation/AppNavigator.tsx           |   5 +-
 src/navigation/StoreNavigator.tsx         |   8 ++
 src/navigation/stacks/CheckoutStack.tsx   |  10 ++
 src/screens/BootScreen.tsx                |  39 ++++---
 src/screens/CartScreen.tsx                |   8 +-
 src/screens/CheckoutScreen.tsx            |  25 +++--
 src/screens/CreateAccountScreen.tsx       |  70 +++++++++++-
 src/screens/CreateAccountVerifyScreen.tsx |  70 ++++++++++++
 src/screens/EditLocationScreen.tsx        |  40 ++++++-
 src/screens/LocationPermissionScreen.tsx  |  13 ++-
 src/screens/LocationPickerScreen.tsx      |  47 ++++++--
 src/screens/PhoneLoginScreen.tsx          |  53 ++++++---
 src/screens/QPayCheckoutScreen.tsx        |   2 +-
 src/screens/StripeCheckoutScreen.tsx      |   2 +-
 src/utils/checkout.js                     |   2 +-
 src/utils/location.js                     | 115 ++++++++++---------
 29 files changed, 632 insertions(+), 265 deletions(-)
 create mode 100644 src/screens/CreateAccountVerifyScreen.tsx

diff --git a/.prettierrc b/.prettierrc
index 1b9b1a2..eb884b3 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,8 +1,8 @@
 {
-	"semi": true,
-	"singleQuote": true,
-	"trailingComma": "es5",
-	"printWidth": 190,
-	"tabWidth": 4,
-	"jsxSingleQuote": true
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "printWidth": 190,
+    "tabWidth": 4,
+    "jsxSingleQuote": true
 }
diff --git a/.yarnrc.yml b/.yarnrc.yml
index d559f81..9f498eb 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1,3 +1,2 @@
 nodeLinker: node-modules
-
 # yarnPath: .yarn/releases/yarn-3.6.4.cjs
diff --git a/README.md b/README.md
index 5347460..6229c89 100644
--- a/README.md
+++ b/README.md
@@ -34,52 +34,52 @@ Open source ecommerce mobile app for on-demand orders. Setup ecommerce marketpla
 
 ## Table of Contents
 
--   [About](#about)
-    -   [Use cases](#use-cases)
--   [Screenshots](#screenshots)
--   [Prerequisites](#prerequisites)
--   [Installation](#installation)
-    -   [Configure Environment](#configure-environment)
--   [Running in Simulator](#running-in-simulator)
-    -   [Run the app in iOS Simulator](#run-the-app-in-ios-simulator)
-    -   [Run the app in Android Simulator](#run-the-app-in-android-simulator)
--   [Push Notifications](#push-notifications)
-    -   [APNS Push Notifications](#apns-push-notifications)
-    -   [FCM Push Notifications](#fcm-push-notifications)
--   [Generate Assets](#generate-assets)
--   [Configuration](#configuration)
-    -   [Application Configuration](#appconfig)
-    -   [Interface Configuration](#uiconfig)
--   [Internationalization and Translations](#internationalization-and-translations)
-    -   [Internationalization](#internationalization)
-    -   [Translations](#translations)
--   [Payment Gateways](#payment-gateways)
-    -   [Stripe](#stripe)
--   [Store Locations](#store-locations)
-    -   [Store Hours](#store-hours)
--   [Multi-Vendor](#multi-vendor)
-    -   [Creating a network](#creating-a-network)
-    -   [Inviting to network](#inviting-to-network)
-    -   [Configuring network](#configuring-network)
-    -   [Launch network on app](#launch-network-on-app)
--   [Cart](#cart)
--   [Customer Authentication](#customer-authentication)
-    -   [Creating a customer account](#creating-a-customer-account)
-    -   [Logging in a customer](#logging-in-a-customer)
--   [Delivery/ Service Rates](#delivery-service-rates)
-    -   [Location based quote](#location-based-quote)
--   [Checkout](#checkout)
-    -   [Creating a checkout token](#creating-a-checkout-token)
-    -   [Capture checkout](#capture-checkout)
--   [Driver/Agent App](#driver-agent-app)
-    -   [Proof of delivery](#proof-of-delivery)
--   [Orders](#orders)
-    -   [Auto-accept orders](#auto-accept-orders)
-    -   [Manually accept orders](#manually-accept-orders)
-    -   [Auto-assign orders](#auto-assign-orders)
-    -   [Manually assign orders](#manually-assign-orders)
--   [Documentation](#documentation)
--   [Roadmap](#roadmap)
+- [About](#about)
+    - [Use cases](#use-cases)
+- [Screenshots](#screenshots)
+- [Prerequisites](#prerequisites)
+- [Installation](#installation)
+    - [Configure Environment](#configure-environment)
+- [Running in Simulator](#running-in-simulator)
+    - [Run the app in iOS Simulator](#run-the-app-in-ios-simulator)
+    - [Run the app in Android Simulator](#run-the-app-in-android-simulator)
+- [Push Notifications](#push-notifications)
+    - [APNS Push Notifications](#apns-push-notifications)
+    - [FCM Push Notifications](#fcm-push-notifications)
+- [Generate Assets](#generate-assets)
+- [Configuration](#configuration)
+    - [Application Configuration](#appconfig)
+    - [Interface Configuration](#uiconfig)
+- [Internationalization and Translations](#internationalization-and-translations)
+    - [Internationalization](#internationalization)
+    - [Translations](#translations)
+- [Payment Gateways](#payment-gateways)
+    - [Stripe](#stripe)
+- [Store Locations](#store-locations)
+    - [Store Hours](#store-hours)
+- [Multi-Vendor](#multi-vendor)
+    - [Creating a network](#creating-a-network)
+    - [Inviting to network](#inviting-to-network)
+    - [Configuring network](#configuring-network)
+    - [Launch network on app](#launch-network-on-app)
+- [Cart](#cart)
+- [Customer Authentication](#customer-authentication)
+    - [Creating a customer account](#creating-a-customer-account)
+    - [Logging in a customer](#logging-in-a-customer)
+- [Delivery/ Service Rates](#delivery-service-rates)
+    - [Location based quote](#location-based-quote)
+- [Checkout](#checkout)
+    - [Creating a checkout token](#creating-a-checkout-token)
+    - [Capture checkout](#capture-checkout)
+- [Driver/Agent App](#driver-agent-app)
+    - [Proof of delivery](#proof-of-delivery)
+- [Orders](#orders)
+    - [Auto-accept orders](#auto-accept-orders)
+    - [Manually accept orders](#manually-accept-orders)
+    - [Auto-assign orders](#auto-assign-orders)
+    - [Manually assign orders](#manually-assign-orders)
+- [Documentation](#documentation)
+- [Roadmap](#roadmap)
 
 ### About
 
@@ -89,15 +89,15 @@ _Notice: Network/ Multi-vendor functionality is still a work in progress._
 
 #### Use Cases
 
--   Food delivery app
--   Services booking app
--   Hyperlocal shopping app
--   Hyperlocal marketplace app
--   Alcohol delivery app
--   Cannabis delivery app
--   Lawn care booking app
--   Transportation booking app
--   and much more...
+- Food delivery app
+- Services booking app
+- Hyperlocal shopping app
+- Hyperlocal marketplace app
+- Alcohol delivery app
+- Cannabis delivery app
+- Lawn care booking app
+- Transportation booking app
+- and much more...
 
 ### Screenshots
 
@@ -106,10 +106,10 @@ _Notice: Network/ Multi-vendor functionality is still a work in progress._
 
 ### Prerequisites
 
--   [Yarn](https://yarnpkg.com/) or [NPM](https://nodejs.org/en/)
--   [React Native CLI](https://reactnative.dev/docs/environment-setup)
--   Xcode 12+
--   Android Studio
+- [Yarn](https://yarnpkg.com/) or [NPM](https://nodejs.org/en/)
+- [React Native CLI](https://reactnative.dev/docs/environment-setup)
+- Xcode 12+
+- Android Studio
 
 ### Installation
 
@@ -128,7 +128,7 @@ corepack enable
 corepack prepare yarn@3.6.4 --activate
 yarn
 bundle install
-cd ios 
+cd ios
 bundle exec pod install
 touch .env
 ```
@@ -516,8 +516,8 @@ If you would like to make contributions to the Fleetbase Javascript SDK document
 
 ### Roadmap
 
--   Global state management with redux
--   Write proper react hooks for sdks
--   Add debounce on products search
--   Add network/marketplace views
--   Shopify & Woocommerce adapters
+- Global state management with redux
+- Write proper react hooks for sdks
+- Add debounce on products search
+- Add network/marketplace views
+- Shopify & Woocommerce adapters
diff --git a/index.html b/index.html
index 7d47ae5..b4dc4be 100644
--- a/index.html
+++ b/index.html
@@ -6,10 +6,7 @@
         <title>React Native Web</title>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
-            rel="stylesheet"
-        />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
         <style id="bootsplash-style">
             #bootsplash {
                 position: absolute;
@@ -24,7 +21,7 @@
                 background-color: #ffffff;
             }
             #bootsplash-logo {
-                content: url("data:image/svg+xml;base64,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");
+                content: url('data:image/svg+xml;base64,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');
                 width: 100px;
                 height: 100px;
             }
diff --git a/src/components/CheckoutButton.tsx b/src/components/CheckoutButton.tsx
index 2dcf052..92bb013 100644
--- a/src/components/CheckoutButton.tsx
+++ b/src/components/CheckoutButton.tsx
@@ -1,26 +1,36 @@
 import { Spinner, YStack, Button, useTheme } from 'tamagui';
+import { useNavigation } from '@react-navigation/native';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { faRocket, faUnlock } from '@fortawesome/free-solid-svg-icons';
 import { formatCurrency } from '../utils/format';
 import { useAuth } from '../contexts/AuthContext';
 import useCart from '../hooks/use-cart';
 
-const CheckoutButton = ({ total = 0, onCheckout, onAuthRequired, disabled = false, isLoading = false, ...props }) => {
+const CheckoutButton = ({ total = 0, onCheckout, onAuthRequired, disabled = false, isLoading = false }) => {
     const theme = useTheme();
+    const navigation = useNavigation();
     const { isAuthenticated } = useAuth();
     const [cart, updateCart] = useCart();
 
+    const handleAuthRequired = () => {
+        if (typeof onAuthRequired === 'function') {
+            onAuthRequired();
+        } else {
+            navigation.navigate('StoreProfileTab', { screen: 'PhoneLogin' });
+        }
+    };
+
     return (
         <YStack width='100%'>
             {isAuthenticated ? (
-                <Button onPress={onCheckout} size='$5' bg='$green-600' flex={1} opacity={disabled ? 0.75 : 1} disabled={disabled} {...props}>
+                <Button onPress={onCheckout} size='$5' bg='$green-600' flex={1} opacity={disabled ? 0.75 : 1} disabled={disabled}>
                     <Button.Icon>{isLoading ? <Spinner color='$green-100' /> : <FontAwesomeIcon icon={faRocket} color={theme['green-100'].val} />}</Button.Icon>
                     <Button.Text color='$green-100' fontWeight='bold' fontSize='$5'>
                         Checkout {formatCurrency(total, cart.getAttribute('currency'))}
                     </Button.Text>
                 </Button>
             ) : (
-                <Button onPress={onAuthRequired} size='$5' bg='$blue-600' flex={1} disabled={true} {...props}>
+                <Button onPress={handleAuthRequired} size='$5' bg='$blue-600' flex={1}>
                     <Button.Icon>
                         <FontAwesomeIcon icon={faUnlock} color={theme['blue-100'].val} />
                     </Button.Icon>
diff --git a/src/components/CustomerLocationSelect.tsx b/src/components/CustomerLocationSelect.tsx
index 3fd5c7d..e707912 100644
--- a/src/components/CustomerLocationSelect.tsx
+++ b/src/components/CustomerLocationSelect.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { Animated, SafeAreaView, Pressable, FlatList, LayoutAnimation, UIManager, Platform } from 'react-native';
 import { Spinner, Button, Text, YStack, XStack, Separator, useTheme } from 'tamagui';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
-import { faChevronRight, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faChevronRight, faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { toast, ToastPosition } from '@backpackapp-io/react-native-toast';
 import { useNavigation } from '@react-navigation/native';
 import BottomSheet, { BottomSheetView, BottomSheetFlatList } from '@gorhom/bottom-sheet';
@@ -12,7 +12,7 @@ import useCurrentLocation from '../hooks/use-current-location';
 import useSavedLocations from '../hooks/use-saved-locations';
 import PlaceMapView from './PlaceMapView';
 
-const CustomerLocationSelect = ({ onChange, ...props }) => {
+const CustomerLocationSelect = ({ onChange, onSelectNewLocation, redirectTo = 'Checkout', ...props }) => {
     const theme = useTheme();
     const navigation = useNavigation();
     const { currentLocation } = useCurrentLocation();
@@ -41,6 +41,15 @@ const CustomerLocationSelect = ({ onChange, ...props }) => {
         openBottomSheet();
     };
 
+    const handleSelectNewLocation = () => {
+        closeBottomSheet();
+        if (typeof onSelectNewLocation === 'function') {
+            onSelectNewLocation();
+        } else {
+            navigation.navigate('LocationPicker', { redirectTo, makeDefault: true });
+        }
+    };
+
     return (
         <YStack>
             <Pressable onPress={handleChangeLocation}>
@@ -69,49 +78,68 @@ const CustomerLocationSelect = ({ onChange, ...props }) => {
                     keyboardBehavior='extend'
                     keyboardBlurBehavior='none'
                     enableDynamicSizing={false}
-                    style={{ flex: 1, padding: 10, width: '100%' }}
+                    enablePanDownToClose={true}
+                    enableOverDrag={false}
+                    style={{ flex: 1, width: '100%' }}
+                    backgroundStyle={{ backgroundColor: theme.surface.val, borderWidth: 1, borderColor: theme.borderColorWithShadow.val }}
+                    handleIndicatorStyle={{ backgroundColor: theme.secondary.val }}
                 >
-                    <BottomSheetView style={{ flex: 1 }}>
+                    <BottomSheetView style={{ flex: 1, backgroundColor: theme.surface.val }}>
                         <YStack>
-                            <YStack alignItems='flex-end'>
-                                <Button size='$3' onPress={closeBottomSheet} bg='$gray-300' circular>
-                                    <Button.Icon>
-                                        <FontAwesomeIcon icon={faTimes} />
-                                    </Button.Icon>
-                                </Button>
-                            </YStack>
+                            <XStack alignItems='center' justifyContent='space-between' px='$5' mb='$4'>
+                                <Text fontSize='$6' color='$textPrimary' fontWeight='bold'>
+                                    Select delivery address
+                                </Text>
+                                <XStack space='$2'>
+                                    <Button onPress={handleSelectNewLocation} bg='$primary' px='$3' size='$2' borderRadius='$8' rounded>
+                                        <Button.Icon>
+                                            <FontAwesomeIcon icon={faPlus} color='white' />
+                                        </Button.Icon>
+                                        <Button.Text fontSize='$2' color='white'>
+                                            New Address
+                                        </Button.Text>
+                                    </Button>
+                                    <Button size='$2' onPress={closeBottomSheet} bg='$secondary' circular>
+                                        <Button.Icon>
+                                            <FontAwesomeIcon icon={faTimes} />
+                                        </Button.Icon>
+                                    </Button>
+                                </XStack>
+                            </XStack>
                             <BottomSheetFlatList
                                 data={savedLocations}
                                 keyExtractor={(item, index) => index}
                                 renderItem={({ item }) => (
-                                    <Button
-                                        onPress={() => handleLocationSelect(item)}
-                                        size='$6'
-                                        bg='$secondary'
-                                        justifyContent='space-between'
-                                        space='$1'
-                                        mb='$3'
-                                        px='$4'
-                                        py='$3'
-                                        hoverStyle={{
-                                            scale: 0.9,
-                                            opacity: 0.5,
-                                        }}
-                                        pressStyle={{
-                                            scale: 0.9,
-                                            opacity: 0.5,
-                                        }}
-                                    >
-                                        <YStack>
-                                            <Text mb='$1' color='$textPrimary' fontWeight='bold' numberOfLines={1}>
-                                                {item.getAttribute('name')}
-                                            </Text>
-                                            <Text color='$textSecondary' numberOfLines={1}>
-                                                {formattedAddressFromPlace(item)}
-                                            </Text>
-                                            <Text color='$textSecondary'>{formatAddressSecondaryIdentifier(item)}</Text>
-                                        </YStack>
-                                    </Button>
+                                    <YStack px='$4'>
+                                        <Button
+                                            onPress={() => handleLocationSelect(item)}
+                                            size='$6'
+                                            bg='$secondary'
+                                            justifyContent='space-between'
+                                            space='$1'
+                                            mb='$3'
+                                            px='$4'
+                                            py='$3'
+                                            hoverStyle={{
+                                                scale: 0.9,
+                                                opacity: 0.5,
+                                            }}
+                                            pressStyle={{
+                                                scale: 0.9,
+                                                opacity: 0.5,
+                                            }}
+                                        >
+                                            <YStack>
+                                                <Text mb='$1' color='$textPrimary' fontWeight='bold' numberOfLines={1}>
+                                                    {item.getAttribute('name')}
+                                                </Text>
+                                                <Text color='$textSecondary' numberOfLines={1}>
+                                                    {formattedAddressFromPlace(item)}
+                                                </Text>
+                                                <Text color='$textSecondary'>{formatAddressSecondaryIdentifier(item)}</Text>
+                                            </YStack>
+                                        </Button>
+                                    </YStack>
                                 )}
                             />
                             <YStack height={200} />
diff --git a/src/components/PhoneInput.tsx b/src/components/PhoneInput.tsx
index fad6d8a..d5b3189 100644
--- a/src/components/PhoneInput.tsx
+++ b/src/components/PhoneInput.tsx
@@ -77,8 +77,8 @@ const PhoneInput = ({ value, onChange, width = '100%', defaultCountryCode = 'US'
 
     return (
         <YStack space='$4' {...wrapperProps}>
-            <XStack width='100%' space='$2' paddingHorizontal={0} shadowOpacity={0} shadowRadius={0} borderWidth={1} borderColor='$borderColorWithShadow' borderRadius='$5' bg='$surface'>
-                <Button size='$4' onPress={openBottomSheet} bg='$surface' borderWidth={0} borderRadius='$5' borderRightWidth={1} borderColor='$borderColor' width={90} maxWidth={90}>
+            <XStack width='100%' space='$2' paddingHorizontal={0} shadowOpacity={0} shadowRadius={0} borderWidth={1} borderColor='$borderColorWithShadow' borderRadius='$5' bg='$white'>
+                <Button size='$4' onPress={openBottomSheet} bg='$surface' borderWidth={0} borderRightWidth={1} borderColor='$borderColor' width={80} maxWidth={80}>
                     <XStack alignItems='center' space='$2'>
                         <Text>{getEmojiFlag(selectedCountry.code)}</Text>
                         <Text>+{selectedCountry.phone}</Text>
@@ -94,7 +94,7 @@ const PhoneInput = ({ value, onChange, width = '100%', defaultCountryCode = 'US'
                     onFocus={handleInputFocus}
                     borderWidth={0}
                     borderRadius={0}
-                    bg='transparent'
+                    bg='white'
                 />
             </XStack>
 
@@ -108,7 +108,7 @@ const PhoneInput = ({ value, onChange, width = '100%', defaultCountryCode = 'US'
                     enableDynamicSizing={false}
                     enablePanDownToClose={true}
                     enableOverDrag={false}
-                    style={{ flex: 1, padding: 10, width: '100%' }}
+                    style={{ flex: 1, width: '100%' }}
                     backgroundStyle={{ backgroundColor: theme.surface.val, borderWidth: 1, borderColor: theme.borderColorWithShadow.val }}
                     handleIndicatorStyle={{ backgroundColor: theme.secondary.val }}
                 >
diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
index 818c051..dbb93e0 100644
--- a/src/components/ProductCard.tsx
+++ b/src/components/ProductCard.tsx
@@ -59,7 +59,7 @@ const ProductCard = ({
             setQuantity(1);
             toast.success(`${product.getAttribute('name')} added to cart.`, { position: ToastPosition.BOTTOM });
         } catch (error) {
-            console.log('Error Adding to Cart', error.message);
+            console.error('Error Adding to Cart', error.message);
         }
     };
 
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
index 0f1ab95..3e916b3 100644
--- a/src/contexts/AuthContext.tsx
+++ b/src/contexts/AuthContext.tsx
@@ -13,6 +13,8 @@ const authReducer = (state, action) => {
             return { ...state, customer: action.customer };
         case 'LOGIN':
             return { ...state, phone: action.phone, isSendingCode: action.isSendingCode ?? false };
+        case 'CREATING_ACCOUNT':
+            return { ...state, phone: action.phone, isSendingCode: action.isSendingCode ?? false };
         case 'VERIFY':
             return { ...state, customer: action.customer, isVerifyingCode: action.isVerifyingCode ?? false };
         case 'LOGOUT':
@@ -75,6 +77,17 @@ export const AuthProvider = ({ children }) => {
         }
     };
 
+    const getDefaultAddress = (customer) => {
+        const addresses = customer.getAttribute('addresses', []);
+        const addressId = customer.getAttribute('address_id');
+        if (isArray(addresses)) {
+            const defaultLocation = addresses.find((address) => address.id === addressId);
+            return defaultLocation ?? addresses[0];
+        }
+
+        return null;
+    };
+
     // Update customer default location
     const updateCustomerLocation = async (location) => {
         try {
@@ -106,6 +119,45 @@ export const AuthProvider = ({ children }) => {
         }
     };
 
+    // Create Account: Send verification code
+    const requestCreationCode = useCallback(
+        async (phone, method = 'sms') => {
+            dispatch({ type: 'CREATING_ACCOUNT', phone, isSendingCode: true });
+            try {
+                await storefront.customers.requestCreationCode(phone, method);
+                dispatch({ type: 'CREATING_ACCOUNT', phone, isSendingCode: false });
+            } catch (error) {
+                console.error('[AuthContext] Account creation verification failed:', error);
+                throw error;
+            } finally {
+                dispatch({ type: 'CREATING_ACCOUNT', phone, isSendingCode: false });
+            }
+        },
+        [storefront]
+    );
+
+    // Create Account: Verify Code
+    const verifyAccountCreation = useCallback(
+        async (phone, code, attributes = {}) => {
+            dispatch({ type: 'VERIFY', isVerifyingCode: true });
+            try {
+                const customer = await storefront.customers.create(phone, code, attributes);
+                clearSessionData();
+                setCustomerDefaultLocation(customer);
+                setCustomer(customer);
+                // save customer token
+                storage.setString('_customer_token', customer.token);
+                dispatch({ type: 'VERIFY', customer });
+            } catch (error) {
+                console.error('[AuthContext] Account creation verification failed:', error);
+                throw error;
+            } finally {
+                dispatch({ type: 'VERIFY', isVerifyingCode: false });
+            }
+        },
+        [storefront]
+    );
+
     // Login: Send verification code
     const login = useCallback(
         async (phone) => {
@@ -182,6 +234,9 @@ export const AuthProvider = ({ children }) => {
             login,
             verifyCode,
             logout,
+            requestCreationCode,
+            verifyAccountCreation,
+            getDefaultAddress,
         }),
         [state, login, verifyCode, logout]
     );
diff --git a/src/hooks/use-current-location.ts b/src/hooks/use-current-location.ts
index f7497c9..4b38cf5 100644
--- a/src/hooks/use-current-location.ts
+++ b/src/hooks/use-current-location.ts
@@ -6,7 +6,7 @@ import { useAuth } from '../contexts/AuthContext';
 import useStorage from './use-storage';
 
 const useCurrentLocation = () => {
-    const { isAuthenticated, updateCustomerLocation } = useAuth();
+    const { isAuthenticated, updateCustomerLocation, customer, getDefaultAddress } = useAuth();
     const [currentLocation, setCurrentLocation] = useStorage('_current_location');
     const [liveLocation, setLiveLocation] = useStorage('_live_location');
     const [loading, setLoading] = useState(false);
@@ -43,6 +43,14 @@ const useCurrentLocation = () => {
         setError(null);
 
         try {
+            if (isAuthenticated) {
+                const defaultAddress = getDefaultAddress(customer);
+                if (defaultAddress) {
+                    await updateCurrentLocation(defaultAddress);
+                    return;
+                }
+            }
+
             const location = await fetchCurrentLocation();
             await updateCurrentLocation(location);
         } catch (err) {
@@ -57,7 +65,9 @@ const useCurrentLocation = () => {
     const initializeLiveLocation = async () => {
         try {
             const location = await getLiveLocation();
-            setLiveLocation(location.serialize());
+            if (location) {
+                setLiveLocation(location.serialize());
+            }
         } catch (err) {
             console.error('Error fetching live location:', err);
             setError(err);
@@ -100,7 +110,7 @@ const useCurrentLocation = () => {
             initializeCurrentLocation();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isAuthenticated]);
+    }, [isAuthenticated, customer]);
 
     return {
         currentLocation: restoreFleetbasePlace(currentLocation),
diff --git a/src/hooks/use-qpay-checkout.ts b/src/hooks/use-qpay-checkout.ts
index 256c695..5901959 100644
--- a/src/hooks/use-qpay-checkout.ts
+++ b/src/hooks/use-qpay-checkout.ts
@@ -189,6 +189,7 @@ export default function useQPayCheckout({ onOrderComplete }) {
                     setServiceQuote(quote);
                 }
             } catch (error) {
+                toast.error('Unable to calculate delivery fee.', { position: ToastPosition.TOP });
                 console.error('Error fetching service quote:', error);
             }
         };
@@ -198,7 +199,7 @@ export default function useQPayCheckout({ onOrderComplete }) {
         return () => {
             isMounted = false;
         };
-    }, [cartContentsString, cart, deliveryLocation.id]);
+    }, [cartContentsString, cart, deliveryLocation?.id]);
 
     useEffect(() => {
         if (!checkoutId || !checkoutToken || listenerRef.current) {
diff --git a/src/hooks/use-saved-locations.ts b/src/hooks/use-saved-locations.ts
index 9d098f7..c223854 100644
--- a/src/hooks/use-saved-locations.ts
+++ b/src/hooks/use-saved-locations.ts
@@ -4,33 +4,44 @@ import { isResource, isEmpty } from '../utils';
 import { useAuth } from '../contexts/AuthContext';
 import useStorage from './use-storage';
 import useFleetbase from './use-fleetbase';
+import useCurrentLocation from './use-current-location';
 
 const useSavedLocations = () => {
     const { fleetbase } = useFleetbase();
     const { customer, isAuthenticated } = useAuth();
+    const { currentLocation, updateCurrentLocation, updateDefaultLocation } = useCurrentLocation();
     const [localLocations, setLocalLocations] = useStorage('_local_locations', []);
     const [customerLocations, setCustomerLocations] = useStorage('_customer_locations', []);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
 
     // Add a new local location
-    const addLocalLocation = (place) => {
+    const addLocalLocation = (place, makeDefault = false) => {
+        // If this is the first local location also set it as the default current location
+        if (isEmpty(localLocations) || !currentLocation || makeDefault === true) {
+            updateCurrentLocation(place);
+        }
+
         const data = isResource(place) ? place.serialize() : place;
         setLocalLocations((prevLocations) => [...prevLocations, data]);
     };
 
     // Add new location but as a promise
-    const addLocalLocationPromise = (place) => {
+    const addLocalLocationPromise = (place, makeDefault = false) => {
         return new Promise((resolve) => {
-            addLocalLocation(place);
+            addLocalLocation(place, makeDefault);
             resolve(true);
         });
     };
 
     // Add new location for authenticated customer
-    const addCustomerLocation = async (attributes = {}) => {
+    const addCustomerLocation = async (attributes = {}, makeDefault = false) => {
         try {
             const place = await fleetbase.places.create({ ...attributes, owner: customer.id });
+            // If customer has no existing locations make this the default location
+            if (isEmpty(customerLocations) || !currentLocation || makeDefault === true) {
+                updateDefaultLocation(place);
+            }
             setCustomerLocations((prevLocations) => [...prevLocations, place.serialize()]);
             return place;
         } catch (err) {
@@ -39,11 +50,15 @@ const useSavedLocations = () => {
     };
 
     // Handle location update
-    const updateLocation = async (attributes = {}) => {
+    const updateLocation = async (attributes = {}, makeDefault = false) => {
         const place = restoreFleetbasePlace(attributes);
 
         try {
             const updatedPlace = await place.save();
+            // If it should become the default location
+            if (makeDefault === true) {
+                updateDefaultLocation(place);
+            }
             updateLocationState(updatedPlace);
             return updatedPlace;
         } catch (err) {
@@ -78,12 +93,12 @@ const useSavedLocations = () => {
     };
 
     // Add location
-    const addLocation = async (attributes = {}) => {
+    const addLocation = async (attributes = {}, makeDefault = false) => {
         if (isAuthenticated) {
-            return isEmpty(attributes.id) ? addCustomerLocation(attributes) : updateLocation(attributes);
+            return isEmpty(attributes.id) ? addCustomerLocation(attributes, makeDefault) : updateLocation(attributes, makeDefault);
         }
 
-        return addLocalLocationPromise(attributes);
+        return addLocalLocationPromise(attributes, makeDefault);
     };
 
     // Function to load customer locations
diff --git a/src/hooks/use-stripe-checkout.ts b/src/hooks/use-stripe-checkout.ts
index 146ff5b..b85c0c2 100644
--- a/src/hooks/use-stripe-checkout.ts
+++ b/src/hooks/use-stripe-checkout.ts
@@ -342,6 +342,7 @@ export default function useStripeCheckout({ onOrderComplete }) {
                     setServiceQuote(quote);
                 }
             } catch (error) {
+                toast.error('Unable to calculate delivery fee.', { position: ToastPosition.TOP });
                 console.error('Error fetching service quote:', error);
             }
         };
diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx
index 94f3e55..b7b8804 100644
--- a/src/navigation/AppNavigator.tsx
+++ b/src/navigation/AppNavigator.tsx
@@ -2,7 +2,7 @@ import { createStaticNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { getTheme } from '../utils';
 import { Boot } from './stacks/CoreStack';
-import { LocationPermission } from './stacks/LocationStack';
+import { LocationPermission, LocationPicker, EditLocation, EditLocationCoord } from './stacks/LocationStack';
 import StoreNavigator from './StoreNavigator';
 import NetworkHomeScreen from '../screens/NetworkHomeScreen';
 
@@ -11,6 +11,9 @@ const RootStack = createNativeStackNavigator({
     screens: {
         Boot,
         LocationPermission,
+        LocationPicker,
+        EditLocation,
+        EditLocationCoord,
         NetworkHome: {
             screen: NetworkHomeScreen,
             options: ({ route }) => {
diff --git a/src/navigation/StoreNavigator.tsx b/src/navigation/StoreNavigator.tsx
index 3544ee9..8b82740 100644
--- a/src/navigation/StoreNavigator.tsx
+++ b/src/navigation/StoreNavigator.tsx
@@ -20,6 +20,7 @@ import LoginScreen from '../screens/LoginScreen';
 import PhoneLoginScreen from '../screens/PhoneLoginScreen';
 import PhoneLoginVerifyScreen from '../screens/PhoneLoginVerifyScreen';
 import CreateAccountScreen from '../screens/CreateAccountScreen';
+import CreateAccountVerifyScreen from '../screens/CreateAccountVerifyScreen';
 import AccountScreen from '../screens/AccountScreen';
 import StripeCustomerScreen from '../screens/StripeCustomerScreen';
 import EditAccountPropertyScreen from '../screens/EditAccountPropertyScreen';
@@ -157,6 +158,13 @@ const StoreProfileTab = createNativeStackNavigator({
                 headerShown: false,
             },
         },
+        CreateAccountVerify: {
+            if: useIsNotAuthenticated,
+            screen: CreateAccountVerifyScreen,
+            options: {
+                headerShown: false,
+            },
+        },
         StripeCustomer: {
             if: useIsAuthenticated,
             screen: StripeCustomerScreen,
diff --git a/src/navigation/stacks/CheckoutStack.tsx b/src/navigation/stacks/CheckoutStack.tsx
index ef74655..130b446 100644
--- a/src/navigation/stacks/CheckoutStack.tsx
+++ b/src/navigation/stacks/CheckoutStack.tsx
@@ -8,6 +8,16 @@ import { getTheme } from '../../utils';
 
 export const Checkout = {
     screen: CheckoutScreen,
+    options: ({ route, navigation }) => {
+        return {
+            title: 'Checkout',
+            headerTitleStyle: {
+                color: getTheme('textPrimary'),
+            },
+            headerTransparent: true,
+            headerLeft: () => <BackButton onPress={() => navigation.goBack()} size={40} />,
+        };
+    },
 };
 
 export const StripeCheckout = {
diff --git a/src/screens/BootScreen.tsx b/src/screens/BootScreen.tsx
index 799419c..34f28f8 100644
--- a/src/screens/BootScreen.tsx
+++ b/src/screens/BootScreen.tsx
@@ -2,21 +2,24 @@ import React, { useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { SafeAreaView, Platform } from 'react-native';
 import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
-import { Spinner, Stack, Text, YStack, useTheme } from 'tamagui';
+import { Image, Spinner, XStack, Text, YStack, useTheme } from 'tamagui';
 import { setI18nConfig } from '../utils/localize';
+import { config } from '../utils';
 import BootSplash from 'react-native-bootsplash';
 import useStorefront from '../hooks/use-storefront';
 import useStorage from '../hooks/use-storage';
-
+import useCurrentLocation from '../hooks/use-current-location';
 import SetupWarningScreen from './SetupWarningScreen';
 
+const APP_NAME = config('APP_NAME');
 const BootScreen = () => {
     const theme = useTheme();
     const navigation = useNavigation();
     const { storefront, error: storefrontError, hasStorefrontConfig } = useStorefront();
+    const { currentLocation } = useCurrentLocation();
     const [info, setInfo] = useStorage('info', {});
     const [error, setError] = useState<Error | null>(null);
-    console.log('[BootScreen]');
+    // console.log('[BootScreen #currentLocation]', currentLocation);
 
     useEffect(() => {
         const checkLocationPermission = async () => {
@@ -24,28 +27,30 @@ const BootScreen = () => {
 
             const result = await check(permission);
             if (result === RESULTS.GRANTED) {
-                initializeStorefront(); // Continue the boot process if permission is granted
+                initializeStorefront();
             } else {
-                const requestResult = await request(permission);
-                if (requestResult === RESULTS.GRANTED) {
-                    initializeStorefront();
-                } else {
-                    setTimeout(() => BootSplash.hide(), 300);
-                    navigation.navigate('LocationPermission');
+                // if user has manually set their current location bypass location services permission
+                if (currentLocation) {
+                    return initializeStorefront();
                 }
+
+                // Hide BootSplash
+                setTimeout(() => BootSplash.hide(), 300);
+                navigation.navigate('LocationPermission');
             }
         };
 
         const initializeStorefront = async () => {
             if (!hasStorefrontConfig()) {
-                setError(new Error('Missing required configuration keys'));
-                return;
+                return setError(new Error('Missing required configuration keys'));
             }
 
             // setI18nConfig();
 
             try {
-                if (!storefront) return;
+                if (!storefront) {
+                    return;
+                }
 
                 const info = await storefront.about();
                 setInfo(info);
@@ -69,10 +74,10 @@ const BootScreen = () => {
     return (
         <SafeAreaView style={{ flex: 1, backgroundColor: theme.$background.val }}>
             <YStack flex={1} alignItems='center' justifyContent='center' bg='$background'>
-                <Spinner size='large' color='$textSecondary' />
-                <Text mt='$4' color='$textPrimary'>
-                    Loading Storefront...
-                </Text>
+                <Image source={require('../../assets/app-icon.png')} width={100} height={100} borderRadius='$4' />
+                <XStack mt='$2' alignItems='center' justifyContent='center' space='$3'>
+                    <Spinner size='small' color='$textSecondary' />
+                </XStack>
             </YStack>
         </SafeAreaView>
     );
diff --git a/src/screens/CartScreen.tsx b/src/screens/CartScreen.tsx
index e7b8e4f..04ff5bb 100644
--- a/src/screens/CartScreen.tsx
+++ b/src/screens/CartScreen.tsx
@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { faPencilAlt, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { toast, ToastPosition } from '@backpackapp-io/react-native-toast';
 import { formatCurrency } from '../utils/format';
-import { delay, loadPersistedResource } from '../utils';
+import { delay, loadPersistedResource, storefrontConfig } from '../utils';
 import { calculateCartTotal } from '../utils/cart';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
 import useCart from '../hooks/use-cart';
@@ -31,15 +31,15 @@ const CartScreen = () => {
     }, [cart]);
 
     const handleCheckout = () => {
-        if (StorefrontConfig.paymentGateway === 'stripe') {
+        if (storefrontConfig('paymentGateway') === 'stripe') {
             return navigation.navigate('StripeCheckout');
         }
 
-        if (StorefrontConfig.paymentGateway === 'qpay') {
+        if (storefrontConfig('paymentGateway') === 'qpay') {
             return navigation.navigate('QPayCheckout');
         }
 
-        if (StorefrontConfig.paymentGateway === 'paypal') {
+        if (storefrontConfig('paymentGateway') === 'paypal') {
             return navigation.navigate('PaypalCheckout');
         }
     };
diff --git a/src/screens/CheckoutScreen.tsx b/src/screens/CheckoutScreen.tsx
index 41cdb31..ebaf0fb 100644
--- a/src/screens/CheckoutScreen.tsx
+++ b/src/screens/CheckoutScreen.tsx
@@ -1,16 +1,21 @@
-import React, { useEffect, useState } from 'react';
-import { useNavigation } from '@react-navigation/native';
-import { SafeAreaView } from 'react-native';
-import { Stack, Text, YStack, useTheme } from 'tamagui';
+import React from 'react';
+import { storefrontConfig } from '../utils';
+import QPayCheckoutScreen from './QPayCheckoutScreen';
+import StripeCheckoutScreen from './StripeCheckoutScreen';
+import PaypalCheckoutScreen from './PaypalCheckoutScreen';
 
 const CheckoutScreen = () => {
-    const theme = useTheme();
+    if (storefrontConfig('paymentGateway') === 'stripe') {
+        return <StripeCheckoutScreen />;
+    }
 
-    return (
-        <SafeAreaView style={{ flex: 1, backgroundColor: theme.background.val }}>
-            <YStack flex={1} alignItems='center' justifyContent='center' bg='$background'></YStack>
-        </SafeAreaView>
-    );
+    if (storefrontConfig('paymentGateway') === 'qpay') {
+        return <QPayCheckoutScreen />;
+    }
+
+    if (storefrontConfig('paymentGateway') === 'paypal') {
+        return <PaypalCheckoutScreen />;
+    }
 };
 
 export default CheckoutScreen;
diff --git a/src/screens/CreateAccountScreen.tsx b/src/screens/CreateAccountScreen.tsx
index 672a732..424c9db 100644
--- a/src/screens/CreateAccountScreen.tsx
+++ b/src/screens/CreateAccountScreen.tsx
@@ -1,14 +1,78 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { SafeAreaView } from 'react-native';
-import { Stack, Text, YStack, useTheme } from 'tamagui';
+import { Spinner, Input, Stack, Text, YStack, useTheme, Button } from 'tamagui';
+import { toast, ToastPosition } from '@backpackapp-io/react-native-toast';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { faPaperPlane, faKey, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { isValidPhoneNumber } from '../utils';
+import { useAuth } from '../contexts/AuthContext';
+import PhoneInput from '../components/PhoneInput';
 
-const CreateAccountScreen = () => {
+const CreateAccountScreen = ({ route }) => {
+    const params = route.params || {};
+    const navigation = useNavigation();
     const theme = useTheme();
+    const { requestCreationCode, isSendingCode, phone: phoneState } = useAuth();
+    const [phone, setPhone] = useState(phoneState);
+    const [name, setName] = useState(params.name);
+
+    const handleSendVerificationCode = async () => {
+        if (isSendingCode) {
+            return;
+        }
+
+        if (!isValidPhoneNumber(phone)) {
+            return toast.error('Invalid phone number provided.');
+        }
+
+        try {
+            await requestCreationCode(phone);
+            navigation.navigate('CreateAccountVerify', { name, phone });
+        } catch (error) {
+            toast.error(error.message);
+        }
+    };
 
     return (
         <SafeAreaView style={{ flex: 1, backgroundColor: theme.background.val }}>
-            <YStack flex={1} alignItems='center' justifyContent='center' bg='$background'></YStack>
+            <YStack flex={1} alignItems='center' bg='$background' space='$3' padding='$5'>
+                <YStack flex={1} space='$2' width='100%'>
+                    <Text color='$textPrimary' fontWeight='bold' fontSize='$8' mb='$3'>
+                        Create Account
+                    </Text>
+                    <YStack height={43} width='100%'>
+                        <Input
+                            value={name}
+                            onChangeText={(text) => setName(text)}
+                            size='$5'
+                            placeholder={name}
+                            color='$color'
+                            shadowOpacity={0}
+                            shadowRadius={0}
+                            borderWidth={1}
+                            borderColor='$borderColorWithShadow'
+                            borderRadius='$4'
+                            bg='white'
+                            flex={1}
+                            autoCapitalize={false}
+                            autoComplete={false}
+                            autoCorrect={false}
+                            placeholder='Enter your name'
+                        />
+                    </YStack>
+                    <PhoneInput value={phone} onChange={(phoneNumber) => setPhone(phoneNumber)} />
+                </YStack>
+
+                <YStack space='$3' width='100%'>
+                    <Button onPress={handleSendVerificationCode} bg='$primary' width='100%' opacity={isSendingCode ? 0.75 : 1} disabled={isSendingCode} rounded>
+                        <Button.Icon>{isSendingCode ? <Spinner color='$white' /> : <FontAwesomeIcon icon={faPaperPlane} color={theme.white.val} />}</Button.Icon>
+                        <Button.Text color='$white' fontWeight='bold'>
+                            Send Verification Code
+                        </Button.Text>
+                    </Button>
+                </YStack>
+            </YStack>
         </SafeAreaView>
     );
 };
diff --git a/src/screens/CreateAccountVerifyScreen.tsx b/src/screens/CreateAccountVerifyScreen.tsx
new file mode 100644
index 0000000..c1cc803
--- /dev/null
+++ b/src/screens/CreateAccountVerifyScreen.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { SafeAreaView } from 'react-native';
+import { Spinner, Button, Input, Stack, Text, YStack, useTheme } from 'tamagui';
+import { toast, ToastPosition } from '@backpackapp-io/react-native-toast';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { faCheck, faArrowRotateRight } from '@fortawesome/free-solid-svg-icons';
+import { OtpInput } from 'react-native-otp-entry';
+import { useAuth } from '../contexts/AuthContext';
+
+const CreateAccountVerifyScreen = ({ route }) => {
+    const navigation = useNavigation();
+    const theme = useTheme();
+    const { phone, verifyAccountCreation, isVerifyingCode } = useAuth();
+    const [code, setCode] = useState(null);
+    const name = route.params.name;
+
+    const handleVerifyCode = async (code) => {
+        if (isVerifyingCode) {
+            return;
+        }
+
+        try {
+            await verifyAccountCreation(phone, code, { name, phone });
+        } catch (error) {
+            console.error('Error verifying account creation code:', error);
+            toast.error(error.message);
+        }
+    };
+
+    const handleRetry = () => {
+        setCode('');
+        navigation.navigate('CreateAccount', { phone, name });
+    };
+
+    return (
+        <SafeAreaView style={{ flex: 1, backgroundColor: theme.background.val }}>
+            <YStack flex={1} bg='$background' space='$3' padding='$5'>
+                <YStack mb='$4'>
+                    <Text fontSize={20} fontWeight='bold'>
+                        Code sent to {phone}
+                    </Text>
+                </YStack>
+                <OtpInput
+                    numberOfDigits={6}
+                    onTextChange={setCode}
+                    onFilled={handleVerifyCode}
+                    focusColor={theme.primary.val}
+                    theme={{ pinCodeContainerStyle: { borderColor: theme['blue-300'].val, height: 50, width: 50 }, pinCodeTextStyle: { color: theme.primary.val, fontSize: 25 } }}
+                />
+                <Button onPress={() => handleVerifyCode(code)} bg='$primary' width='100%' opacity={isVerifyingCode ? 0.75 : 1} disabled={isVerifyingCode} rounded>
+                    <Button.Icon>{isVerifyingCode ? <Spinner color='$white' /> : <FontAwesomeIcon icon={faCheck} color={theme.white.val} />}</Button.Icon>
+                    <Button.Text color='$white' fontWeight='bold'>
+                        Verify Code
+                    </Button.Text>
+                </Button>
+                <Button onPress={handleRetry} bg='$secondary' width='100%' rounded>
+                    <Button.Icon>
+                        <FontAwesomeIcon icon={faArrowRotateRight} color={theme['gray-500'].val} />
+                    </Button.Icon>
+                    <Button.Text color='$gray-500' fontWeight='bold'>
+                        Retry
+                    </Button.Text>
+                </Button>
+            </YStack>
+        </SafeAreaView>
+    );
+};
+
+export default CreateAccountVerifyScreen;
diff --git a/src/screens/EditLocationScreen.tsx b/src/screens/EditLocationScreen.tsx
index 6672b17..10646c8 100644
--- a/src/screens/EditLocationScreen.tsx
+++ b/src/screens/EditLocationScreen.tsx
@@ -9,7 +9,7 @@ import { Place } from '@fleetbase/sdk';
 import { adapter } from '../hooks/use-storefront';
 import { useAuth } from '../contexts/AuthContext';
 import { formattedAddressFromSerializedPlace, restoreFleetbasePlace } from '../utils/location';
-import { isEmpty } from '../utils';
+import { isEmpty, toBoolean } from '../utils';
 import usePromiseWithLoading from '../hooks/use-promise-with-loading';
 import useStorefront from '../hooks/use-storefront';
 import useCurrentLocation from '../hooks/use-current-location';
@@ -57,6 +57,8 @@ const EditLocationScreen = ({ route }) => {
     const [postalCode, setPostalCode] = useState(place.postal_code);
     const [instructions, setInstructions] = useState(place.meta.instructions);
     const redirectTo = params.redirectTo;
+    const redirectToScreen = params.redirectToScreen;
+    const makeDefault = toBoolean(params.makeDefault);
     const isDefaultLocation = currentLocation?.id === place?.id;
 
     useEffect(() => {
@@ -67,18 +69,48 @@ const EditLocationScreen = ({ route }) => {
         });
     }, [name, street1]);
 
+    const handleRedirectToCheckoutScreen = () => {
+        navigation.reset({
+            index: 0,
+            routes: [
+                {
+                    name: 'StoreNavigator',
+                    state: {
+                        index: 0,
+                        routes: [
+                            {
+                                name: 'StoreCartTab',
+                                state: {
+                                    index: 1,
+                                    routes: [{ name: 'Cart' }, { name: 'Checkout' }],
+                                },
+                            },
+                        ],
+                    },
+                },
+            ],
+        });
+    };
+
     const handleRedirect = () => {
         if (redirectTo === 'AddressBook') {
             navigation.goBack();
+        } else if (redirectTo === 'Checkout') {
+            handleRedirectToCheckoutScreen();
         } else {
-            navigation.reset({
+            const reset = {
                 index: 0,
                 routes: [
                     {
                         name: redirectTo,
                     },
                 ],
-            });
+            };
+            if (redirectToScreen) {
+                reset.routes[0].params = { screen: redirectToScreen };
+            }
+
+            navigation.reset(reset);
         }
     };
 
@@ -88,7 +120,7 @@ const EditLocationScreen = ({ route }) => {
 
     const handleSavePlace = async () => {
         try {
-            await runWithLoading(addLocation(getUpdatedPlace()), 'saving');
+            await runWithLoading(addLocation(getUpdatedPlace(), makeDefault), 'saving');
             toast.success('Address saved.', { position: ToastPosition.bottom });
             handleRedirect();
         } catch (error) {
diff --git a/src/screens/LocationPermissionScreen.tsx b/src/screens/LocationPermissionScreen.tsx
index 8f65fa3..f0219a8 100644
--- a/src/screens/LocationPermissionScreen.tsx
+++ b/src/screens/LocationPermissionScreen.tsx
@@ -26,7 +26,7 @@ const LocationPermissionScreen = () => {
     };
 
     const handleDeny = () => {
-        navigation.navigate('LocationPicker');
+        navigation.navigate('LocationPicker', { redirectTo: 'Boot' });
     };
 
     const openSettings = () => {
@@ -36,7 +36,8 @@ const LocationPermissionScreen = () => {
 
     // Function to check if permission has been granted when returning to the screen
     const checkPermissionStatus = useCallback(async () => {
-        const result = await check(permissionType);
+        const permission = Platform.OS === 'ios' ? PERMISSIONS.IOS.LOCATION_WHEN_IN_USE : PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION;
+        const result = await check(permission);
 
         if (result === RESULTS.GRANTED) {
             navigation.reset({
@@ -46,7 +47,7 @@ const LocationPermissionScreen = () => {
         } else {
             handleDeny();
         }
-    }, [navigation, permissionType]);
+    }, [navigation]);
 
     // Recheck permission status when the screen gains focus
     useFocusEffect(
@@ -62,16 +63,16 @@ const LocationPermissionScreen = () => {
                     <Stack alignItems='center' justifyContent='center'>
                         <Image source={require('../../assets/images/isometric-geolocation-1.png')} width={360} height={360} resizeMode='contain' />
                     </Stack>
-                    <Text fontSize='$8' fontWeight='bold' color='$blue500' mb='$2' textAlign='center'>
+                    <Text fontSize='$8' fontWeight='bold' color='$textPrimary' mb='$2' textAlign='center'>
                         Enable Location Services
                     </Text>
-                    <Text color='$gray600' fontSize='$4' textAlign='center' mb='$6'>
+                    <Text color='$textSecondary' fontSize='$4' textAlign='center' mb='$6'>
                         We need your location to provide a better experience. Please enable location access.
                     </Text>
                 </YStack>
             </YStack>
             <YStack space='$3' alignItems='center' bg='$surface' borderColor='$borderColor' borderTop='1px solid' justifyContent='center' padding='$6' paddingBottom='$10'>
-                <Button size='$5' bg='$primary' color='$textPrimary' width='100%' onPress={requestLocationPermission} icon={<FontAwesomeIcon icon={faMapMarkerAlt} color='white' />}>
+                <Button size='$5' bg='$primary' color='$white' width='100%' onPress={requestLocationPermission} icon={<FontAwesomeIcon icon={faMapMarkerAlt} color='white' />}>
                     Share Location
                 </Button>
                 <Button size='$5' bg='$secondary' color='$textSecondary' width='100%' onPress={handleDeny}>
diff --git a/src/screens/LocationPickerScreen.tsx b/src/screens/LocationPickerScreen.tsx
index 688e8fd..cbd4017 100644
--- a/src/screens/LocationPickerScreen.tsx
+++ b/src/screens/LocationPickerScreen.tsx
@@ -8,7 +8,16 @@ import BottomSheet, { BottomSheetView, BottomSheetFlatList } from '@gorhom/botto
 import { Portal } from '@gorhom/portal';
 import { Place } from '@fleetbase/sdk';
 import { useNavigation } from '@react-navigation/native';
-import { geocode, createFleetbasePlaceFromDetails, getLocationFromRouteOrStorage, formattedAddressFromPlace, formatAddressSecondaryIdentifier, getCoordinates } from '../utils/location';
+import {
+    getDefaultCoordinates,
+    geocode,
+    createFleetbasePlaceFromDetails,
+    getLocationFromRouteOrStorage,
+    formattedAddressFromPlace,
+    formatAddressSecondaryIdentifier,
+    getCoordinates,
+} from '../utils/location';
+import { isArray, toBoolean } from '../utils';
 import LocationMarker from '../components/LocationMarker';
 import useStorefront from '../hooks/use-storefront';
 import useCurrentLocation from '../hooks/use-current-location';
@@ -28,11 +37,12 @@ const styles = StyleSheet.create({
 });
 
 const LocationPickerScreen = ({ route }) => {
+    const params = route.params || {};
     const navigation = useNavigation();
     const theme = useTheme();
     const { storefront } = useStorefront();
     const bottomSheetRef = useRef<BottomSheet>(null);
-    const initialLocation = getLocationFromRouteOrStorage('initialLocation', route.params);
+    const initialLocation = getLocationFromRouteOrStorage('initialLocation', params);
     const [latitude, longitude] = getCoordinates(initialLocation);
     const [results, setResults] = useState([]);
     const [mapRegion, setMapRegion] = useState({
@@ -43,6 +53,9 @@ const LocationPickerScreen = ({ route }) => {
     });
     const [isPanning, setIsPanning] = useState(false);
     const snapPoints = useMemo(() => ['35%'], []);
+    const redirectTo = params.redirectTo;
+    const redirectToScreen = params.redirectToScreen;
+    const makeDefault = toBoolean(params.makeDefault);
 
     // Bottom sheet controls
     const openBottomSheet = () => {
@@ -68,12 +81,14 @@ const LocationPickerScreen = ({ route }) => {
     const updateNearbyResults = async ({ latitude, longitude }) => {
         try {
             const results = await geocode(latitude, longitude, { withAllResults: true });
-            setResults(
-                results.map((result) => {
-                    return createFleetbasePlaceFromDetails(result);
-                })
-            );
-            openBottomSheet();
+            if (isArray(results)) {
+                setResults(
+                    results.map((result) => {
+                        return createFleetbasePlaceFromDetails(result);
+                    })
+                );
+                openBottomSheet();
+            }
         } catch (error) {
             console.error('Error fetching nearby locations: ', error);
             toast.error(error.message);
@@ -82,7 +97,7 @@ const LocationPickerScreen = ({ route }) => {
 
     const handleLocationSelect = (place) => {
         closeBottomSheet();
-        navigation.navigate('EditLocation', { place: place.serialize() });
+        navigation.navigate('EditLocation', { place: place.serialize(), redirectTo, redirectToScreen, makeDefault });
     };
 
     const handleMarkerLocationSelect = () => {
@@ -97,11 +112,15 @@ const LocationPickerScreen = ({ route }) => {
             postal_code: geocoded.getAttribute('postal_code'),
             country: geocoded.getAttribute('country'),
         });
-        navigation.navigate('EditLocation', { place: place.serialize() });
+        navigation.navigate('EditLocation', { place: place.serialize(), redirectTo });
     };
 
     useEffect(() => {
         updateNearbyResults(mapRegion);
+
+        return () => {
+            closeBottomSheet();
+        };
     }, []);
 
     return (
@@ -124,10 +143,14 @@ const LocationPickerScreen = ({ route }) => {
                     keyboardBehavior='extend'
                     keyboardBlurBehavior='none'
                     enableDynamicSizing={false}
-                    style={{ flex: 1, padding: 10, width: '100%' }}
+                    enablePanDownToClose={true}
+                    enableOverDrag={false}
+                    style={{ flex: 1, width: '100%' }}
+                    backgroundStyle={{ backgroundColor: theme.surface.val, borderWidth: 1, borderColor: theme.borderColorWithShadow.val }}
+                    handleIndicatorStyle={{ backgroundColor: theme.secondary.val }}
                 >
                     <BottomSheetView style={{ flex: 1 }}>
-                        <YStack>
+                        <YStack px='$3' py='$2'>
                             <Button
                                 onPress={handleMarkerLocationSelect}
                                 size='$4'
diff --git a/src/screens/PhoneLoginScreen.tsx b/src/screens/PhoneLoginScreen.tsx
index 74b0d99..6c2dca7 100644
--- a/src/screens/PhoneLoginScreen.tsx
+++ b/src/screens/PhoneLoginScreen.tsx
@@ -4,7 +4,7 @@ import { SafeAreaView } from 'react-native';
 import { Spinner, Input, Stack, Text, YStack, useTheme, Button } from 'tamagui';
 import { toast, ToastPosition } from '@backpackapp-io/react-native-toast';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
-import { faPaperPlane, faKey } from '@fortawesome/free-solid-svg-icons';
+import { faPaperPlane, faKey, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { isValidPhoneNumber } from '../utils';
 import { useAuth } from '../contexts/AuthContext';
 import PhoneInput from '../components/PhoneInput';
@@ -36,25 +36,44 @@ const PhoneLoginScreen = () => {
         navigation.navigate('Login');
     };
 
+    const handleCreateAccount = () => {
+        navigation.navigate('CreateAccount');
+    };
+
     return (
         <SafeAreaView style={{ flex: 1, backgroundColor: theme.background.val }}>
             <YStack flex={1} alignItems='center' bg='$background' space='$3' padding='$5'>
-                <PhoneInput value={phone} onChange={(phoneNumber) => setPhone(phoneNumber)} />
-                <Button onPress={handleSendVerificationCode} bg='$primary' width='100%' opacity={isSendingCode ? 0.75 : 1} disabled={isSendingCode} rounded>
-                    <Button.Icon>{isSendingCode ? <Spinner color='$white' /> : <FontAwesomeIcon icon={faPaperPlane} color={theme.white.val} />}</Button.Icon>
-                    <Button.Text color='$white' fontWeight='bold'>
-                        Send Verification Code
-                    </Button.Text>
-                </Button>
-
-                <Button onPress={handleUseAnotherMethod} bg='$secondary' width='100%' rounded>
-                    <Button.Icon>
-                        <FontAwesomeIcon icon={faKey} color={theme['gray-500'].val} />
-                    </Button.Icon>
-                    <Button.Text color='$gray-500' fontWeight='bold'>
-                        Login using Another Method
-                    </Button.Text>
-                </Button>
+                <YStack flex={1} space='$2' width='100%'>
+                    <Text color='$textPrimary' fontWeight='bold' fontSize='$8' mb='$3'>
+                        Login via SMS
+                    </Text>
+                    <PhoneInput value={phone} onChange={(phoneNumber) => setPhone(phoneNumber)} />
+                    <Button onPress={handleSendVerificationCode} bg='$primary' width='100%' opacity={isSendingCode ? 0.75 : 1} disabled={isSendingCode} rounded>
+                        <Button.Icon>{isSendingCode ? <Spinner color='$white' /> : <FontAwesomeIcon icon={faPaperPlane} color={theme.white.val} />}</Button.Icon>
+                        <Button.Text color='$white' fontWeight='bold'>
+                            Send Verification Code
+                        </Button.Text>
+                    </Button>
+                </YStack>
+
+                <YStack space='$3' width='100%'>
+                    <Button onPress={handleUseAnotherMethod} bg='$secondary' width='100%' rounded>
+                        <Button.Icon>
+                            <FontAwesomeIcon icon={faKey} color={theme['gray-500'].val} />
+                        </Button.Icon>
+                        <Button.Text color='$gray-500' fontWeight='bold'>
+                            Login using Another Method
+                        </Button.Text>
+                    </Button>
+                    <Button onPress={handleCreateAccount} bg='$indigo-600' width='100%' rounded>
+                        <Button.Text color='$indigo-100' fontWeight='bold'>
+                            Create a new Account
+                        </Button.Text>
+                        <Button.Icon>
+                            <FontAwesomeIcon icon={faArrowRight} color={theme['indigo-100'].val} />
+                        </Button.Icon>
+                    </Button>
+                </YStack>
             </YStack>
         </SafeAreaView>
     );
diff --git a/src/screens/QPayCheckoutScreen.tsx b/src/screens/QPayCheckoutScreen.tsx
index f59424c..83bd78c 100644
--- a/src/screens/QPayCheckoutScreen.tsx
+++ b/src/screens/QPayCheckoutScreen.tsx
@@ -70,7 +70,7 @@ const QPayCheckoutScreen = () => {
                 </YStack>
             </ScrollView>
             <XStack animate='bouncy' position='absolute' bottom={0} left={0} right={0} padding='$5' zIndex={5}>
-                <CheckoutButton onPress={() => paymentSheetRef.current.open()} total={totalAmount} disabled={isNotReady} isLoading={isLoading} />
+                <CheckoutButton onCheckout={() => paymentSheetRef.current.open()} total={totalAmount} disabled={isNotReady} isLoading={isLoading} />
             </XStack>
             <QPayPaymentSheet ref={paymentSheetRef} invoice={invoice} />
         </YStack>
diff --git a/src/screens/StripeCheckoutScreen.tsx b/src/screens/StripeCheckoutScreen.tsx
index 6a1b10c..fabf3b9 100644
--- a/src/screens/StripeCheckoutScreen.tsx
+++ b/src/screens/StripeCheckoutScreen.tsx
@@ -77,7 +77,7 @@ const StripeCheckoutScreen = () => {
                 </YStack>
             </ScrollView>
             <XStack animate='bouncy' position='absolute' bottom={0} left={0} right={0} padding='$5' zIndex={5}>
-                <CheckoutButton onPress={handleCompleteOrder} total={totalAmount} disabled={isNotReady} isLoading={isLoading} />
+                <CheckoutButton onCheckout={handleCompleteOrder} total={totalAmount} disabled={isNotReady} isLoading={isLoading} />
             </XStack>
         </YStack>
     );
diff --git a/src/utils/checkout.js b/src/utils/checkout.js
index 2fb7c11..eb92512 100644
--- a/src/utils/checkout.js
+++ b/src/utils/checkout.js
@@ -6,7 +6,7 @@ export async function getServiceQuote(storeLocation, customerLocation, cart) {
     const quote = new DeliveryServiceQuote(storefrontAdatper);
 
     try {
-        const serviceQuote = await quote.fromCart(storeLocation, customerLocation, cart);
+        const serviceQuote = await quote.fetchServiceQuotesFromCart(storeLocation, customerLocation, cart);
         return serviceQuote;
     } catch (error) {
         console.error('Error fetching service quote:', error);
diff --git a/src/utils/location.js b/src/utils/location.js
index 1a1249d..c0fbea7 100644
--- a/src/utils/location.js
+++ b/src/utils/location.js
@@ -15,8 +15,8 @@ import axios from 'axios';
 Geolocation.setRNConfiguration({
     authorizationLevel: 'whenInUse',
     enableBackgroundLocationUpdates: false,
-    locationProvider: 'auto'
-})
+    locationProvider: 'auto',
+});
 
 const emit = EventRegister.emit;
 
@@ -24,7 +24,13 @@ export function createGoogleAddress(...args) {
     return new GoogleAddress(...args);
 }
 
-export async function geocode(latitude: number, longitude: number, options = {}) {
+export async function geocode(latitude, longitude, options = {}) {
+    if (!latitude || !longitude) {
+        const fallbackCoordinates = getDefaultCoordinates();
+        latitude = fallbackCoordinates.latitude;
+        longitude = fallbackCoordinates.longitude;
+    }
+
     try {
         const response = await axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
             params: {
@@ -52,7 +58,7 @@ export async function geocode(latitude: number, longitude: number, options = {})
         console.error('Geocoding error:', error);
         return null;
     }
-};
+}
 
 export async function geocodeAutocomplete(input, coordinates = null) {
     try {
@@ -73,14 +79,14 @@ export async function geocodeAutocomplete(input, coordinates = null) {
         });
 
         // Extract predictions from response
-        const predictions = response.data.predictions.map(prediction => {
+        const predictions = response.data.predictions.map((prediction) => {
             const segments = parseAutocompleteAddress(prediction.description);
 
             return {
                 description: prediction.description,
                 place_id: prediction.place_id,
-                ...segments
-             };
+                ...segments,
+            };
         });
 
         return predictions;
@@ -98,8 +104,8 @@ export async function getPlaceDetails(placeId) {
                 place_id: placeId,
                 key: config('GOOGLE_MAPS_KEY'),
                 // You can include 'fields' to limit the data retrieved or omit it for all available details
-                fields: 'name,formatted_address,geometry,place_id,types,international_phone_number,website,address_components'
-            }
+                fields: 'name,formatted_address,geometry,place_id,types,international_phone_number,website,address_components',
+            },
         });
 
         // Handle API response
@@ -134,8 +140,8 @@ export function createFleetbasePlaceFromDetails(details, meta = {}) {
         meta: {
             ...meta,
             coordinates: [placeObject.latitude, placeObject.longitude],
-            location: addressObject.others
-        }
+            location: addressObject.others,
+        },
     };
 
     return new Place(attributes, adapter);
@@ -174,7 +180,7 @@ export function restoreFleetbaseStoreLocation(data) {
     if (isResource(data)) {
         if (data.place) {
             data.place = restoreFleetbasePlace(data.place);
-        } 
+        }
 
         return data;
     }
@@ -183,7 +189,7 @@ export function restoreFleetbaseStoreLocation(data) {
     if (isSerializedResource(data)) {
         if (data.place) {
             data.place = restoreFleetbasePlace(data.place);
-        } 
+        }
 
         return new StoreLocation(data, storefrontAdapter);
     }
@@ -191,8 +197,8 @@ export function restoreFleetbaseStoreLocation(data) {
     // If POJO resource object
     if (isPojoResource(data)) {
         if (data.attributes && data.attributes.place) {
-            data.attributes.place = restoreFleetbasePlace(data.attributes/place);
-        } 
+            data.attributes.place = restoreFleetbasePlace(data.attributes / place);
+        }
 
         return new StoreLocation(data.attributes, storefrontAdapter);
     }
@@ -206,7 +212,7 @@ export function restoreFleetbaseStoreLocation(data) {
         if (data.place) {
             data.place = restoreFleetbasePlace(data.place);
         }
-        
+
         return new StoreLocation(data, storefrontAdapter);
     }
 
@@ -228,20 +234,12 @@ export function formattedAddressFromPlace(place) {
 }
 
 export function formattedAddressFromSerializedPlace(place) {
-    const segments = [
-        place.street1,
-        place.street2,
-        place.neighborhood,
-        place.city,
-        place.state,
-        place.postal_code,
-        place.country,
-    ];
+    const segments = [place.street1, place.street2, place.neighborhood, place.city, place.state, place.postal_code, place.country];
 
     return segments.filter(Boolean).join(', ');
 }
 
-export function formatAddressSecondaryIdentifier (place) {
+export function formatAddressSecondaryIdentifier(place) {
     if (place.getAttribute('building')) {
         return `Building: ${place.getAttribute('building')}`;
     }
@@ -253,23 +251,23 @@ export function formatAddressSecondaryIdentifier (place) {
     if (place.getAttribute('postal_code')) {
         return `Postal Code: ${place.getAttribute('postal_code')}`;
     }
-};
+}
 
-export function serializGoogleAddress (googleAddress) {
+export function serializGoogleAddress(googleAddress) {
     let attributes = {};
 
     if (googleAddress instanceof GoogleAddress || typeof googleAddress.all === 'function') {
         attributes = googleAddress.all();
     } else if (typeof googleAddress.toArray === 'function') {
         attributes = googleAddress.toArray();
-    }else if (isObject(googleAddress.attributes)) {
-        attributes =googleAddress.attributes;
+    } else if (isObject(googleAddress.attributes)) {
+        attributes = googleAddress.attributes;
     }
 
     return attributes;
 }
 
-export async function getLiveLocation () {
+export async function getLiveLocation() {
     return new Promise((resolve) => {
         Geolocation.getCurrentPosition(
             async (position) => {
@@ -299,9 +297,9 @@ export async function getLiveLocation () {
             { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
         );
     });
-};
+}
 
-export async function getCurrentLocation () {
+export async function getCurrentLocation() {
     const lastLocation = restoreFleetbasePlace(storage.getMap('_current_location'));
 
     return new Promise((resolve) => {
@@ -334,16 +332,17 @@ export async function getCurrentLocation () {
             { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
         );
     });
-};
+}
 
-export function getLastKnownPosition () {
+export function getLastKnownPosition() {
     return storage.getArray('_last_known_position') ?? [0, 0];
 }
 
 // NOTICE: when fleetbase returns a geojson point the coordinates will always be in order of [longitude, latitude]
-export function getCoordinates  (target, options = { fallback: [0, 0] })  {
+export function getCoordinates(target, options = {}) {
+    const { latitude: fallbackLatitude, longitude: fallbackLongitude } = getDefaultCoordinates();
     if (!target) {
-        return [];
+        return [fallbackLatitude, fallbackLongitude];
     }
 
     if (isResource(target, 'place')) {
@@ -357,8 +356,11 @@ export function getCoordinates  (target, options = { fallback: [0, 0] })  {
     }
 
     if (isPojoResource(target) && target.resource === 'place') {
-        const [longitude, latitude] = typeof target.getAttribute === 'function' ? (target.getAttribute('location').coordinates ?? fallback) : (target.attributes?.location?.coordinates ?? fallback);
-        return [latitude, longitude]
+        const [longitude, latitude] =
+            typeof target.getAttribute === 'function'
+                ? (target.getAttribute('location').coordinates ?? [fallbackLatitude, fallbackLongitude])
+                : (target.attributes?.location?.coordinates ?? [fallbackLatitude, fallbackLongitude]);
+        return [latitude, longitude];
     }
 
     if (isPojoResource(target) && isObject(target.attributes.place) && target.resource === 'store-location') {
@@ -368,14 +370,14 @@ export function getCoordinates  (target, options = { fallback: [0, 0] })  {
     if (isSerializedResource(target)) {
         if (isObject(target.location)) {
             const [longitude, latitude] = target.location.coordinates;
-            return [latitude, longitude]
+            return [latitude, longitude];
         }
 
         if (isObject(target.place)) {
             return getCoordinates(target.place);
         }
 
-        return fallback;
+        return [fallbackLatitude, fallbackLongitude];
     }
 
     if (isArray(target)) {
@@ -390,19 +392,19 @@ export function getCoordinates  (target, options = { fallback: [0, 0] })  {
         return [target.latitude, target.longitude];
     }
 
-    return fallback;
-};
+    return [fallbackLatitude, fallbackLongitude];
+}
 
-export function getPlaceCoords (place) {
+export function getPlaceCoords(place) {
     const [latitude, longitude] = getCoordinates(place);
     return { latitude, longitude };
-};
+}
 
-export function getDistance (origin, destination) {
+export function getDistance(origin, destination) {
     const originCoordinates = getCoordinates(origin);
     const destinationCoordinates = getCoordinates(destination);
     return haversine(originCoordinates, destinationCoordinates);
-};
+}
 
 export function getLocationName(place) {
     if (isObject(place)) {
@@ -415,12 +417,12 @@ export function getLocationName(place) {
     }
 
     return 'Uknown Location';
-};
+}
 
 export function getLocationFromRouteOrStorage(key, routeParams = {}) {
     let location;
     const locationFromParams = routeParams[key];
-    const lastKnownLocation = storage.getMap('_last_known_location')
+    const lastKnownLocation = storage.getMap('_last_known_location');
     const currentLocation = storage.getMap('_current_location');
     const localLocations = storage.getArray('_local_locations');
     const customerLocations = storage.getArray('_customer_locations');
@@ -433,7 +435,7 @@ export function getLocationFromRouteOrStorage(key, routeParams = {}) {
         location = currentLocation;
     } else if (isArray(customerLocations) && customerLocations.length) {
         location = customerLocations[0];
-    }else if (isArray(localLocations) && localLocations.length) {
+    } else if (isArray(localLocations) && localLocations.length) {
         location = localLocations[0];
     }
 
@@ -451,7 +453,7 @@ export function parsePlaceDetails(details) {
         neighborhood: null,
         building: null,
         latitude: null,
-        longitude: null
+        longitude: null,
     };
 
     if (!details || !details.address_components) {
@@ -936,4 +938,13 @@ export function parseAutocompleteAddress(description = '') {
     });
 
     return result;
-}
\ No newline at end of file
+}
+
+export function getDefaultCoordinates() {
+    const DEFAULT_LATITUDE = 1.369;
+    const DEFAULT_LONGITUDE = 103.8864;
+    const DEFAULT_COORDINATES = config('DEFAULT_COORDINATES', `${DEFAULT_LATITUDE},${DEFAULT_LONGITUDE}`);
+    const [latitude, longitude] = DEFAULT_COORDINATES.split(',');
+
+    return { latitude, longitude };
+}