[MWPW-158927] Countdown Timer feedbacks incorporated #2955

rohitsahu · 2024-09-25T13:03:17Z

Added CDT to notifications. CDT in Modal already works. To be validated in testing.
For RTL, fixed the flex direction for the "timer-block" and the "timer-fragment".
Fixed the font-sizes based on the design: https://adobe.sharepoint.com/:p:/s/Adobedotcom/Eaw_AFM_SP5HpKZEYktTYdQBkmxRuJ69C0BsakLlSnEXJQ?e=lkcqHv
ENDS IN was not vertically aligned for CTL in notifications. Fixed be setting the ine-height.

Resolves: MWPW-158927

https://main--milo--adobecom.hlx.page/

Test URLs:

Set rtl to see the effect by setting document.dir in console:
document.dir = "rtl"

aem-code-sync · 2024-09-25T13:03:41Z

	Page	Scores	Audits	Google
📱	/ae_ar/drafts/nala/features/promotions/promo-replace-with-countdown?martech=off
🖥️	/ae_ar/drafts/nala/features/promotions/promo-replace-with-countdown?martech=off
📱	/drafts/rahulgup/marquee-parent
🖥️	/drafts/rahulgup/marquee-parent

codecov · 2024-09-25T13:06:04Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.29%. Comparing base (4bc2230) to head (2b55639).
Report is 7 commits behind head on stage.

Additional details and impacted files

@@            Coverage Diff             @@
##            stage    #2955      +/-   ##
==========================================
- Coverage   96.31%   96.29%   -0.02%     
==========================================
  Files         242      242              
  Lines       54987    54993       +6     
==========================================
- Hits        52959    52957       -2     
- Misses       2028     2036       +8

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

libs/features/cdt/cdt.css

libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js

libs/features/cdt/cdt.css

libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js

This reverts commit c7e4d1d.

mokimo · 2024-09-26T09:26:34Z

libs/features/cdt/cdt.css

@@ -49,7 +50,7 @@
  padding: 0 9px;
  width: 10px;
  border-radius: 5px;
-  font-size: var(--type-body-m-size);
+  font-size: 18px;


Why are you going away from using variables? 🤔

npeltier

lgtm thanks a lot @rohitsahu !

afmicka · 2024-09-27T15:39:44Z

@rohitsahu @rahulgupta999 looking into the CDT design for modal, the placement does not seem right. Shouldn't the CDT be below the text of the modal (in a way connected to it)? Could you please check the exact requirement for this arrangement as well? Also looks too much on the left, outside of the margins

Expected:

Actual (https://mwpw-158927--milo--rohitsahu.hlx.page/drafts/rahulgup/modal-cdt):

rohitsahu · 2024-09-30T06:24:10Z

@rohitsahu @rahulgupta999 looking into the CDT design for modal, the placement does not seem right. Shouldn't the CDT be below the text of the modal (in a way connected to it)? Could you please check the exact requirement for this arrangement as well? Also looks too much on the left, outside of the margins

Expected:

Actual (https://mwpw-158927--milo--rohitsahu.hlx.page/drafts/rahulgup/modal-cdt):

Agreed. Also discussed, issue is present with CTL in media block as well. Both issues will be fixed in this PR.

rohitsahu · 2024-09-30T07:31:45Z

@rohitsahu @rahulgupta999 looking into the CDT design for modal, the placement does not seem right. Shouldn't the CDT be below the text of the modal (in a way connected to it)? Could you please check the exact requirement for this arrangement as well? Also looks too much on the left, outside of the margins

Expected:

Actual (https://mwpw-158927--milo--rohitsahu.hlx.page/drafts/rahulgup/modal-cdt):

@afmicka Fixed, please verify

afmicka · 2024-09-30T09:10:03Z

@rohitsahu there is a noticeable difference in box size that was not there before. Could you please take a look?
https://mwpw-158927--milo--rohitsahu.hlx.page/ae_ar/drafts/nala/features/promotions/promo-replace-with-countdown?martech=off
main (and design):

actual:

rohitsahu · 2024-09-30T09:35:19Z

@rohitsahu there is a noticeable difference in box size that was not there before. Could you please take a look? https://mwpw-158927--milo--rohitsahu.hlx.page/ae_ar/drafts/nala/features/promotions/promo-replace-with-countdown?martech=off main (and design):

actual:

@afmicka For Arabic font size is larger (1.25x) for texts, hence I fixed the CDT font sizes as well to keep the sizes consistent with the body texts.

cc: @rahulgupta999

* stage: MWPW-158886: update the way we send arbitrary fields to caas (adobecom#2977) MWPW-159028: MAS more technical documents + refactored aem related code (adobecom#2952) MWPW-158776 Fix video CLS (adobecom#2915) MWPW-159197 Invoke onReady of standalone gnav when it is rendered adobecom#2962 (adobecom#2963) MWPW-159157: Update modal to account for new image size (adobecom#2975) Reverts MWPW-157555: Causing prices and CTAs to fail in Safari (adobecom#2987) [MWPW-159287 : NALA] Enhance Nala Run Command to Support Feature Branches with with an owner other than 'adobecom' (adobecom#2978) [MWPW-158927] Countdown Timer feedbacks incorporated (adobecom#2955) [MWPW-159265] Callout text in RTL not properly aligned (adobecom#2974) Add support for Jarvis through Unav and make appID of notifications configurable (adobecom#2969) MWPW-159236 Fix duplicate percent in donut chart tooltip (adobecom#2968) MWPW-144360 Prototype pollution tag selector (adobecom#2967) [MWPW-153616] Update 404 links in region selector (adobecom#2956) MWPW-157555: Remove useless logic and putting import commerce.js top. (adobecom#2906) # Conflicts: # libs/deps/mas/mas.js # libs/deps/mas/merch-card.js # libs/deps/mas/plans-modal.js # libs/features/mas/web-components/src/global.css.js

* Fix RTL issues with Countdown Timer * UT fix * review comment * review comment * review comment * font fixes * do not reverse * Revert "UT fix" This reverts commit c7e4d1d. * added CDT in notifications standard variant * ends in vertical positioning fix * review comments * UT added for cdt in notification * lint * css fixes * minor fix * lint * css * update timer for instant query param * narcis review feedback incorporated from PR adobecom#2928 * minor refactoring * fix CDT alignment in media and modal block --------- Co-authored-by: Rohit Sahu <rosahu@adobe.com>

Fix RTL issues with Countdown Timer

f2bd706

rohitsahu requested a review from a team as a code owner September 25, 2024 13:03

UT fix

c7e4d1d

rahulgupta999 requested review from yesil, npeltier, Axelcureno, rahulgupta999, afmicka, mirafedas and bozojovicic September 25, 2024 15:56

npeltier requested changes Sep 25, 2024

View reviewed changes

libs/features/cdt/cdt.css Outdated Show resolved Hide resolved

libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js Outdated Show resolved Hide resolved

Axelcureno reviewed Sep 25, 2024

View reviewed changes

libs/features/cdt/cdt.css Outdated Show resolved Hide resolved

Axelcureno reviewed Sep 25, 2024

View reviewed changes

libs/features/cdt/cdt.css Outdated Show resolved Hide resolved

Rohit Sahu added 2 commits September 26, 2024 11:16

review comment

e42a1e2

review comment

26a0fef

rahulgupta999 suggested changes Sep 26, 2024

View reviewed changes

libs/features/cdt/cdt.css Outdated Show resolved Hide resolved

Rohit Sahu added 3 commits September 26, 2024 11:36

review comment

82e35d9

font fixes

dcfa31f

do not reverse

c193382

rohitsahu commented Sep 26, 2024

View reviewed changes

libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js Outdated Show resolved Hide resolved

rohitsahu changed the title ~~Fix RTL issues with Countdown Timer~~ [MWPW-158927] Countdown Timer feedback incorporated Sep 26, 2024

rohitsahu requested review from Axelcureno, rahulgupta999 and npeltier September 26, 2024 06:29

rohitsahu changed the title ~~[MWPW-158927] Countdown Timer feedback incorporated~~ [MWPW-158927] Countdown Timer feedbacks incorporated Sep 26, 2024

Rohit Sahu added 2 commits September 26, 2024 14:14

Revert "UT fix"

c781d19

This reverts commit c7e4d1d.

Merge branch 'stage' into MWPW-158927

cc8c772

mokimo reviewed Sep 26, 2024

View reviewed changes

Rohit Sahu added 3 commits September 27, 2024 13:06

css fixes

10e9dba

minor fix

cb924d5

lint

56fb47b

rohitsahu requested review from overmyheadandbody and mokimo September 27, 2024 07:57

Rohit Sahu added 4 commits September 27, 2024 13:32

css

a1327a9

update timer for instant query param

8da11ef

narcis review feedback incorporated from PR adobecom#2928

398f172

minor refactoring

b6cdd32

rahulgupta999 approved these changes Sep 27, 2024

View reviewed changes

rahulgupta999 added bug Something isn't working run-nala Run Nala Test Automation against PR commerce high priority Why is this a high priority? Blocker? Critical? Dependency? needs-verification PR requires E2E testing by a reviewer labels Sep 27, 2024

npeltier approved these changes Sep 27, 2024

View reviewed changes

rahulgupta999 assigned afmicka Sep 27, 2024

fix CDT alignment in media and modal block

2b55639

afmicka added verified PR has been E2E tested by a reviewer Ready for Stage and removed needs-verification PR requires E2E testing by a reviewer labels Sep 30, 2024

milo-pr-merge bot merged commit 1fc0c79 into adobecom:stage Sep 30, 2024
23 checks passed

milo-pr-merge bot mentioned this pull request Sep 30, 2024

[Release] Stage to Main #2980

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MWPW-158927] Countdown Timer feedbacks incorporated #2955

[MWPW-158927] Countdown Timer feedbacks incorporated #2955

rohitsahu commented Sep 25, 2024 •

edited

Loading

aem-code-sync bot commented Sep 25, 2024 •

edited

Loading

codecov bot commented Sep 25, 2024 •

edited

Loading

mokimo Sep 26, 2024

npeltier left a comment

afmicka commented Sep 27, 2024 •

edited

Loading

rohitsahu commented Sep 30, 2024

rohitsahu commented Sep 30, 2024

afmicka commented Sep 30, 2024 •

edited

Loading

rohitsahu commented Sep 30, 2024

[MWPW-158927] Countdown Timer feedbacks incorporated #2955

[MWPW-158927] Countdown Timer feedbacks incorporated #2955

Conversation

rohitsahu commented Sep 25, 2024 • edited Loading

aem-code-sync bot commented Sep 25, 2024 • edited Loading

codecov bot commented Sep 25, 2024 • edited Loading

Codecov Report

mokimo Sep 26, 2024

Choose a reason for hiding this comment

npeltier left a comment

Choose a reason for hiding this comment

afmicka commented Sep 27, 2024 • edited Loading

rohitsahu commented Sep 30, 2024

rohitsahu commented Sep 30, 2024

afmicka commented Sep 30, 2024 • edited Loading

rohitsahu commented Sep 30, 2024

rohitsahu commented Sep 25, 2024 •

edited

Loading

aem-code-sync bot commented Sep 25, 2024 •

edited

Loading

codecov bot commented Sep 25, 2024 •

edited

Loading

afmicka commented Sep 27, 2024 •

edited

Loading

afmicka commented Sep 30, 2024 •

edited

Loading