📄 Home

In home page, you can see the showcases and products. You can also add products to your cart.

ℹ️ Info

• In home page, we have 4 API calls in Promise. All of them are asynchronous.

  • Showcase API call, which returns a list of showcases.

  • Product API call, which returns a list of products.

  • Banner API call, which returns a list of banners.

  • Categories API call, which returns a list of categories.

💡 Tips

• We recommend you to call the API calls in onShow event. onLoad is best for the set up of the UI and lists. You can face some UI issues if you call the API calls in onLoad event.

• We create a initialized variable to check if the API calls are done and prevent the call of the API calls again.

• We use Processors for the create dynamic ListView UI elements.

• For Banners, we set dynamic height based on the screen width.

📄 Product Detail

In product detail page, you can see the product details. You can also add the product to your cart and favorite the product.

ℹ️ Info

• In product detail page, we have product API call based on the product id.

• In reviews page, If user logged in, user can be review the product.

• In nutrition page, User can be see the nutrition information.

• We use SwipeView for the product images. FlSwipeView is a wrapper of SwipeView and it is used to create a swipe view.

• We use the share button to share the product. When someone click the share button, we will open the share dialog.

• If someone click the shared link, we will open the product detail page. We do it by using Deeplink.

• You can look at the deeplink.ts for specific deeplink implementation.

---

📄 Categories (Explorer)

In categories (explorer) page, you can see the categories

ℹ️ Info

• In categories (explorer) page, we have API call for the get categories.

  • We use GridView to list the categories.

  • We use waitDialog to show the loading while the API call is running.

⚠️ Caution

• We have workaround on this page to due to the Theme issue.

  •         if (System.OS === System.OSType.ANDROID) {
          //Android item widths fails after theme change this fixes it
          themeService.onChange(() => {
              this.categoriesGrid.itemCount = this.categories.length;
              this.categoriesGrid.refreshData();
          });
      }
    

👉 Dialog

📄 Category Detail

In category detail page, you can see the products in the category. You can also add products to your cart and search products with the search bar on the top right corner.

ℹ️ Info

• In category detail page, we have API call for the get products in the category.

  • We use ListView to list the products.

  • We use waitDialog to show the loading while the API call is running.

  • This page also serves Showcases products along with the products in the category.

• If category or showcases are empty, we show a Empty Item in the list.

💡 Tips

• this.route.getState().routeData.isShowcase is used to check if the products are Showcase products.

  • If it is Showcase products, we show the showcase products in the category detail page.

  • If it is Category products, we show the products in the category detail page.

---

📄 Cart

In cart page, you can see the products in your cart. You can also remove products from your cart and set the quantity of the products.

ℹ️ Info

• We use Processors for the create dynamic ListView for the list of products in the cart.

• We use state to store the products in the cart. On every change of the state, we update the UI and checkout price of the products.

💡 Tips

• In onShow event, we use store.subscribe event:

  • To get state changes from the store, and change the UI accordingly.

---

📄 Favorites

In favorites page, you can see the products in your favorites. You can also remove products from your favorites.

ℹ️ Info

• We use Processors for the create dynamic ListView for the list of products in the favorites.

• We use state to set and get the products in the favorites.

• We use ListView Swipe to remove products from the favorites.

• If favorites are empty, we show a Empty Item in the list.

---

📄 Account

In account page, you can see the account information. You can also change the account information and Login/Logout.

ℹ️ Info

• We use Processors for the create dynamic ListView for the list of account menu.

• We use state to get is the user logged in or not. Based on the state, we show the login/logout button.

Settings

In settings page, you can change the theme.

ℹ️ Info

• This page is singleton to avoid the create theme instance every time.

👉 Dialog

---

Routes

We seperate the routes into two parts:

• Auth.ts
• Tabbar.ts

They are used to handle the authentication and tabbar and merge them into one file named index.ts in the /scripts/routes folder.

Tabbar

• We use Tabbar to create the tabbar.

• Someof pages are modal and stack on top of the other.

  • pgProductDetail is modal.
  • pgCategoryDetail is modal.

• In Tabbar.ts, we watch the basketCounter state to update the Cart tabbar badge.

👉 Tabbar

👉 Pages

---

Auth

In Auth.ts, route is used Login and Signup pages.

---

🔐 Login and Signup

Login

• pgLogin is used to login. There is a Login button on the page. When the user click the button, we call the login method in the Auth.ts service.

  • There is simple validate for the password and email.

  • There is a regex to validate the email.

Signup

• pgSignup is used to signup. There is a Signup button on the page. When the user click the button, we call the signup method in the commerce.ts service.

  • There is simple validate for the password and email.

  • There is a regex to validate the email.

  • We use AttributedString to create signup terms and conditions text.

👉 TextView

Basics of the App

ℹ️ Info

• We use textStyleCatalog to set the text style for the text in the app.

• We defined types in the types.ts file.

• We use Redux to store the state of the app and actions. For more information, please refer to the Redux documentation.

• We use listViewItemTypes.ts to define the type of the listview items and use them in the Processors for the create dynamic ListView.

• We use Processors for the create dynamic ListView.

• setTextDimentions.ts is used to set the text dimentions dynamically.

• waitDialog.ts is used to show the loading while the API call is running.

• scripts/service Folder is used to store the services:

  • commerce.ts is used to call the API's.

  • auth.ts is used to handle the authentication.

  • index.ts is used to create http service call object.

  • token.ts is used to store the token and user information.