> For the complete documentation index, see [llms.txt](https://e-commero.gitbook.io/ecommero/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://e-commero.gitbook.io/ecommero/customer-app/components.md). # Components ## Components * [App](/ecommero/customer-app/components.md#app) * [SignUp](/ecommero/customer-app/components.md#signup) * [SignIn](/ecommero/customer-app/components.md#signin) * [MainLanding](/ecommero/customer-app/components.md#mainlanding) * [ProductListing](/ecommero/customer-app/components.md#productlisting) * [ProductDescription](/ecommero/customer-app/components.md#productdescription) * [ShoppingCart](/ecommero/customer-app/components.md#shoppingcart) * [Payment](/ecommero/customer-app/components.md#payment) * [PreviousOrders](/ecommero/customer-app/components.md#previousorders) * [Review](/ecommero/customer-app/components.md#review) * [Profile](/ecommero/customer-app/components.md#profile) * [Addresses](/ecommero/customer-app/components.md#addresses) * [OrderDetail](/ecommero/customer-app/components.md#orderdetail) ### App * Location: The UI can be found under `src/App.js` * Working: Configures Fonts, Push Notification, Apollo, Authentication and Navigation. * Result: Everything is configured loads the next view depending on if the user is authenticated or not. If the user is not authenticated will show tutorial screen first else it will show Menu Screen. ### SignUp * Location: The UI can be found under `src/screens/SignUp/SignUp.js` Its [mutation](https://graphql.org/learn/queries/#mutations) can be found under `src/apollo/server.js` with constant `createUser` * Working: Registers User using Google or Manual Registration * Result: An auth token is generated with other information (name, phone ,email) on backend and sent backend to frontend. ### SignIn * Location: The UI can be found under `src/screens/SignIn/SignIn.js` Its [mutation](https://graphql.org/learn/queries/#mutations) can be found under `src/apollo/server.js` with constant `login` * Working: Logins User using Google or Manual Registration. A separate component for ForgotPassword is also present its component can be found `src/components/SignIn/ForgotPassword` Its [mutation](https://graphql.org/learn/queries/#mutations) can be found under `src/apollo/server.js` with constant `forgotPassword` * Result: Logins User with validation. If a user uses forgotPassword an email will be sent to him with reset link for changing his/her password. ### MainLanding * Location: The UI can be found under `src/screens/MainLanding/MainLanding.js` Its [query](https://graphql.org/learn/queries/) can be found under `src/apollo/server.js` with constant `categories` & `products` * Result: Fetches categories and products ### ProductListing * Location: The UI can be found under `src/screens/ProductListing/ProductListing.js` Its mutations and queries can be found under `src/apollo/server.js` with constant `foods` and `src/apollo/client.js` with constants `categoryProduct` * Working: Constants `categoryProduct` is a query which return all the product in specific category. * Result: `product` is queried with the selected category in the previous screen. ### ProductDescription * Location: The UI can be found under `src/screens/ProductDescription/ProductDescription.js` Its mutations and queries can be found under `src/apollo/server.js` with constant `productReviews` and `src/apollo/server.js` with constant and `product` * Working: Constants `productReviews` and `product` return the product details including reviews, attributes, description and availability in stock. ### ShoppingCart * Location: The UI can be found under `src/screens/ShoppingCart/ShoppingCart.js` It has Apollo constants of `productById`located at `src/apollo/server.js` * Working: Constant `profile`is a type of query that gets user details and login details. * Result: The `profile`is used to get the user login status and details. ### Payment * Location: The UI can be found under `src/screens/Payment/Payment.js` It has Apollo constants `placeOrder`located at `src/apollo/server.js` Its a mutation. * Working: Constant `placeOrder` send the details to the server with item delivery address payment status and user profile. * Result: User payment is made by selecting either Paypal or Stripe. If the selected option is Cash on delivery payment is not made and the status of the payment is still pending. Its status is changed from the admin panel. An email is also sent to the user with the order detail information. ### PreviousOrders * Location: The UI can be found under `src/screens/PreviousOrders/PreviousOrders.js` It has Apollo constant of `myOrders` located at `src/apollo/server.js` its of type query * Result: All the users orders are queried with an option to reorder it for the user. ### Review * Location: The UI can be found under `src/screens/Review/Review.js` It has Apollo constant of `reviewOrder` its of type mutation * Result: The user can give ratings with stars for his order made. ### Profile * Location: The UI can be found under `src/screens/EditingProfile/EditingProfile.js` It has Apollo constants of `updateUser` , `profile` and `getProfile` . Constants `updateUser` and `profile` are located in `src/apollo/server.js` * Working: `updateUser` is of type mutation where the user information is updated. `profile` is of type query where the user profile is queried. * Result: User profile is updated. All the fields in settings are required to place order. ### Addresses * Location: The UI can be found under `src/screens/AddressList/AddressList.js` It has Apollo constants of `profile` its of type query located in `src/apollo/client.js` * Results: `profile.addresses` gets all the address that the user added in addresses list. ### OrderDetail * Location: The UI can be found under `src/screens/OrderDetail/OrderDetail.js` It has Apollo constants of `myOrder.` * Working: `myOrders` has all the details for item as well as the status of the order based on the status the timeline is rendered dynamically