Feat: [Refinements] Creates `ShippingSimulation` #183

eduardoformiga · 2022-07-27T00:41:06Z

What's the purpose of this pull request?

This PR aims to create and refine the ShippingSimulation that is found in the PDP.
This task didn't include API integration. Thus, we are using mocked data just to see the component working as expected.

Tasks:

Creates Shipping Simulation.
CSS Modules.
Themification.
Storybook.

How does it work?

Desktop	Mobile

👀 One behavior to pay attention to:

if the user had a PostalCode included in its session, the page should load this PostalCode in the ShippingSimulation as the default.
if the user sets the PostalCode in its session while in the PDP using the Regionalization feature, the page should load this PostalCode only if there is no PostalCode included in the ShippingSimulation. But as we don't save the PostalCode from the ShippingSimulation, if the user refreshes the page, the one from the session must override the other from the ShippingSimulation.

How to test it?

So far, we are using mocked data, but you can play around inside the PDP. If something didn't work properly (because we are using a user session), try to clean the IndexDB data.

You can also see the storybook.

References

https://www.figma.com/file/EYJqnbWByrSX9EMKvBzBLm/22%2F06%2F14-Handoff-for-PDP-Components?node-id=1001%3A131786
https://www.figma.com/file/EYJqnbWByrSX9EMKvBzBLm/22%2F06%2F14-Handoff-for-PDP-Components?node-id=1001%3A152727
https://vtex-dev.atlassian.net/jira/software/projects/FS/boards/632?selectedIssue=FS-475

Checklist

You may erase this after checking them all ;)

Changelog

Added an entry in the CHANGELOG.md at the beginning of its due section. The latest version should come first.
Added the PR number with the PR link at the entry in the CHANGELOG.md. E.g., New items in the pull_request_template.md (#4)

PR Description

Added a label according to the PR goal - Breaking change, Enhancement, Bug or Chore.
Added the component, hook, or pathname in-between backticks (``) - If applicable. E.g., ComponentName component.
Identified the function or parameter in the PR - If applicable. E.g., useWindowDimensions hook.

Documentation

PR description
Added to/Updated the Storybook - if applicable.
For documentation changes, ping @ carolinamenezes or @ PedroAntunesCosta to review and update.

vercel · 2022-07-27T00:41:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nextjs-store-storybook	✅ Ready (Inspect)	Visit Preview	Aug 16, 2022 at 3:18PM (UTC)

vtex-sites · 2022-07-27T00:44:33Z

Preview is ready

This pull request generated a Preview

👀 Preview: https://preview-183--nextjs.preview.vtex.app
🔬 Go deeper by inspecting the Build Logs
📝 based on commit 64c74f6
⚠️ User login might not work on this preview.

vtex-sites · 2022-07-28T21:42:50Z

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit 64c74f6

Lighthouse Report by page
📎 /
📎 /apple-magic-mouse/p
📎 /office

eduardoformiga · 2022-08-15T21:27:38Z

should this blank space exist on the desktop? shouldn't the height of the space be equal to the height of the input + padding?

You are right! I have tried different approaches to solve this.

It's a CSS grid problem that involves the ProductGallery as well, and if we change the shipping simulation row it will affect the Product Image size. Since we are going to have other components like SkuSelector I think it's better to adjust the whole grid after finishing all components and using another task for it. So far, these sizes look acceptable without having to spend more time on something that will change. What do you think?

tlgimenes

LGTM

hellofanny · 2022-08-16T03:56:35Z

src/components/ui/InputText/InputText.tsx

@@ -36,6 +36,7 @@ type ActionableInputText =
      onSubmit?: never
      onClear?: never
      buttonActionText?: string
+      displayClearButton?: never


TIL never

src/components/ui/ShippingSimulation/shipping-simulation.module.scss

hellofanny

I've tested it on the PDP page, and looks great! 🚀
I've left just a few things to discuss :)
I was not able to see it in the storybook. Something seems to be broken there. Can you check it, pls?

Co-authored-by: Fanny Chien <[email protected]>

eduardoformiga · 2022-08-16T15:18:54Z

I was not able to see it in the storybook. Something seems to be broken there. Can you check it, pls?

Well observed! That's because after rebase with main and getting #157 updates, we don't have the SessionProvider anymore. So I just remove it and it works again 😉

eduardoformiga added 2 commits July 26, 2022 21:39

Tweaks PDP grid

c71b478

Creates shipping simulation component

4f23cef

vercel bot temporarily deployed to Preview July 27, 2022 00:43 Inactive

eduardoformiga added 4 commits July 27, 2022 13:41

Adds ShippingSimulation parts and styles

9b5757c

Tweaks PDP grid

14aa177

Updates input text clear button control

9440c50

Adds conditional rendering and session checking

2b9aec2

vercel bot temporarily deployed to Preview July 28, 2022 01:40 Inactive

Renames from Zip code to Postal Code

b3a181c

vercel bot temporarily deployed to Preview July 28, 2022 18:16 Inactive

eduardoformiga added 2 commits July 28, 2022 16:52

Makes Postal Code link text uniform

988b21a

Themification ShippingSimulation

bfba7ac

vercel bot temporarily deployed to Preview July 28, 2022 20:00 Inactive

eduardoformiga changed the title ~~Feat: Refinement/Creates Shipping Simulation~~ Feat: Refinement/Creates ShippingSimulation Jul 28, 2022

eduardoformiga added Documentation Improvements or additions to documentation Features New feature or request labels Jul 28, 2022

eduardoformiga added 2 commits July 28, 2022 17:41

Organizes ShippingSimulation component

d5cdfe9

Manages simulation state using single object

3db162a

vercel bot temporarily deployed to Preview July 28, 2022 21:32 Inactive

Adds CHANGELOG entry

5fd821b

vercel bot temporarily deployed to Preview July 28, 2022 22:27 Inactive

Creates Stories

4c97ef3

eduardoformiga changed the title ~~Feat: Refinement/Creates ShippingSimulation~~ Feat: [Component Refinements] Creates ShippingSimulation Jul 28, 2022

vercel bot temporarily deployed to Preview July 28, 2022 23:22 Inactive

eduardoformiga changed the title ~~Feat: [Component Refinements] Creates ShippingSimulation~~ Feat: [Refinements] Creates ShippingSimulation Jul 28, 2022

Merge branch 'main' into feat/fs-475-shipping-simulation

9e4d37d

eduardoformiga marked this pull request as ready for review July 28, 2022 23:29

eduardoformiga added 2 commits August 15, 2022 18:12

Extracts code into new hook that uses useReducer

3ccae86

Merge branch 'main' into feat/fs-475-shipping-simulation

b1c1185

vercel bot temporarily deployed to Preview August 15, 2022 21:19 Inactive

eduardoformiga requested review from tlgimenes and emersonlaurentino August 15, 2022 21:28

tlgimenes approved these changes Aug 15, 2022

View reviewed changes

hellofanny reviewed Aug 16, 2022

View reviewed changes

src/components/ui/ShippingSimulation/shipping-simulation.module.scss Outdated Show resolved Hide resolved

hellofanny reviewed Aug 16, 2022

View reviewed changes

src/components/ui/ShippingSimulation/shipping-simulation.module.scss Outdated Show resolved Hide resolved

hellofanny reviewed Aug 16, 2022

View reviewed changes

src/components/ui/ShippingSimulation/shipping-simulation.module.scss Outdated Show resolved Hide resolved

hellofanny reviewed Aug 16, 2022

View reviewed changes

src/components/ui/ShippingSimulation/shipping-simulation.module.scss Outdated Show resolved Hide resolved

hellofanny approved these changes Aug 16, 2022

View reviewed changes

Removes -tablet from tokens

3e02ec1

vercel bot temporarily deployed to Preview August 16, 2022 14:59 Inactive

eduardoformiga and others added 3 commits August 16, 2022 12:00

Tweaks border radius

da23293

Co-authored-by: Fanny Chien <[email protected]>

Tweaks font-size token

cac3156

Removes too specific token

2eef085

vercel bot temporarily deployed to Preview August 16, 2022 15:06 Inactive

eduardoformiga added 2 commits August 16, 2022 12:07

Merge branch 'main' into feat/fs-475-shipping-simulation

c67e72e

Tweaks tokens spaces

015bab6

vercel bot temporarily deployed to Preview August 16, 2022 15:10 Inactive

Removes SessionProvider from stories

64c74f6

vercel bot temporarily deployed to Preview August 16, 2022 15:18 Inactive

eduardoformiga merged commit 35aca51 into main Aug 16, 2022

eduardoformiga deleted the feat/fs-475-shipping-simulation branch August 16, 2022 15:42

eduardoformiga mentioned this pull request Aug 19, 2022

Feat: Shipping Simulation API #210

Merged

renatamottam mentioned this pull request Sep 15, 2022

Feat: [Refinements] Creates ShippingSimulation vtex-sites/gatsby.store#201

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: [Refinements] Creates `ShippingSimulation` #183

Feat: [Refinements] Creates `ShippingSimulation` #183

eduardoformiga commented Jul 27, 2022 •

edited

Loading

vercel bot commented Jul 27, 2022 •

edited

Loading

vtex-sites bot commented Jul 27, 2022 •

edited

Loading

vtex-sites bot commented Jul 28, 2022 •

edited

Loading

eduardoformiga commented Aug 15, 2022 •

edited

Loading

tlgimenes left a comment

hellofanny Aug 16, 2022

hellofanny left a comment

eduardoformiga commented Aug 16, 2022 •

edited

Loading

Feat: [Refinements] Creates ShippingSimulation #183

Feat: [Refinements] Creates ShippingSimulation #183

Conversation

eduardoformiga commented Jul 27, 2022 • edited Loading

What's the purpose of this pull request?

How does it work?

How to test it?

References

Checklist

vercel bot commented Jul 27, 2022 • edited Loading

vtex-sites bot commented Jul 27, 2022 • edited Loading

Preview is ready

This pull request generated a Preview

vtex-sites bot commented Jul 28, 2022 • edited Loading

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

eduardoformiga commented Aug 15, 2022 • edited Loading

tlgimenes left a comment

Choose a reason for hiding this comment

hellofanny Aug 16, 2022

Choose a reason for hiding this comment

hellofanny left a comment

Choose a reason for hiding this comment

eduardoformiga commented Aug 16, 2022 • edited Loading

Feat: [Refinements] Creates `ShippingSimulation` #183

Feat: [Refinements] Creates `ShippingSimulation` #183

eduardoformiga commented Jul 27, 2022 •

edited

Loading

vercel bot commented Jul 27, 2022 •

edited

Loading

vtex-sites bot commented Jul 27, 2022 •

edited

Loading

vtex-sites bot commented Jul 28, 2022 •

edited

Loading

eduardoformiga commented Aug 15, 2022 •

edited

Loading

eduardoformiga commented Aug 16, 2022 •

edited

Loading