hotwax / dxp-components Goto Github PK

To enhance the internationalization (i18n) capabilities of our Digital Experience Platform (DXP) components, we propose the implementation of an i18n library that can be centrally used across all components. This feature is crucial to ensure that our DXP can effectively support multiple languages and regions, providing a localized experience to users around the world.

This feature aims to provide users with a unified method for switching between different facilities associated to the user. Develop a dedicated Facility Switcher component that serves as a central hub for users to switch between different facilities. This component should be accessible from any relevant part of the application.

With node 16, the build fails due to eslint version mismatch in dependencies

This is fixed in Job Manager:
hotwax/job-manager#327

When entering the full url for oms on login, and if the oms url does not contain api/ (and just contain api) at the last, then Go To OMS button does not work.
Also when we are using the complete OMS url for login and then hitting Go To OMS button then the user again needs to login in OMS and an authenticated OMS link is not generated from the app itself.

Refer this issue for more details: #146

We will implement this feature in other apps, as and when required by the users.

• Inventory Cycle Count
• Receiving
• Picking app

Note: This list can be extended.

Currently, the Job Manager app allows users to access the application with a unified set of credentials. This feature should extend SSO functionality to all other apps.

Checklist

• Store Fulfillment
• BOPIS Fulfillment
• Pre-order Management
• Receiving
• Inventory Cycle Count
• Import
• Threshold Management
• Picking

Following apps lacks feature to show facilities on Settings page or show facilities in shopify eCommerce section (Card).
Fix this and update Settings page.

inventory-count
picking
pre-order
bopis
threshold-management

Take following reference

Done in hotwax/inventory-count#160

To enhance security and user convenience, we propose the implementation of a centralized sign-out feature that allows users to log out from all connected applications simultaneously. This feature aims to provide users with an efficient way to ensure that their sessions are terminated across all associated applications, reducing the risk of unauthorized access.

After POC done in issue #68,
Using https://www.npmjs.com/package/@hotwax/app-version-info package, show app version on Settings page in our apps.

Currently, the user needs to reopen the app to see the 'PWA update available' toast. We must send a push notification to an already open app instance in the browser whenever a newer version is available.

Identify practices of checking for new versions of the app in PWAs and refreshing cache if found

When the user changes the store, there should be and alert that it will clear the current upload list and current product search & upload list should be cleared

This feature aims to empower users by providing a unified and consistent search experience across various DXP components, enabling them to quickly access relevant information. We will develop a centralized search component that can be seamlessly integrated into app. This component should be designed to work cohesively with various DXP elements.

Background:
Users frequently encounter issues and require access to manuals and troubleshooting guides to resolve them. To enhance user experience and provide efficient support, we should implement a feature that allows users to quickly access app's user manuals and troubleshooting guides from within the application.

Acceptance Criteria:
a. Documentation Repository: Ensure there is a centralized repository for app manuals and troubleshooting guides. This repository should be organized and up-to-date.

b. In-App Link: Implement a dedicated section or button within the application's user interface that provides easy access to manuals and troubleshooting guides.

Create an Image component that allows developers to pass pre-defined sizes or custom image sizes to the component to get specifically sized images. There should also be a lazy load attribute option in the component.

Check the possibility of using any NoSQL DB that auto sync data in apps with the server.

Possible solutions:
CouchDB - PouchDB
https://pouchdb.com/guides/replication.html

MongoDB - Realm
https://www.mongodb.com/collateral/the-offline-first-approach-to-mobile-app-development
https://www.mongodb.com/docs/realm/
https://www.mongodb.com/docs/atlas/app-services/sync/get-started/#std-label-sync
https://www.mongodb.com/docs/realm/web/

This feature aims to provide users with a unified and efficient method for selecting their preferred language within the application, ensuring that content is presented in a language they understand. Develop a dedicated Language Switcher component that serves as a central hub for users to change the language of the application. This component should be accessible from any relevant part of the application.

Currently, the apps lacks a mechanism to notify users about new releases, including new features, improvements, and bug fixes. This issue aims to implement a notification system that will inform users about each release. This will enhance user experience and keep them informed about the latest updates.

Apps with a side navigation menu currently lack the ability to retain the user's current page selection when they navigate back using the browser's back button. This leads to a disorienting experience for users as they lose track of their location within the app.

Linking issue for reference: hotwax/fulfillment#137

Issue Description

Loading times can lead to a less than optimal user experience when waiting for content to load. To improve user perception of loading times, we should implement a skeleton text UI pattern that provides a visual indication of content loading in place of actual data.

Apps Checklist

• Job Manager
• Pre-order management

We need to define some conventions for naming variables, methods for ionic apps

Check if we can directly use the i18n library in .ts files and remove translate method.

Currently, the apps lack a notification system to keep users informed about important events, updates, or interactions. To enhance user engagement and provide timely information, it's essential to implement a notification system that delivers relevant notifications to users based on their actions, preferences, and interactions within the app.

Refer this PR faq for more in information: https://github.com/hotwax/press-release-faq/blob/main/bopis/fulfillment/bopis-push-notifications.md

Checklist

• hotwax/bopis#274
• hotwax/fulfillment-pwa#266
• Job Manager
• Receiving

This feature aims to provide users and administrators with a unified and efficient method for accessing and tracking information about the current app version, release notes, and update history. Develop a dedicated Version Information component that serves as a central hub for users and administrators to access details about the current app version. This component should be accessible from a prominent location within the application.

User's last selected product store preference should be stored in backend and fetched on login along with user profile.

This is done is Threshold Management app.

The change has to be applied across the apps.

We should identify and warn user of outdated browser version

Reference links:

vuejs/vue#770
arkime/arkime@88c9b9a

Findings:

https://medium.com/@andreas.remdt/detecting-outdated-browsers-in-vanilla-javascript-1f214dc24e4d
https://browser-update.org/
https://laracasts.com/discuss/channels/vue/how-detect-and-handle-old-browser-vuejs
https://ionicframework.com/docs/reference/browser-support
https://github.com/browser-update/browser-update

Testing was done on older version of Firefox browsers, reference:

https://ftp.mozilla.org/pub/firefox/releases/

What is the motivation for adding/enhancing this feature?

Implement a menu footer navigation that will provide users with quick access to switch between Shopify config and product store.

• Pre-order

What are the acceptance criteria?

• ...

Can you complete this feature request by yourself?

• YES
• NO

Additional information

Explore and identify practices followed to gather and displaying app version, and build date time time related information

This feature aims to provide users with a method for configuring timezones across the applications, ensuring that time-sensitive data is accurately displayed and managed. We will develop a dedicated Timezone Configuration component that serves as a central hub for users to configure their timezone settings. This component should be accessible from any relevant part of the application.

To facilitate administrative tasks and improve efficiency in our application ecosystem, we propose the implementation of an Admin User Access feature. This feature aims to grant admin users privileged access to all product stores and configurations across the platform, allowing them to manage and oversee operations more effectively.

Currently, assets to import are kept in the app and their path is sent as a callback value to the plugin as there is no support for using require() inside the plugin.

What is the motivation for adding/enhancing this feature?

The current state of favicons in applications exhibits irregular sizes, which leads to an inconsistent user experience.

What are the acceptance criteria?

1. Favicons should be of uniform size across all applications.
2. The recommended favicon size is 16x16 pixels.
3. Favicons should maintain their aspect ratio when scaled, to prevent distortion or stretching.
4. Favicons should be replaced in the following apps

• Job Manager
• Pre-order Management
• BOPIS Fulfillment
• Inventory count
• Import
• Receiving
• Threshold management
• Picking

Can you complete this feature request by yourself?

• YES
• NO

Additional information

The current access OMS feature doesn't generate an authenticated link which requires the user to login again when the arrive.
The re-usable component should create an authenticated link for the OMS that directly sends the user to the index page.

This feature aims to provide users with a consistent and reliable tool for scanning product codes across various parts of the application, facilitating tasks such as inventory management, product lookup, and data entry. We will Develop a centralized Product Scanner component that can be seamlessly integrated into different DXP components. This component should be designed to work cohesively with various DXP elements.

We should have a generic ionic animation that can be applied to any chip/button with an icon in it to show the icon on hover.

width: 0px;
opacity: 0;

transition: all 0.5s ease 0s;

width: 1em;
opacity: initial;

Need to create a launch screen for our apps which will be used on phones.

Create a component to be used in all the apps for showing PWA update notification.

This feature aims to provide users with a single, user-friendly interface where they can configure and customize various aspects of the application to suit their preferences and requirements. Develop a centralized App Settings Page component that can be seamlessly integrated into different apps. This component should be designed to work cohesively with various DXP elements.

Currently, when users hit an incorrect URL or navigate to a non-existent page, they are presented with the default browser error page. To improve user experience and provide clear guidance, it's important to create a dedicated error page that informs users about the incorrect URL and offers options to navigate back to a valid page or take other relevant actions.

This feature aims to provide users with a unified and efficient method for navigating to OMS instances, ensuring a seamless experience when managing multiple instances or environments. Develop a dedicated OMS Instance Navigation component that serves as a central hub for users to navigate to OMS instances. This component should be accessible from any relevant part of the application.

Identify libraries used for the Vue app testing and practices followed

Jest is one of the options