hotwax / receiving

HotWax Commerce Receiving App

receiving

HotWax Commerce receiving app

Build Notes

Clone the repository (code)

• Open a Terminal window
• Clone app
• Go to app directory
• Run following command to download dependencies npm i

Start App

• To test the app in browser: ionic serve

https://ionicframework.com/docs/intro/cli -To install Ionic CLI, follow instructions in the above link

Upload instance specific build

• While adding new configuration, make sure to add them in all of three environments file otherwise it will be missing while building the app for prod or qa instance.
• Improve the environment variables as per the instance before building the app.
• Version must be updated before building the app.
• For dev build, improve the environment variables in environment.ts file and for prod build, improve the environment variables in environment.prod.ts file.
• Run the command gulp config --channelTag=<dev/prod/qa>
• After running this command we will have updated environment.ts file and config.xml file as per the updated variables.
• Next we can build the app using ionic cordova build <android/ios>
• Upload app on test flight, mention the app release version and what to test under Test Details.

Generating artefact documentation

Following command generates the documentation:
npm run compodoc
Documentation is available in the documentation folder and can be viewed by opening the index.html.

Shopify app configuration and installation

• Add API Key, Redirect URI and Scopes to environment.
• For development store, navigate to /shopify page and input shopify store URL
• For demo store, Generate custom link and install

Build Issues

If you face any error while running the app on a local machine, please refer this.

• Run following commands to fix the issue npm uninstall @agm/core npm i @agm/[email protected] --save

UIWebView Issue while uploading App on testflight:

• Remove the ios platform using command ionic cordova platform rm ios
• Check plugin cordova-plugin-ionic-webview in package.json file, If not included then add plugin using command ionic cordova plugin add cordova-plugin-ionic-webview
• Add the ios platform with version 5.1.0 using command ionic cordova platform add ios@~5.1.0
• Check following preference in config file . if not present then add it. <preference name="WKWebViewOnly" value="true" />
• Run following command npm i
• Build application for IOS ionic cordova build ios

moment-timezone and Truncate

• If you are getting error Property 'tz' does not exist on type 'typeof moment' npm i [email protected]
• If you are getting error A rest parameter must be of an array type. npm i @yellowspot/[email protected]

Submodule - Theme

• If you are getting Sass Error like Undefined variable git submodule update --recursive --remote

Contribution Guideline

Please do all changes and in your local systems branch and make a pull request to hacktoberfest branch not in master branch of remote repo

receiving's Issues

Progress bar on PO receiving doesn't work

Current behavior

Even though partial or all inventory has been received, the progress bar doesn't reflect that.

Expected behavior

If a partial amount or or the entire expected quantity has been received, the progress bar should be full. If more inventory than expected has been received then the progress bar should turn to the danger color.

Steps to reproduce the issue

log into app and view a PO.

Can you handle fixing this bug by yourself?

• YES
• [x ] NO

Enable autofocus on searchbar in ReturnDetails, PODetail, and ShipmentDetails page

What is the motivation for adding/enhancing this feature?

Add autofocus on ion-inputs of all details page

What are the acceptance criteria?

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Fix build console warnings

warning: 'emitter' is defined but never used (@typescript-eslint/no-unused-vars) at src/store/modules/order/actions.ts:8:8:
    6 | import { hasError, showToast } from '@/utils'
    7 | import { translate } from '@/i18n'
 >  8 | import emitter from "@/event-bus";
                 ^
    9 | 
   10 | 
   11 | const actions: ActionTree<OrderState, RootState> = {
   
   
warning: 'state' is defined but never used (@typescript-eslint/no-unused-vars) at src/store/modules/order/actions.ts:51:25:
   49 |     commit(types.ORDER_CURRENT_UPDATED, state.current )
   50 | },
 > 51 |   async addOrderItem ({ state, commit }, payload) {
      |                           ^
   52 |     const product = { 
   53 |       ...payload,
   54 |       quantityAccepted: 0,
   
   
 warning: 'commit' is defined but never used (@typescript-eslint/no-unused-vars) at src/store/modules/order/actions.ts:109:34:
  107 |     return resp;
  108 |   },
> 109 |   async createPurchaseShipment({ commit }, payload) {
      |                                    ^
  110 | 
  111 |     let resp;
  112 |     try {
  
  
warning: 'commit' is defined but never used (@typescript-eslint/no-unused-vars) at src/store/modules/product/actions.ts:65:36:
   63 |     return resp;
   64 |   },
 > 65 |   async fetchProductInformation( { commit }, payload) {
      |                                      ^
   66 |     let productIds: any = new Set();
   67 | 
   68 |     payload.order.map((item: any) => {
   
   
 warning: 'commit' is defined but never used (@typescript-eslint/no-unused-vars) at src/store/modules/shipment/actions.ts:65:26:
   63 |     }
   64 |   },
 > 65 |   receiveShipmentItem ({ commit }, data) {
      |                            ^
   66 |     const payload = data.shipment ? {
   67 |       shipmentId: data.shipment.shipmentId,
   68 |       locationSeqId: data.shipment.locationSeqId
   
5 warnings found.

Receiving button is disable while enter the quantity

Step to reproduce

Login to https://receiving-uat.hotwax.io/ with a valid username and password.
Navigate to the return tab.
Enter the quantity in the input field.

Expected - After entering the quantity Receiving button should be enabled.

Add a permission check for adding items to shipments

What is the motivation for adding/enhancing this feature?

Adding items to a shipment of any type should be restricted to users with "FULFILL_SHIPMENT_ADMIN" permission which is described as the "shipment admin permission."

If a user doesn't have this, they will be restricted doom using the "add to shipment" function in the ionic receiving app.

Add link to Figma file in Readme

To help UX developers add link to figma file in the readme me:

https://www.figma.com/community/file/885791511781717756/Ionic-5-Material-UI-Kit-(Community)

When using receive all, prefill should honor already received shipments

Current behavior

When using receive all for purchase order details page, if there are already shipments received for the PO, still value prefilled for quantity is the po item quantity.

Expected behavior

When using receive all for purchase order details page, if there are already shipments received for the PO, the receive all feature should prefill quantity deducting the received shipment

Steps to reproduce the issue

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Toast not being displayed when clicking Load more purchase orders

Current behavior

When clicking Load More Purchase Orders on PO list page and no more jobs found then no toast message being displayed

Expected behavior

When there are no more POs found then a toast with message No more Purchase Orders found

Steps to reproduce the issue

• Go to PO list page
• Click Load more Purchase Orders button
• See that toast is not displayed even when there are no more POs

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

External Id should be visible on the shipments page

Current behavior

Even when a shipment Id is present, it shows the HotWax Commerce generated Id on the find shipments page.

Expected behavior

When an external Shipment Id is present, it should be visible on the shipments page.

Steps to reproduce the issue

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Create dedicated empty states

What is the motivation for adding/enhancing this feature?

All find screens should have dedicated empty states that show the user relevant information instead of a load more button when there is no more data to load.

When there are no more shipments to load, the current toast makes it feel like a bug. There should be no toast if there are no more shipments to load, instead it should switch to the empty state

Show user full name on receive history.

Current behavior

Currently we are only showing the user id not the users full name.

Expected behavior

Need to show the user's full name which is more user friendly and readable.

Add current instance details to sidebar footer.

What is the motivation for adding/enhancing this feature?

Like the Job Manager app, the sidebar footer should show the current connected instance and product store.

Upgrade to Ionic 6.1.x

What is the motivation for adding/enhancing this feature?

https://ionicframework.com/blog/announcing-ionic-v6-1/

What's new:
Virtual Scrolling Compatibility
Sheet Modal Breakpoint API
Control When Your Modals Dismiss
Disable Specific Dates
Gesture Events for Range
Custom Item Counters

https://github.com/ionic-team/ionic-framework/releases/tag/v6.1.15

What are the acceptance criteria?

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Add support to use shipment module from oms package

What is the motivation for adding/enhancing this feature?

What are the acceptance criteria?

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Use new image component to optimize performance

What is the motivation for adding/enhancing this feature?

Use the new Shopify CDN compatible image component to fetch optimized images from Shopify instead of full size images.

Show the selected route

Current behavior

The user cannot tell which route they're currently on by looking at the menu on the left.

Expected behavior

The current route the user is on should be selected from the menu in the secondary theme color.

No routes shown as selected:

Reference from Job Manager:

Implement product identifier using dxp-component.

What is the motivation for adding/enhancing this feature?

To use dxp-components to implement product Identifier.

What are the acceptance criteria?

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

RangeError: Maximum call stack size exceeded on Shipments page when no Shipments are found

Current behavior

If the No Shipments found toast is displayed and you switch to PO or Settings page, RangeError: Maximum call stack size exceeded is thrown in the console.

Expected behavior

Call stack error should not be there in the console.

Steps to reproduce the issue

1. Open the app in mobile view and go to the Shipments page, keeping the sidebar menu and console open.
2. Make sure no shipments are there; hence, the No Shipments found toast is displayed.
3. From the menu, quickly switch to another page, PO or Settings while the toast is still there.
4. Errors will be visible in the console.

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Toast message when copying internal ID of PO

Current behavior

When a PO internal ID is copied, the toast message reads "Copied "

Expected behavior

Instead it should read "Internal ID saved to clipboard"

Enable auto-focus on actionable content for all the pages

What is the motivation for adding/enhancing this feature?

This feature will help the users to easily navigate through the app

What are the acceptance criteria?

• The input fields and buttons should be in focus on tab key
• When searched for specific string, if some data found then the first item in the list should be in focus

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Display the Transfer order number on the shipments page

What is the motivation for adding/enhancing this feature?

The client wants to see the Transfer Order number on the shipments Find page and the Shipments detail page. The transfer order number will be saved in the ShipmentAttribute entity.

What are the acceptance criteria?

The transfer order number should be visible on the Shipment Find page and the Shipment Detail page.

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Replace console.log with console.error while handling failure cases

Current behavior

Expected behavior

Steps to reproduce the issue

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Unable to login. Screen blinks after entering credentials.

Current behavior

When going to the login screen and entering the correct credentials. The screen flashes and it stays on the same page.

Expected behavior

After entering the correct credentials, users should be able to log in to their accounts.

Steps to reproduce the issue

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Show the most recent record first in the history modal

What is the motivation for adding/enhancing this feature?

Currently, when showing the history for PO, then the most recent action on the PO is displayed at the bottom, but we can sort the po history list on the basis of date to display the most recent action on top, so that it will be more easy to understand.

What are the acceptance criteria?

• Recent action on PO should be displayed first

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Replaced moment by luxon

What is the motivation for adding/enhancing this feature?

As moment is in maintenance mode, replace moment by luxon.

What are the acceptance criteria?

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Shipment item received chip should show receiving history

Current behavior

Clicking on the shipment item "received" chip should open up the receive history model with history for just that item.

Show virtual product name along with variant in app product list

What is the motivation for adding/enhancing this feature?

What are the acceptance criteria?

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Over receiving on all detail pages

Current behavior

The progress bar only turns red when over receiving happens on the PO detail page.

Expected behavior

This should also happen on all pages, including shipments and returns.

PO details not updated after changing qty

Current behavior

When changing the qty value and receiving the PO, qty received not being updated and qty field does not reset.

Expected behavior

PO details should be updated automatically without refreshing the page

Steps to reproduce the issue

• Go to po details page
• Update the qty for an item and receive the po
• Go to the same po again from list page
• See that the po details (qty received and qty field) not being updated
• Refresh the page and verify that the po details being updated

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Incorrect information being displayed on PO details page

Current behavior

Information on the PO details page is not displayed correctly like po received qty

Expected behavior

All the information should be displayed correctly.

• When a po item is not received then 0 received should be displayed.

Steps to reproduce the issue

Select two POs having same product in which one of the POs does not have any received history

• Go to the PO which is not being received even once and see that only received is getting displayed
• Now go to the PO having same product as the previous PO and see that it have some received qty for the product
• Again move to the PO (first one) and see that now the PO has some qty in received field that is same as the second PO

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Display toast message when no orders found after clicking on Load more Purchase orders

Current behavior

• When clicking on Load More Purchase Order button and if no more orders found then there is no message displayed to the users

Expected behavior

• A message (Purchase Orders not found) should be displayed to the user

Steps to reproduce the issue

• Go to PO list page
• Click on Load More Purchase Orders button
• See that there is no toast being displayed

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Add style and good identification details on return details page

Add parent product name and ERP_ID from good identifications

Purchase order page not being cleared after changing instance

Current behavior

When logged-in on a particular instance, then on purchase order page, orders gets listed if exist and then after logout and login again with some other instance, and if there are no purchase orders available then the previous PO gets displayed.

Expected behavior

On logout the list of POs, returns and shipments should be cleared.

Steps to reproduce the issue

• Login into the app
• Go to Purchase orders page and see that some POs gets listed
• Logout and login again with on some other instance
• Go to Purchase orders page and verify that is no purchase orders exists the previous list gets displayed.

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

UI for over receiving

What is the motivation for adding/enhancing this feature?

When the user is receiving more than was ordered in a PO, or was expected in a Shipment, the progress bar should turn red/danger so that the user knows they are doing something unexpected.

Add support to use product types from oms package from product module

What is the motivation for adding/enhancing this feature?

What are the acceptance criteria?

• Product should be typed across app

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Pull to refresh on all find screens.

What is the motivation for adding/enhancing this feature?

Once search results have loaded, there is no way to refresh them without switching to another page and coming back. There is should be an option to pull and refresh on all pages.

Shipments should not be visible on the find page after it is received

Current behavior

After receiving the shipment, it is still visible on the shipments page.

Expected behavior

After receiving the shipment, it should not be visible on the find shipment page.

Steps to reproduce the issue

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Add support to alias specific instance URL with environment configuration

What is the motivation for adding/enhancing this feature?

When hosting app, we could provide specific aliases that maps to specific instance baseURL. This will ease accessing app for non hotwax domain instances

What are the acceptance criteria?

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Add support to alias specific instance URL with environment configuration

What is the motivation for adding/enhancing this feature?

When hosting app, we could provide specific aliases that maps to specific instance baseURL. This will ease accessing app for non hotwax domain instances

What are the acceptance criteria?

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Copy internal ID

What is the motivation for adding/enhancing this feature?

Clicking on the internal id chip on the detail page for POs should copy the content to the users clipboard.

There should also be an icon in the chip which shows that it can be copied.

Upgrade to Ionic 6.2

Show order and item status on POs

What is the motivation for adding/enhancing this feature?

Only Approved POs can be received. Right now we don't show the status of the PO which makes it hard to know that can and cannot be received.

There should be a badge on the end slot of the find screen with a badge that shows the status.

On the detail page, next to the internal order id badge, there should be an order level status badge.

For items, the receive all button should be replaced with a "completed" badge when the item status has changed to completed.

Allow users to close purchase orders when they receive them

What is the motivation for adding/enhancing this feature?

Users can currently only receive inventory for purchase orders; there is no manual control for users to close the PO. When the promise date arrives, the PO automatically expires. Manually closing a PO communicates to the system that the respective PO's inventory has been received and will not be received again.

What are the acceptance criteria?

Only users with order edit permissions can close a purchase order from the Purchase Order detail page.

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Add support to select facility location during receiving

What is the motivation for adding/enhancing this feature?

When receiving at a larger warehouse style location, retailers often need to specify locations within a facility during receiving since it impacts inventory management.

What are the acceptance criteria?

Can you complete this feature request by yourself?

• YES
• [x ] NO

Quantity should not be prefilled with 0 as causing server error

Current behavior

When the quantity is prefilled with 0 and the user has not received the item, the quantity is passed is 0 causing action failure:
Both quantity to accept and quantity to reject cannot be zero.

Expected behavior

Steps to reproduce the issue

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

PO find page should display the earliest arrival date and PO detail page should display individual dates of arrival for a PO

What is the motivation for adding/enhancing this feature?

The added arrival dates on the PO find page and the PO detail page will give good information without logging into the OMS.

What are the acceptance criteria?

The PO find page and PO detail page should display the estimated arrival date for the purchase orders. If there are multiple items in a PO, the earliest arrival date amongst all should be visible on the PO find page.

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Custom theme file

Add a custom theme file like in Clienteling app.

This will allow any brand to customize the look and feel of any app.

Also change heading fonts to Montserrat and body font to Open Sans

Readme file should be updated with instruction of build and run the application

Current behavior

Current readme file is not understandable. Make it similar as the readme file of preorder app https://github.com/hotwax/preorder.

Expected behavior

Steps to reproduce the issue

Can you handle fixing this bug by yourself?

• YES
• NO

Environment details

• Browser:
• OS:
• Code Version:

Additional information

Show shipments, returns, and POs that cannot be received.

What is the motivation for adding/enhancing this feature?

Users should be able to go back and view a shipment even after it has been received, canceled, or completed. This helps in reviewing or verifying data incase they need to be reconciled.

What are the acceptance criteria?

On the list page, all results show show up regardless of status. On the detail page, users won't be able to edit these items with clear indications that this shipment has been completed etc.

Additional information

Upgrade settings page UI

What is the motivation for adding/enhancing this feature?

We have a new settings page UI pattern that should be implemented into the receiving app. Reference for it can be found here:
hotwax/import#60

Use the cards that apply, all may not apply