Skip to content

@W-18998088 Order tracker on order details page#2790

Merged
sf-madhuri-uppu merged 12 commits intofeature/order-management-pluginfrom
t/cc-shark/W-18998088
Jul 23, 2025
Merged

@W-18998088 Order tracker on order details page#2790
sf-madhuri-uppu merged 12 commits intofeature/order-management-pluginfrom
t/cc-shark/W-18998088

Conversation

@sf-madhuri-uppu
Copy link
Contributor

@sf-madhuri-uppu sf-madhuri-uppu commented Jul 11, 2025 •
edited
Loading

Description

Add an order tracker in order details page. Currently hardcoding the label value as "Out for delivery" in order-details page so that all the steps before that are highlighted in blue. Will update it to receive a value from Scapi API in the next iteration

Screen.Recording.2025-07-22.at.10.22.32.AM.mov

Video demonstrating accessibility

Screen.Recording.2025-07-22.at.10.21.32.AM.mov

Types of Changes

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Documentation update
  • Breaking change (could cause existing functionality to not work as expected)
  • Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

  • Removing a public function or component or prop
  • Adding a required argument to a function
  • Changing the data type of a function parameter or return value
  • Adding a new peer dependency to package.json

Changes

  • (change1)

How to Test-Drive This PR

  • (step1)

Checklists

General

  • Changes are covered by test cases
  • CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

  • There are no changes to UI

or...

Localization

  • Changes include a UI text update in the Retail React App (which requires translation)

@sf-madhuri-uppu sf-madhuri-uppu requested a review from a team as a code owner July 11, 2025 18:03
@cc-prodsec
Copy link
Collaborator

cc-prodsec commented Jul 11, 2025 •
edited
Loading

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

@sf-madhuri-uppu sf-madhuri-uppu added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Jul 11, 2025
@sf-madhuri-uppu sf-madhuri-uppu requested a review from a team July 11, 2025 20:10
sf-emmyzhang
sf-emmyzhang reviewed Jul 11, 2025
View reviewed changes
packages/template-retail-react-app/app/components/progress-tracker/index.jsx Outdated

const steps = ['Ordered', 'Dispatched', 'Out for delivery', 'Delivered']

const ProgressTracker = ({currentStepLabel}) => {
Copy link
Contributor

@sf-emmyzhang sf-emmyzhang Jul 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps a question for pwa-kit team or @kzheng-sfdc but do we need to think about how this component might be used outside of the order details/history context?

@sf-deepali-bharmal sf-deepali-bharmal force-pushed the feature/order-management-plugin branch from ccc0c81 to 5c5a5e7 Compare July 15, 2025 17:24
@sf-madhuri-uppu
Copy link
Contributor Author

sf-madhuri-uppu commented Jul 16, 2025

@sf-emmyzhang @sf-deepali-bharmal I pushed a commit addressing the PR comments. Please review again

@sf-madhuri-uppu sf-madhuri-uppu changed the title @W-18998088 skip changelog @W-18998088 Order tracker on order details page Jul 17, 2025
sf-emmyzhang
sf-emmyzhang reviewed Jul 17, 2025
View reviewed changes
Copy link
Contributor

@sf-emmyzhang sf-emmyzhang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few thoughts:

  • The radius of the status box looks a little off when the screen size shrinks
  • Do long text have proper wrapping in the status box? For longer status labels, it might be an issue
  • I don't know how we want to announce to screenreaders the current status of an order. Perhaps something to check with UX?

packages/template-retail-react-app/app/components/order-status-bar/index.jsx Outdated

return (
<Box position="relative" width="100%" maxWidth="1080px" height="50px">
<svg
Copy link
Contributor

@sf-emmyzhang sf-emmyzhang Jul 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to consider using flexboxes instead svgs? The latter makes positioning code complex

Copy link
Contributor Author

@sf-madhuri-uppu sf-madhuri-uppu Jul 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tried to build the UI for order tracker using other techniques. It was difficult to get the right shape for chevrons while maintaining consistent spacing between them. It's easier to get a responsive design with svgs and it also seems to be used widely

Copy link
Contributor

@sf-emmyzhang sf-emmyzhang Jul 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would disagree that it's necessarily always easier to get a responsive design with svgs. Although svgs are useful for complex shapes I think we can achieve what we need using simple css and html. I think if we want this component to be maintainable, responsive, and accessible then I'd encourage exploring other solutions. Or at the very least explore how to reduce the complexity and improve responsiveness for the current approach if you think it's the best route.

Copy link
Contributor Author

@sf-madhuri-uppu sf-madhuri-uppu Jul 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that we have to make the component more accessible. I was planning to address that in a different WI. But I just pushed a commit with the accessibility changes. We can hone it better in the next iteration. The component also seems to be responsive as can be seen in the video. Please check it out and let me know

@sf-madhuri-uppu
Copy link
Contributor Author

sf-madhuri-uppu commented Jul 17, 2025

A few thoughts:

  • The radius of the status box looks a little off when the screen size shrinks
  • Do long text have proper wrapping in the status box? For longer status labels, it might be an issue
  • I don't know how we want to announce to screenreaders the current status of an order. Perhaps something to check with UX?

Do long text have proper wrapping in the status box? For longer status labels, it might be an issue
<Text
fontSize={['xs', 'sm', 'md', 'lg']} -> Responsive font sizes
textAlign="center" -> Centers text within each step
lineHeight="1.2" -> Tighter line spacing for multi-line text
wordBreak="break-word" -> Breaks long words if needed
hyphens="auto" -> Adds hyphens for better readability
maxW="100%" -> Text can't overflow the step width
/>Text
We also have horizontal padding in the box which will be adjusted according to the screen size. So I think we should be good here. "Out for delivery" is wrapped properly inside the box

I don't know how we want to announce to screenreaders the current status of an order. Perhaps something to check with UX? -> We have a separate story for accessibility concerns

unandyala
unandyala reviewed Jul 17, 2025
View reviewed changes
@sf-madhuri-uppu sf-madhuri-uppu changed the base branch from feature/order-management-plugin to pwa-kit-staging July 17, 2025 23:02
@sf-madhuri-uppu sf-madhuri-uppu changed the base branch from pwa-kit-staging to feature/order-management-plugin July 22, 2025 20:06
sf-emmyzhang
sf-emmyzhang reviewed Jul 22, 2025
View reviewed changes
Copy link
Contributor

@sf-emmyzhang sf-emmyzhang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remember to change the target branch back to the oms feature branch!

unandyala
unandyala approved these changes Jul 23, 2025
View reviewed changes
packages/template-retail-react-app/app/components/order-status-bar/index.jsx
}

return (
<StatusBar
Copy link
Contributor

@unandyala unandyala Jul 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for refactoring!

@sf-madhuri-uppu sf-madhuri-uppu merged commit 1e3b6a2 into feature/order-management-plugin Jul 23, 2025
36 checks passed
@sf-madhuri-uppu sf-madhuri-uppu deleted the t/cc-shark/W-18998088 branch July 23, 2025 17:23
sf-deepali-bharmal
sf-deepali-bharmal reviewed Jul 28, 2025
View reviewed changes
packages/template-retail-react-app/app/components/order-status-bar/index.jsx
const theme = useTheme()
const intl = useIntl()

const getLocalizedMessage = (status) => {
Copy link
Contributor

@sf-deepali-bharmal sf-deepali-bharmal Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sf-madhuri-uppu Why are we hard coding localized message for every step. This adds maintenance on our part. Is there any way to take the list of steps/texts from backend and translate the array on UI instead of each step ?

Copy link
Contributor Author

@sf-madhuri-uppu sf-madhuri-uppu Jul 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Intl requires message IDs to be statically evaluable for extraction. Dynamic key generation like status_bar.${status.toLowerCase().replace(/\s+/g, '_')} is not static. I tried using a for loop earlier and it did not work so I had to use a switch case. The message itself is not hardcoded for every locale. We are only giving the step label as default messages. Those labels will be translated based on locale by React.intl

sf-deepali-bharmal added a commit that referenced this pull request Aug 19, 2025
@sf-madhuri-uppu @sf-deepali-bharmal @sf-emmyzhang
@W-18998088 Order tracker on order details page (#2790)
ad53e6f 
* Initial empty commit for order-management-plugin

* skip changelog

* add white border to svg

* skip changelog

* order tracker

* Fixed lint errors

* Addressed PR comments

* Removed unnecessary comments

* Refactored the code

* Made the tracker accessible

* PR comments

* Added compiled files

---------

Co-authored-by: sf-deepali-bharmal <deepali.bharmal@salesforce.com>
Co-authored-by: emmyzhang <emmyzhang@salesforce.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sf-deepali-bharmal sf-deepali-bharmal sf-deepali-bharmal left review comments

@sf-emmyzhang sf-emmyzhang sf-emmyzhang approved these changes

@unandyala unandyala unandyala approved these changes

Assignees

No one assigned

Labels

skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@sf-madhuri-uppu @cc-prodsec @unandyala @sf-deepali-bharmal @sf-emmyzhang