Responsive Web Pages For GPS Tracker

Requirement 

1) A GPS tracker can only setup and activated through the mobile app, not through the web portal.

2) The mobile app will require the user to be logged in prior to setting up a GPS tracker.

3) During the GPS setup flow, the mobile app prompts the user to point the phone’s camera at a QR code on the back of the GPS tracker’s housing.

4) This QR code contains the GPS tracker’s IMEI and ICCID, which are capture by the mobile app.

5) The mobile app then calls into the Netsuite server side code to start collecting details on the service type, plan, billing info, etc.

6) This call should be similar to this: https://dev.dashboard.hyperion-global.com?imeiid=XYZ&iccid=ABC

7) Once the mobile app makes that initial call to start the setup flow in Netsuite server side code, that code should return a series of mobile friendly/responsive web pages.

8) These pages are, in order, as follows (see attached)

– Region Selection – this will set the currency and base rates.  For now, USA is the only option

– Service Selection

– Plan Selection

9) The next web page will be collecting user information:

– Full Name

– Billing Address (street number/name, apt #, town/city, state/province, zip code) – this is necessary for computing all taxes/fees.

10) The next web page will be collecting billing information

– Name as it appears on the credit card

– Credit card number

– Credit security code

– Credit card billing zip/postal code.

11) The next page will the present the user with the total amount charged: per billing period

– Base cost of the service plan

– Applicable Taxes and Fees

– Total Recurring Charge

– A confirm payment button

12) If there any an errors processing the credit card, the user will be taken back to step 10

13) If credit card processing is successful, the Netsetui side server call will call into the app server API to record that a tracker has been activated:

– See app server calls here:

– This is done with the “Activate Tracker [POST]” API call.

14) The control of the screens is then returned to the mobile app.

Please add a top Nav menu called New Subscription

Domain:

Use the attached process flow for that new Top Nav icon

Our Solution

We have analyzed the request. As per our understanding, a mobile application is already developed for GPS tracker. Through this mobile application, the customer’s scan the QR code containing the GPS tracker’s IMEI and ICCID and initiate an API call to netsuite which should return a series of mobile friendly/responsive web pages.

So in this proposal, we need to create these mobile friendly/responsive web pages in the domain:

Based on the request, a new page will be created in the webstore for GPS Tracker. This page displays the “SELECT YOUR REGION” section.

We need the list of regions to be displayed on this page.

Upon clicking ‘next’ navigate to the “Select your service“ page. We have seen the two commerce categories “SECURITY DEVICE” and “TRACKER”  in Netsuite.

Please confirm if these two categories are to be displayed on this page. In the future, will new categories need to be added to this page?

We assume these commerce categories are to be displayed as static in this page.

Upon clicking ‘next’ navigate to the PLP page of these categories where the items in those categories are displayed. Currently the “SECURITY DEVICE” contains an item of type “service” (Security Device Monthly Plan) and the “TRACKER” category does not contain any item. 

Currently, it is navigated to the Security Device Plans category page when we click on the next button after selecting any of the options.
If it is needed to make it dynamic, Could you please provide the criteria or details?

So based on the requirement, the different plans are to be added as service items in NetSuite and added to these commerce categories.

The service item name and price will be displayed in this page as a list without images or any other details.

Upon click of the next button, the plan details page is displayed as follows.

This item can then be added to the cart and then the user can checkout, where the credit card processing works. The credit card processing works based on the default SCA behaviour.

For the checkout process, we have to customise the view of the checkout page

The item is added to the checkout, and then the billing address needs to be added as a next step.

Note : As per SCA, for the address section it will be shown as a list of addresses here because when we add an address it will automatically save to the customer record.

Here we have to add the delivery method, because it is mandatory for the SO creation from the SCA website. And we can use the same address as shipping address in order creation since it is mandatory

The next step is to add the credit card information for the payment section. 

Here also the list of credit cards will be shown when the customer has already added a credit card for the previous order creation. 

A Sales order is created in Netsuite for the customer upon successful checkout.

We assume once the SO is created in Netsuite, further processing is required for the Netsuite side to call into the app server API to record that a tracker has been activated

The dashboard link to be added to the button for return to the Dashboard section.

Clarifications:

Please confirm if the above solution is the requirement. Please let us know, if any further processing is required after the sales order creation in Netsuite. Also please let us know if any validation is required for adding the service items to cart.

As per the design, the zip code needs to be added to the credit card section. So here Can we populate the same Zip code from the billing address or Can you please provide the details regarding the Zip code in the credit card?

Regarding the fields in the plan details page, currently values of these are not saved in the order created. Please confirm if we need to to save the data in these fields in the following Transaction line fields. If so, we need to check why the values of these fields are not saved in the order. Also when we checked, these fields are not displayed in the sales order, so we will need to display it in the order created.

We will estimate the time required after getting a confirmation on whether  the solution provided satisfies the requirement. Also, we need further analysis after that.

Assumptions

The solution will be implemented in the domain

A mobile application is already developed for GPS tracker. Through this mobile application, the customer’s scan the QR code containing the GPS tracker’s IMEI and ICCID and initiate an API call to netsuite.

Note: The login credential will need to pass when the user enter into the Region selection page

Currently , the user can directly navigate to the plan section, so which region should we set as the default region?

The tax calculated in the netsuite and corresponding tax will shown in the UI section

So in this proposal, we need to create these mobile friendly/responsive web pages in the domain:

Leave a comment

Your email address will not be published. Required fields are marked *