<p>
  </a>
</p>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://fleetbase.io">fleetbase.io</a> | <a rel="nofollow noopener" target="_blank" href="https://twitter.com/fleetbase_io">@fleetbase_io</a> | <a rel="nofollow noopener" target="_blank" href="https://discord.gg/fjP4sReEvH">Discord</a>
</p>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815361-ba85b208-e92b-4470-bba3-f87dde747a40.png"></a><br /> <a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815221-b704d013-cc5d-41c3-9fde-36ca7af21a57.png"></a><br /> <a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815186-b641a613-4aba-4064-ba28-4e610aba56b4.png"></a>
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-table-of-contents" class="anchor" aria-hidden="true" href="#table-of-contents"></a>Table of Contents
</h2>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="#about">About</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#use-cases">Use cases</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#screenshots">Screenshots</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="#prerequisites">Prerequisites</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="#installation">Installation</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#configure-environment">Configure Environment</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#running-in-simulator">Running in Simulator</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#run-the-app-in-ios-simulator">Run the app in iOS Simulator</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#run-the-app-in-android-simulator">Run the app in Android Simulator</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#push-notifications">Push Notifications</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#apns-push-notifications">APNS Push Notifications</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#fcm-push-notifications">FCM Push Notifications</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#generate-assets">Generate Assets</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="#configuration">Configuration</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#appconfig">Application Configuration</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#uiconfig">Interface Configuration</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#internationalization-and-translations">Internationalization and Translations</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#internationalization">Internationalization</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#translations">Translations</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#payment-gateways">Payment Gateways</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#stripe">Stripe</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#store-locations">Store Locations</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#store-hours">Store Hours</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#multi-vendor">Multi-Vendor</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#creating-a-network">Creating a network</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#inviting-to-network">Inviting to network</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#configuring-network">Configuring network</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#launch-network-on-app">Launch network on app</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#cart">Cart</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="#customer-authentication">Customer Authentication</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#creating-a-customer-account">Creating a customer account</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#logging-in-a-customer">Logging in a customer</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#delivery-service-rates">Delivery/ Service Rates</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#location-based-quote">Location based quote</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#checkout">Checkout</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#creating-a-checkout-token">Creating a checkout token</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#capture-checkout">Capture checkout</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#driver-agent-app">Driver/Agent App</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#proof-of-delivery">Proof of delivery</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#orders">Orders</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#auto-accept-orders">Auto-accept orders</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#manually-accept-orders">Manually accept orders</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#auto-assign-orders">Auto-assign orders</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#manually-assign-orders">Manually assign orders</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#documentation">Documentation</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="#roadmap">Roadmap</a>
  </li>
</ul>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-about" class="anchor" aria-hidden="true" href="#about"></a>About
</h3>

<p>
  Storefront is a headless e-commerce service which functions as an extension within <a rel="nofollow noopener" target="_blank" href="https://fleetbase.io">Fleetbase</a>. Similarly to how <a rel="nofollow noopener" target="_blank" href="https://fleetbase.io/developers">Fleetbase is a headless logistics service</a>. <a rel="nofollow noopener" target="_blank" href="https://fleetbase.io/products/storefront">Fleetbase Storefront</a> provides several API-first approaches to products, carts, categories, customers, and checkout flow giving developers more control over the shopping experience. This project is to provide an open-sourced hyperlocal shopping app which can be fully customised and adapted to personal and commercial projects. This Storefront app is built with <a rel="nofollow noopener" target="_blank" href="https://reactnative.dev/">React Native</a> to provide react native developers a head start building with Fleetbase and Storefront.<br /> Notice: Network/ Multi-vendor functionality is still a work in progress.
</p>

<h4 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-use-cases" class="anchor" aria-hidden="true" href="#use-cases"></a>Use Cases
</h4>

<ul dir="auto">
  <li>
    Food delivery app
  </li>
  <li>
    Services booking app
  </li>
  <li>
    Hyperlocal shopping app
  </li>
  <li>
    Hyperlocal marketplace app
  </li>
  <li>
    Alcohol delivery app
  </li>
  <li>
    Cannabis delivery app
  </li>
  <li>
    Lawn care booking app
  </li>
  <li>
    Transportation booking app
  </li>
  <li>
    and much more&#8230;
  </li>
</ul>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-screenshots" class="anchor" aria-hidden="true" href="#screenshots"></a>Screenshots
</h3>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815346-1bb2e157-ce13-45b5-b12c-f8c7c2311036.png">Products Page</a><a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815361-ba85b208-e92b-4470-bba3-f87dde747a40.png">Search Products</a><a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815370-a1fbde68-4ecd-4d06-a097-5ad20fb45933.png">Product</a>
</p>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815309-9eafb08f-6bd8-4e6e-91a0-2fd949e15ed9.png">Cart</a><a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815232-d3a91394-0cce-4e1e-af0b-a0552eb44acb.png">Add Payment Method</a><a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815221-b704d013-cc5d-41c3-9fde-36ca7af21a57.png">Checkout</a>
</p>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815192-fa46545a-1ae1-4eb5-af81-6309e6ffc580.png">Order Placed</a><a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815197-cbd36d7a-3237-4a73-aba0-e949c551010a.png">Order Preparing</a><a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815168-52341b30-750b-459b-ad7d-4801a151b3b7.png">Order Driver Assigned</a><a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815186-b641a613-4aba-4064-ba28-4e610aba56b4.png">Order Driver Enroute</a>
</p>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815273-7fe80511-7ce5-43e4-88c2-3a1cbe8c7d61.png">Add Address</a><a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815288-26c3a3a0-13c6-4f4c-b5d9-f46ee7448fbd.png">Add Address 2</a><a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/816371/131815292-30904979-fc66-4dbd-95e2-ac247d0ceaac.png">Saved Address</a>
</p>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-prerequisites" class="anchor" aria-hidden="true" href="#prerequisites"></a>Prerequisites
</h3>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://yarnpkg.com/">Yarn</a> or <a rel="nofollow noopener" target="_blank" href="https://nodejs.org/en/">NPM</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://reactnative.dev/docs/environment-setup">React Native CLI</a>
  </li>
  <li>
    Xcode 12+
  </li>
  <li>
    Android Studio
  </li>
</ul>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-installation" class="anchor" aria-hidden="true" href="#installation"></a>Installation
</h3>

<p>
  Installation and setup is fairly quick, all you need is your Storefront and Fleetbase API Key, and a few commands and your app will be up and running in minutes. Follow the directions below to get started.<br /> 📺 If you like videos better, <a rel="nofollow noopener" target="_blank" href="https://youtu.be/ERsO0lNufRI">here is a walkthrough video</a>.<br /> Notice: Ideally you should fork this project so it&#8217;s easier to merge updates in the future, but you can also clone this project &#8211; whichever method works best for you.<br /> Run the commands below; first clone the project, use npm or yarn to install the dependencies, then run <code>npx pod-install</code> to install the iOS dependencies. Lastly, create a <code>.env</code> file to configure the app.
</p>

<pre class="notranslate"><code>git clone git@github.com:fleetbase/storefront-app.git

cd storefront-app yarn npx pod-install touch .env

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-configure-environment" class="anchor" aria-hidden="true" href="#configure-environment"></a>Configure Environment
</h3>

<p>
  Below is the steps needed to configure the environment. The first part covers collecting your required API keys.
</p>

<ol dir="auto">
  <li>
    Get your API Keys;
  </li>
  <li>
    <strong>If you don&#8217;t have a Fleetbase account already</strong> proceed to the <a rel="nofollow noopener" target="_blank" href="https://console.fleetbase.io/">Fleetbase Console</a> and click &#8220;Create an account&#8221;, complete the registration form and you will be taken to the console.
  </li>
  <li>
    Once you&#8217;re in the Fleetbase console select the &#8220;Developers&#8221; button in the top navigation. Next, select API Keys from the menu in the Developers section, and create a new API key. Copy your secret key generated, you&#8217;ll need it later.
  </li>
  <li>
    Now, proceed to Storefront by clicking the &#8220;Storefront&#8221; button in the top navigation. If you don&#8217;t have a Store setup already you will be prompted to create one. Once you have your store created proceed to Settings where you will find an &#8220;API&#8221; tab with your &#8220;Store key&#8221;, copy this you&#8217;ll need it next. (It&#8217;s not necessary to put much thought into your first store, you&#8217;ll be able to create as many as you need later).
  </li>
  <li>
    Once you have both required API keys open your <code>.env</code> file.
  </li>
</ol>

<p>
  In your <code>.env</code> file supply your Storefront store key, your Fleetbase API secret key, and additionally you will need a Google Maps API Key. Currently the Storefront app can only use the Stripe payment gateway, to use the Stripe gateway you will also need to plug in your Stripe API Key. Lastly, you&#8217;ll also need to supply your app/bundle identifier, and an <code>APP_NAME</code> key.<br /> Your <code>.env</code> file should look something like this once you&#8217;re done.
</p>

<pre class="notranslate"><code># .env

APP_NAME= APP_IDENTIFIER= STOREFRONT_KEY= FLEETBASE_KEY= GOOGLE_MAPS_KEY= STRIPE_KEY=

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-running-in-simulator" class="anchor" aria-hidden="true" href="#running-in-simulator"></a>Running in Simulator
</h3>

<p>
  Once you have completed the installation and environment configuration, you&#8217;re all set to give your app a test-drive in the simulator so you can play around.
</p>

<h4 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-run-the-app-in-ios-simulator" class="anchor" aria-hidden="true" href="#run-the-app-in-ios-simulator"></a>Run the App in iOS Simulator
</h4>

<pre class="notranslate"><code>npx react-native run-ios

<h4 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-run-the-app-in-android-simulator" class="anchor" aria-hidden="true" href="#run-the-app-in-android-simulator"></a>Run the App in Android Simulator
</h4>

<pre class="notranslate"><code>npx react-native run-android

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-push-notifications" class="anchor" aria-hidden="true" href="#push-notifications"></a>Push Notifications
</h3>

<p>
  Push Notifications are essential to providing your customer with updates about their orders. Fleetbase has configurable order flows, but includes default but customisable order flows which include push notifications to customers throughout their order lifecycle. Below we will walk through configuring Push Notifications for your app. By default Fleetbase uses APNS and FCM push notification channels. If you&#8217;d like to have a 3rd party channel introduced feel free to submit the request in Issues.
</p>

<h4 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-apns-push-notifications" class="anchor" aria-hidden="true" href="#apns-push-notifications"></a>APNS Push Notifications
</h4>

<p>
  To setup APNS you&#8217;ll need to enable push notifications from Xcode from the &#8220;Signing & Capabilities&#8221; tab, more information about <a rel="nofollow noopener" target="_blank" href="https://developer.apple.com/documentation/usernotifications/registering_your_app_with_apns">setting up push notifications can be found from the Apple documentation here</a>. Once you&#8217;re setup, you&#8217;ll need to login to the <a rel="nofollow noopener" target="_blank" href="https://console.fleetbase.io">Fleetbase Console</a> and proceed to Storefront and in your settings click the &#8220;Notifications&#8221; tab. Follow the steps below to complete APNS setup.
</p>

<ol dir="auto">
  <li>
    <strong>From the &#8220;Notifications&#8221; tab in Storefront settings;</strong> click the &#8220;New Channel&#8221; button.
  </li>
  <li>
    A dialog will appear, and prompt you to select a channel from the dropdown. Select &#8220;Apple push notification service (apn)&#8221; a configuration form will appear.
  </li>
  <li>
    In the form you will need to provide the following: <strong>Key id</strong>, <strong>Team id</strong>, <strong>App bundle id</strong>, <strong>Private key content</strong> and there will be the option to toggle Production or not.<br /> 4. <strong>Key id</strong> is generated when you create your APN key from your apple developer account, this can also be found in this section.<br /> 5. <strong>Team id</strong> can be found in your apple developer account under the &#8220;Membership&#8221; section.<br /> 6. <strong>App bundle id</strong> is your app bundle identifier, you can find this in Xcode, but it should also be the same as the <code>APP_BUNDLE_IDENTIFIER</code> set in your <code>.env</code> file.<br /> 7. <strong>Private key content</strong> Once you&#8217;ve downloaded your APNS cert file you can open this in any text editor and copy the contents.
  </li>
  <li>
    Click &#8220;Create Notification Channel&#8221;
  </li>
  <li>
    That&#8217;s it, you&#8217;re all set. Now when orders go through Fleetbase will be able to send push notifications to your iOS app.
  </li>
</ol>

<h4 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-fcm-push-notifications" class="anchor" aria-hidden="true" href="#fcm-push-notifications"></a>FCM Push Notifications
</h4>

<p>
  FCM Push Notifications or &#8220;Firebase Cloud Messaging&#8221; notifications are simple to setup and configure. Proceed to <a rel="nofollow noopener" target="_blank" href="https://console.firebase.google.com/">Firebase console</a> and create a project for your app. Once you have a project setup click into &#8220;Project settings&#8221; next to &#8220;Project Overview&#8221; from the navigation. in the &#8220;Your apps&#8221; section click &#8220;Add app&#8221;, and add an android app. Once done, everything you need to plug into Fleetbase can be found here, follow the steps below to complete FCM setup.
</p>

<ol dir="auto">
  <li>
    <strong>From the &#8220;Notifications&#8221; tab in Storefront settings;</strong> click the &#8220;New Channel&#8221; button.
  </li>
  <li>
    A dialog will appear, and prompt you to select a channel from the dropdown. Select &#8220;Firebase cloud messaging (fcm)&#8221; a configuration form will appear.
  </li>
  <li>
    In the form you will need to provide the following: <strong>Firebase credentials json</strong>, <strong>Firebase database url</strong>, and <strong>Firebase project name</strong>.<br /> 4. <strong>Firebase credentials json</strong> Download google-services.json and copy the json contents into this box.<br /> 5. <strong>Firebase database url</strong> This will most likely be <code>https://&lt;your-project&gt;.firebaseio.com</code> &#8211; replace <code>&lt;your-project&gt;</code> with your firebase project id.<br /> 6. <strong>Firebase project name</strong> This is just your firebase project name, it should be dasherized.
  </li>
  <li>
    Click &#8220;Create Notification Channel&#8221;
  </li>
  <li>
    That&#8217;s it, you&#8217;re all set. Now when orders go through Fleetbase will be able to send push notifications to your android app.
  </li>
</ol>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-generate-assets" class="anchor" aria-hidden="true" href="#generate-assets"></a>Generate Assets
</h3>

<p>
  We&#8217;ve tried to make it as easy as possible to generate your app assets such as the launch screen and the app icon, to make it one less tedious task. In order to use the app icon and launch screen asset generators follow the steps below.
</p>

<ol dir="auto">
  <li>
    First you&#8217;ll need to add your app icon to the <code>/assets/</code> directory with the filename <code>app-icon.png</code>. (The best size for the app icon is 1024&#215;1024)
  </li>
  <li>
    Next for your launch screen you&#8217;ll need to add your launch screen file to the <code>/assets/</code> directory using the filename <code>splash-screen.png</code>
  </li>
</ol>

<p>
  Once those two steps are done, you can then generate your app icon and launch screen automatically for both iOS and Android.
</p>

<pre># Generate App Icon

yarn generate-app-icon