Skip to content

Commit 103f5f3

Browse files
surekhawsurekhaw
authored
feat: CA pi4 message formatting and modal update (#1233)
1 parent 2e1b456 commit 103f5f3

File tree

73 files changed

+283
-50
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+283
-50
lines changed

‎content/messages/CA/generic_fr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"meta": {
33
"id": "",
44
"offerCountry": "CA",
5+
"language": "fr-CA",
56
"offerType": "GENERIC",
67
"messageType": "GENERIC",
78
"offerTerm": "${CREDIT_OFFERS_DS.total_payments}",

‎content/messages/CA/short_term_nq_fr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"id": "",
44
"offerCountry": "CA",
55
"offerType": "PAY_LATER_SHORT_TERM",
6+
"language": "fr-CA",
67
"messageType": "PLST_NQ",
78
"offerTerm": "${CREDIT_OFFERS_DS.total_payments}",
89
"lander": "",

‎content/messages/CA/short_term_q_fr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"meta": {
33
"id": "",
44
"offerCountry": "CA",
5+
"language": "fr-CA",
56
"offerType": "PAY_LATER_SHORT_TERM",
67
"messageType": "PLST_SQ",
78
"offerTerm": "${CREDIT_OFFERS_DS.total_payments}",

‎content/modals/CA/short_term_fr.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"content": {
2828
"headline": "Payer en 4 versements sans intérêt",
2929
"subheadline": "Aucun impact sur la cote de crédit et aucuns frais de retard. Disponible pour les achats de {formattedMinAmount} à {formattedMaxAmount}.",
30-
"qualifyingSubheadline": "Divisez le montant de {formattedTotalCost} en {total_payments} versements sans intérêt, sans incidence sur votre cote de crédit et sans frais de retard.",
30+
"qualifyingSubheadline": "Divisez votre achat de {formattedTotalCost} en {total_payments} versements, sans incidence sur votre cote de crédit et sans frais de retard.",
3131
"donutTimestamps": ["Aujourd'hui", "2 semaines", "4 semaines", "6 semaines"],
3232
"instructions": [
3333
"Choisissez PayPal à la caisse pour payer plus tard avec <strong>le Paiement en 4</strong>.",

‎src/components/modal/v2/parts/Container.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const Container = ({ children }) => {
2828
merchantId,
2929
customerId,
3030
buyerCountry,
31+
language,
3132
ignoreCache,
3233
version,
3334
env,
@@ -72,6 +73,7 @@ const Container = ({ children }) => {
7273
merchantId,
7374
customerId,
7475
buyerCountry,
76+
language,
7577
ignoreCache,
7678
version,
7779
env,
@@ -87,7 +89,7 @@ const Container = ({ children }) => {
8789
setServerData(data);
8890
setLoading(false);
8991
});
90-
}, [currency, amount, payerId, clientId, merchantId, buyerCountry]);
92+
}, [currency, amount, payerId, clientId, merchantId, buyerCountry, language]);
9193

9294
useEffect(() => {
9395
setupTabTrap();

‎src/library/zoid/message/component.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,8 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
148148
const { onClick } = props;
149149

150150
return ({ meta }) => {
151-
const { modal, index, account, merchantId, currency, amount, buyerCountry, onApply } = props;
151+
const { modal, index, account, merchantId, currency, amount, buyerCountry, language, onApply } =
152+
props;
152153
const { offerType, offerCountry, messageRequestId, lander } = meta;
153154
if (offerType === 'PURCHASE_PROTECTION') {
154155
if (getURIPopup(lander, offerType) == null) {
@@ -163,6 +164,7 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
163164
currency,
164165
amount,
165166
buyerCountry,
167+
language,
166168
onApply,
167169
offer: offerType,
168170
offerCountry,

‎src/server/locale/CA/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import validOptions from './validOptions';
22
import getMutations from './mutations';
33
import logos from '../../message/logos';
4-
import styles from './styles';
4+
import getStyles from './styles';
55

6-
export default {
6+
export default language => ({
77
localeClass: 'locale--CA',
8-
productName: ['with', 'PayPal.'],
8+
productName: language === 'fr-CA' ? ['avec', 'PayPal.'] : ['with', 'PayPal.'],
99
validOptions,
1010
getMutations,
1111
logos,
12-
styles
13-
};
12+
styles: getStyles
13+
});

‎src/server/locale/CA/mutations/generic.js‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
import Logo from '../../../message/logos';
2+
import { textWrap, messageLogoWidth, altNoWrap, setLogoTop } from '../../../message/mediaQueries';
3+
import { flexLogoMutations, textLogoMutations } from '../../../message/logoMutations';
4+
5+
const flex = [
6+
[
7+
'default',
8+
{
9+
logo: Logo.PP_PAYPAL.WHITE,
10+
headline: [
11+
{
12+
tag: 'xsmall'
13+
}
14+
],
15+
disclaimer: ['default']
16+
}
17+
],
18+
[
19+
'ratio:20x1',
20+
{
21+
styles: [
22+
`
23+
@media (min-aspect-ratio: 200/11) and (min-width: 523px) {
24+
.message__logo-container {
25+
max-width: 12%;
26+
}
27+
}
28+
29+
@media (min-aspect-ratio: 200/11) and (min-width: 300px) {
30+
.message__logo:nth-of-type(1) {
31+
width: 18%;
32+
}
33+
.message__logo:nth-of-type(2) {
34+
width: 60%;
35+
}
36+
}
37+
38+
@media (min-aspect-ratio: 60/11) and (min-width: 324px) {
39+
.message__headline .tag--xsmall .br:first-child {
40+
display: inline;
41+
}
42+
}
43+
`
44+
]
45+
}
46+
],
47+
[
48+
'ratio:8x1',
49+
{
50+
headline: [
51+
{
52+
tag: 'xsmall'
53+
}
54+
],
55+
styles: [
56+
`@media (min-aspect-ratio: 60/11) and (min-width: 324px) {
57+
.message__headline .tag--xsmall .br:first-child {
58+
display: inline;
59+
}
60+
}
61+
`
62+
]
63+
}
64+
],
65+
[
66+
'ratio:1x4',
67+
{
68+
headline: [
69+
{
70+
tag: 'xsmall'
71+
}
72+
],
73+
styles: [
74+
`.message__headline .tag--xsmall {
75+
display: inline;
76+
}`
77+
]
78+
}
79+
],
80+
['color:white-no-border', { logo: Logo.PP_PAYPAL.COLOR }],
81+
...flexLogoMutations
82+
];
83+
84+
export default {
85+
'layout:flex': flex,
86+
'layout:text': [
87+
[
88+
'default',
89+
({ textSize }) => ({
90+
styles: [
91+
textWrap(textSize * 38, textSize, 'US'),
92+
messageLogoWidth(false, textSize * 4, textSize * 1.25),
93+
setLogoTop(textSize * 20)
94+
],
95+
logo: Logo.PP_PAYPAL.COLOR,
96+
headline: [{ tag: 'xsmall' }],
97+
disclaimer: ['default']
98+
})
99+
],
100+
[
101+
'logo.type:primary && logo.position:right',
102+
({ textSize }) => ({
103+
styles: [setLogoTop(textSize * 22), messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)]
104+
})
105+
],
106+
[
107+
'logo.type:primary && logo.position:top',
108+
({ textSize }) => ({
109+
styles: [messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)]
110+
})
111+
],
112+
[
113+
'logo.type:alternative',
114+
({ textSize }) => ({
115+
styles: [
116+
`@media screen and (max-width: ${textSize * 10.5}px) { .message__content { white-space: nowrap; }}`,
117+
textWrap(textSize * 32, textSize, 'US'),
118+
altNoWrap(textSize * 10.6),
119+
messageLogoWidth(textSize * 1.75, textSize * 4, textSize * 1.25)
120+
],
121+
logo: Logo.PP_PAYPAL.COLOR[0]
122+
})
123+
],
124+
[
125+
'logo.type:none',
126+
({ textSize }) => ({
127+
styles: [`@media screen and (max-width: ${textSize * 37.3}) {.message__content {margin-top: 0px;}}`],
128+
logo: false,
129+
headline: [
130+
{
131+
tag: 'xsmall.2',
132+
br: ['later.', 'tard.'],
133+
replace: [
134+
['later.', 'later'],
135+
['tard.', 'tard']
136+
]
137+
}
138+
]
139+
})
140+
],
141+
[
142+
'logo.type:inline',
143+
({ textSize }) => ({
144+
styles: [`.message__logo { width: ${textSize * 4}px }`],
145+
logo: Logo.NO_PP_MONOGRAM.COLOR,
146+
headline: [
147+
{
148+
tag: 'xsmall.2',
149+
br: ['later.', 'tard.'],
150+
replace: [
151+
['later.', 'later'],
152+
['tard.', 'tard']
153+
]
154+
}
155+
]
156+
})
157+
],
158+
...textLogoMutations
159+
]
160+
};

‎src/server/locale/CA/mutations/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
/* eslint-disable eslint-comments/disable-enable-pair */
22
// mutations import here.
3+
import generic from './generic';
34
import shortTermNQ from './short_term_nq';
45
import shortTermQ from './short_term_q';
56

67
export default function getMutations(id, type) {
78
switch (id) {
8-
case 'GPLQ':
99
case 'PLST_SQ':
1010
return shortTermQ[type];
11-
case 'GPLNQ':
1211
case 'PLST_NQ':
13-
default:
1412
return shortTermNQ[type];
13+
case 'GENERIC':
14+
default:
15+
return generic[type];
1516
}
1617
}

‎src/server/locale/CA/mutations/short_term_nq.js‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export default {
7373
headline: [
7474
{
7575
tag: 'medium',
76-
br: ['of']
76+
br: ['for', 'pour']
7777
},
7878
{ tag: 'xsmall' }
7979
],
@@ -124,12 +124,18 @@ export default {
124124
headline: [
125125
{
126126
tag: 'medium',
127-
br: ['on'],
128-
replace: [['00.', '00']]
127+
br: ['for', 'pour'],
128+
replace: [
129+
['00.', '00'],
130+
['00 $.', '00 $']
131+
]
129132
},
130133
{
131134
tag: 'xsmall.2',
132-
replace: [['later.', 'later']]
135+
replace: [
136+
['later.', 'later'],
137+
['tard.', 'tard']
138+
]
133139
}
134140
]
135141
})
@@ -143,11 +149,17 @@ export default {
143149
{
144150
tag: 'medium',
145151
br: ['on'],
146-
replace: [['00.', '00']]
152+
replace: [
153+
['00.', '00'],
154+
['00 $.', '00 $']
155+
]
147156
},
148157
{
149158
tag: 'xsmall.2',
150-
replace: [['later.', 'later']]
159+
replace: [
160+
['later.', 'later'],
161+
['tard.', 'tard']
162+
]
151163
}
152164
]
153165
})

0 commit comments

Comments
 (0)