Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-156940 AU price display #3115

Merged
merged 12 commits into from
Nov 4, 2024
Merged

MWPW-156940 AU price display #3115

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cf81949
MWPW-156940 AU price display
Oct 30, 2024
b82167c
MWPW-156940 AU price display
Oct 30, 2024
1992843
MWPW-156940 AU price display
Oct 30, 2024
359b3a4
Trigger Build
Oct 30, 2024
403b429
MWPW-156940 AU price display
Oct 30, 2024
1b0f127
MWPW-156940 AU price display
Oct 30, 2024
c4f3734
Trigger Build
Oct 30, 2024
6eed077
Trigger Build
Oct 30, 2024
13c1df2
MWPW-156940 AU price display
Nov 1, 2024
efe1399
Merge branch 'stage' into mwpw156940auabm2
Nov 1, 2024
25bf1ac
MWPW-156940 AU price display
Nov 1, 2024
b84d095
Trigger Build
Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions libs/blocks/merch/au-merch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.table .row-heading .col-heading .pricing {
display: flex;
flex-direction: column;
}

.table .row-heading .col-heading .pricing .price-annual-prefix:before {
content: '\A';
white-space: pre;
}

.table .row-heading .col-heading .pricing .price-annual-prefix,
.table .row-heading .col-heading .pricing .price-annual-prefix + .price-annual,
.table .row-heading .col-heading .pricing .price-annual-suffix {
font-size: var(--type-heading-xxs-size);
line-height: var(--type-heading-xxs-size);
font-weight: 400;
position: relative;
left: -3px;
}

merch-card [slot='heading-m'] [is="inline-price"] .price-annual-prefix:before {
content: '\A';
white-space: pre;
}
merch-card [slot='heading-m'] [is="inline-price"] .price-annual-prefix,
Copy link
Contributor

Choose a reason for hiding this comment

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

merch-card styles do not belong here. They should go in global.css.js in mas web-components.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@npeltier @yesil we need some decision here. We had this piece of CSS in libs/features/mas/web-components/src/global.css.js before. Nicolas proposed to move all such changes to au-merch.css which will be loaded on AU pages only. Do you think that this part should be an exception and that I should keep it in global.css.js ? Or it is better like this?

Copy link
Contributor

Choose a reason for hiding this comment

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

@bozojovicic (cc @yesil ) the two informations are not necessary contradictory.
i say i don't like having AU css (and logic back then) in all of the code,
ilyas says that he does not like having card WC styling in milo styles.

@yesil do you think that styling is generic to all m@s consumers? i would rather keep it in milo for now

Copy link
Contributor

Choose a reason for hiding this comment

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

@npeltier part of the CSS rules like the following look generic to me for annual price formatting.
anything that is for annual price formatting should stay in global.css.js IMO.

merch-card [slot='heading-m'] [is="inline-price"] .price-annual-prefix + .price-annual

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@yesil CSS rules that we have now in au-merch.css I initially had in

  • libs/blocks/table/table.css
  • libs/features/mas/web-components/src/global.css.js
  • libs/features/mas/web-components/src/variants/mini-compare-chart.css.js

and then we decided to move all of that to au-merch.css and load that file for AU pages only.
If I move this part to global.css.js, then I need to do the same for the part I copied from mini-compare-chart.css.js
And then only few rules will stay in au-merch.css and then this files loses its purpose.

For me, both approaches do the job. I personally vote to keep it all in au-merch.css. But I just need some decision which part goes where.
CC @npeltier

merch-card [slot='heading-m'] [is="inline-price"] .price-annual-prefix + .price-annual,
merch-card [slot='heading-m'] [is="inline-price"] .price-annual-suffix {
font-size: 16px;
line-height: 16px;
font-weight: 400;
position: relative;
left: -6px;
}

merch-card[variant="mini-compare-chart"] [slot="heading-m-price"] {
display: flex;
flex-direction: column;
}

merch-card[variant="mini-compare-chart"] .card-heading [is="inline-price"] .price-annual-prefix:before {
content: '\A';
white-space: pre;
}

merch-card[variant="mini-compare-chart"] .card-heading [is="inline-price"] .price-annual-prefix,
merch-card[variant="mini-compare-chart"] .card-heading [is="inline-price"] .price-annual-prefix + .price-annual,
merch-card[variant="mini-compare-chart"] .card-heading [is="inline-price"] .price-annual-suffix {
font-size: 16px;
line-height: 16px;
font-weight: 400;
position: relative;
left: -4px;
}
5 changes: 4 additions & 1 deletion libs/blocks/merch/merch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -562,7 +562,7 @@ export async function initService(force = false, attributes = {}) {
const { commerce, env: miloEnv, locale: miloLocale } = getConfig();
initService.promise = initService.promise ?? polyfills().then(async () => {
await import('../../deps/mas/commerce.js');
const { language, locale } = getMiloLocaleSettings(miloLocale);
const { language, locale, country } = getMiloLocaleSettings(miloLocale);
let service = document.head.querySelector('mas-commerce-service');
if (!service) {
service = createTag('mas-commerce-service', {
Expand All @@ -581,6 +581,9 @@ export async function initService(force = false, attributes = {}) {
if (isSignedIn) fetchEntitlements();
});
}
if (country === 'AU') {
await loadStyle(`${getConfig().base}/blocks/merch/au-merch.css`);
}
return service;
});
return initService.promise;
Expand Down
4 changes: 2 additions & 2 deletions libs/deps/mas/commerce.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file removed libs/features/mas/commerce/internal/tacocat-consonant-templates-1.13.0.tgz
View file
Open in desktop
Binary file not shown.
Binary file added libs/features/mas/commerce/internal/tacocat-consonant-templates-1.14.0.tgz
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion libs/features/mas/commerce/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"test:ci": "wtr --config ./web-test-runner.config.mjs --coverage"
},
"dependencies": {
"@dexter/tacocat-consonant-templates": "file:./internal/tacocat-consonant-templates-1.13.0.tgz",
"@dexter/tacocat-consonant-templates": "file:./internal/tacocat-consonant-templates-1.14.0.tgz",
"@dexter/tacocat-core": "file:./internal/tacocat-core-1.13.0.tgz",
"@pandora/commerce-checkout-url-builder": "file:./internal/commerce-checkout-url-builder-1.6.0.tgz",
"@pandora/data-models-odm": "file:./internal/data-models-odm-0.5.4.tgz",
Expand Down
4 changes: 4 additions & 0 deletions libs/features/mas/commerce/src/external.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
priceStrikethrough,
priceAnnual,
discount,
priceWithAnnual,
pricePromoWithAnnual,
} from '@dexter/tacocat-consonant-templates';
import {
computePromoStatus,
Expand Down Expand Up @@ -76,6 +78,8 @@ export {
priceOptical,
priceStrikethrough,
priceAnnual,
priceWithAnnual,
pricePromoWithAnnual,
discount,
toBoolean,
toEnumeration,
Expand Down
8 changes: 7 additions & 1 deletion libs/features/mas/commerce/src/price.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {
priceOptical,
priceStrikethrough,
priceAnnual,
priceWithAnnual,
pricePromoWithAnnual,
omitProperties,
toBoolean,
discount,
Expand Down Expand Up @@ -95,7 +97,11 @@ export function Price({ literals, providers, settings }) {
method = priceAnnual;
break;
default:
method = options.promotionCode ? pricePromo : price;
if (options.country === 'AU' && offers[0].planType === 'ABM') {
method = options.promotionCode ? pricePromoWithAnnual : priceWithAnnual;
} else {
method = options.promotionCode ? pricePromo : price;
}
}

const context = collectPriceOptions(options);
Expand Down
34 changes: 34 additions & 0 deletions libs/features/mas/commerce/test/price.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -625,11 +625,41 @@ describe('class "InlinePrice"', () => {
});

describe('commerce service', () => {
const offers = [
{
priceDetails: {
price: 32.98,
priceWithoutTax: 29.99,
usePrecision: true,
formatString: "'A$'#,##0.00",
taxDisplay: 'TAX_INCLUSIVE_DETAILS',
taxTerm: 'GST',
},
planType: 'ABM'
}
];
describe('function "buildPriceHTML"', () => {
it('returns empty string if no orders provided', async () => {
const { buildPriceHTML } = await initMasCommerceService();
expect(buildPriceHTML([])).to.be.empty;
});

it('returns empty string if no orders provided - AU with promo', async () => {
const { buildPriceHTML } = await initMasCommerceService();
const options = {
country: 'AU',
promotionCode: 'promo'
};
expect(buildPriceHTML(offers, options)).to.be.html(snapshots.auAbmAnnual);
});

it('returns empty string if no orders provided - AU no promo', async () => {
const { buildPriceHTML } = await initMasCommerceService();
const options = {
country: 'AU'
};
expect(buildPriceHTML(offers, options)).to.be.html(snapshots.auAbmAnnual);
});
});
describe('function "direct price calls"', () => {
it('works as expected', async () => {
Expand All @@ -643,6 +673,10 @@ describe('commerce service', () => {
buildPriceHTML({ priceDetails:{} }, { template: 'strikethrough', ...options });
buildPriceHTML({ priceDetails:{} }, { template: 'optical', ...options });
buildPriceHTML({ priceDetails:{} }, { template: 'annual', ...options });
buildPriceHTML(offers, { country: 'US' });
buildPriceHTML(offers, { country: 'US', promotionCode: 'promo' });
buildPriceHTML(offers, { country: 'AU' });
buildPriceHTML(offers, { country: 'AU', promotionCode: 'promo' });
});
});
});
26 changes: 26 additions & 0 deletions libs/features/mas/mocks/snapshots.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,31 @@ const taxExclusive = `
const discount = `<span class="discount">20%</span>`;
const noDiscount = `<span class="no-discount"></span>`;

const auAbmAnnual = `
<span class="price" aria-label="A$32.98">
<span class="price-currency-symbol">A$</span>
<span class="price-currency-space disabled"></span>
<span class="price-integer">32</span>
<span class="price-decimals-delimiter">.</span>
<span class="price-decimals">98</span>
<span class="price-recurrence disabled"></span>
<span class="price-unit-type disabled"></span>
<span class="price-tax-inclusivity disabled"></span>
</span>
<span class="price-annual-prefix">&nbsp;(</span>
<span class="price price-annual" aria-label="A$32.98">
<span class="price-currency-symbol">A$</span>
<span class="price-currency-space disabled"></span>
<span class="price-integer">32</span>
<span class="price-decimals-delimiter">.</span>
<span class="price-decimals">98</span>
<span class="price-recurrence disabled"></span>
<span class="price-unit-type disabled"></span>
<span class="price-tax-inclusivity disabled"></span>
</span>
<span class="price-annual-suffix">)</span>
`;

export default {
customLiterals,
optical,
Expand All @@ -140,4 +165,5 @@ export default {
taxExclusive,
discount,
noDiscount,
auAbmAnnual,
};
15 changes: 15 additions & 0 deletions test/blocks/merch/merch.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -873,4 +873,19 @@ describe('Merch Block', () => {
});
});
});

describe('AU resources', () => {
it('Load AU styles', async () => {
setConfig({
...config,
pathname: '/au/test.html',
locales: { au: { ietf: 'en-AU' } },
prodDomains: PROD_DOMAINS,
placeholders: { download: 'Download' },
locale: { prefix: '/au' },
});
await mockIms('AU');
await initService(true);
});
});
});
Loading