{renderProductListLink()}
diff --git a/src/components/modal/v2/parts/views/PayIn1/styles.scss b/src/components/modal/v2/parts/views/PayIn1/styles.scss
index 3c8dca3c90..bf6b02395a 100644
--- a/src/components/modal/v2/parts/views/PayIn1/styles.scss
+++ b/src/components/modal/v2/parts/views/PayIn1/styles.scss
@@ -9,6 +9,19 @@
padding: 0px;
}
+ .learnMoreLink__container {
+ font-size: 14px;
+
+ @include mixins.tablet {
+ margin-top: 10px;
+ }
+
+ @include mixins.mobile {
+ margin-top: 20px;
+ margin-left: 0px;
+ }
+ }
+
&.nav__link-prefix {
min-width: 315px;
padding: 0px;
@@ -27,4 +40,93 @@
}
}
}
+
+ .pay-in-1-upstream-gb {
+ .content__row.dynamic {
+ background-color: colors.$white;
+ box-sizing: border-box;
+ flex-direction: column;
+ height: auto;
+ margin: 0 -20px;
+ padding: 24px 20px 32px;
+
+ @include mixins.desktop {
+ .content__col {
+ width: 100%;
+ }
+ }
+
+ .content__col:last-child {
+ display: none;
+ }
+ }
+
+ .content__row.disclosure.v5Design {
+ box-sizing: border-box;
+ color: #696969;
+ font-size: 12px;
+ line-height: 16px;
+ margin: 0 -20px;
+ padding: 32px 20px 0;
+
+ @include mixins.desktop {
+ margin: 0 -20px;
+ }
+
+ @include mixins.tablet {
+ margin: 0 -20px;
+ }
+
+ @include mixins.mobile {
+ margin: 0 -20px;
+ }
+
+ .inline-link {
+ font-size: 12px;
+ line-height: 16px;
+ }
+ }
+
+ .learnMoreLink__container {
+ font-size: 12px;
+ line-height: 16px;
+ margin-top: 16px;
+
+ @include mixins.tablet {
+ margin-top: 16px;
+ }
+
+ @include mixins.mobile {
+ margin-left: 0;
+ margin-top: 16px;
+ }
+
+ .inline-link {
+ font-size: 12px;
+ line-height: 16px;
+ }
+ }
+
+ .content__row.productLink {
+ padding-right: 0;
+ }
+
+ .product-list-link.gb {
+ font-size: 12px;
+ line-height: 16px;
+ margin: 16px 20px 20px;
+
+ @include mixins.desktop {
+ margin: 16px 20px 24px;
+ }
+
+ @include mixins.tablet {
+ margin: 16px 20px 24px;
+ }
+
+ @include mixins.mobile {
+ margin: 16px 20px 24px;
+ }
+ }
+ }
}
diff --git a/src/components/modal/v2/styles/components/_header.scss b/src/components/modal/v2/styles/components/_header.scss
index 61a95f5c9e..0b75d2cd1b 100644
--- a/src/components/modal/v2/styles/components/_header.scss
+++ b/src/components/modal/v2/styles/components/_header.scss
@@ -206,6 +206,32 @@
width: 30px;
}
}
+
+ &.v5Dot1Design {
+ height: 18px;
+ width: 18px;
+ padding: 0;
+ margin-left: auto;
+
+ svg {
+ height: 18px;
+ width: 18px;
+
+ path {
+ fill: #000000;
+ }
+ }
+ }
+ }
+
+ &.v5Dot1Design {
+ flex: 0 0 38px;
+ padding: 10px;
+ justify-content: flex-end;
+
+ @include mixins.mobile {
+ flex: 0 0 38px;
+ }
}
&.checkout {
@@ -455,6 +481,116 @@
}
}
+ &--upstream-pay-in-30-gb {
+ padding-top: 0;
+ padding-bottom: 0;
+
+ @include mixins.desktop {
+ padding-bottom: 0;
+ }
+
+ @include mixins.tablet {
+ padding-bottom: 0;
+ }
+
+ .header__upstream-brand {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-top: 12px;
+ padding: 0 24px;
+ box-sizing: border-box;
+ }
+
+ .header__upstream-logo {
+ svg {
+ display: block;
+ height: auto;
+ max-width: 100%;
+ }
+ }
+
+ .header__upstream-titles {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ h2.headline--upstream-pay-in-30-gb {
+ box-sizing: border-box;
+ color: colors.$black;
+ font-family: variables.$paypal-pro;
+ font-size: 32px;
+ font-weight: 900;
+ letter-spacing: -0.64px;
+ line-height: 36px;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+
+ @include mixins.desktop {
+ margin-left: 0;
+ }
+
+ @include mixins.tablet {
+ margin-left: 0;
+ }
+
+ @include mixins.mobile {
+ margin-left: 0;
+ max-width: 100%;
+ }
+
+ &.v5Design {
+ font-size: 32px;
+ line-height: 36px;
+ }
+ }
+
+ .subheadline_p.subheadline--upstream-pay-in-30-gb {
+ box-sizing: border-box;
+ color: colors.$black;
+ font-size: 14px;
+ line-height: 18px;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+
+ @include mixins.desktop {
+ margin-bottom: 0;
+ margin-left: 0;
+ }
+
+ @include mixins.tablet {
+ margin-bottom: 0;
+ margin-left: 0;
+ max-width: 100%;
+ padding: 0;
+ }
+
+ @include mixins.mobile {
+ line-height: 18px;
+ margin-left: 0;
+ max-width: 100%;
+ padding: 0;
+ }
+
+ &.v5Design {
+ margin-bottom: 0;
+ max-width: 100%;
+ padding: 0;
+
+ @include mixins.mobile {
+ padding: 0;
+ }
+ }
+
+ span {
+ white-space: normal;
+ }
+ }
+ }
+
&.checkout {
background-color: colors.$white;
diff --git a/src/components/modal/v2/styles/components/_instructions.scss b/src/components/modal/v2/styles/components/_instructions.scss
index 30bafb237e..f3c6a6e771 100644
--- a/src/components/modal/v2/styles/components/_instructions.scss
+++ b/src/components/modal/v2/styles/components/_instructions.scss
@@ -253,4 +253,55 @@
display: flex;
}
}
+
+ &.instructions--upstream-pay-in-30-gb {
+ @include mixins.desktop {
+ padding-left: 0;
+ }
+
+ @include mixins.tablet {
+ justify-content: flex-start;
+ }
+
+ &.v5Design {
+ margin-bottom: 0;
+ padding-top: 0;
+ }
+
+ li {
+ font-size: 14px;
+ line-height: 18px;
+ padding-bottom: 0;
+ }
+
+ ol {
+ margin: 0;
+ width: 100%;
+ }
+
+ .instructions__item-wrapper {
+ margin-bottom: 24px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ > div {
+ flex: 1 1 auto;
+ font-size: 14px;
+ line-height: 18px;
+ min-width: 0;
+ }
+ }
+
+ .instructions__bullet {
+ box-sizing: border-box;
+ flex-shrink: 0;
+ font-size: 14px;
+ line-height: 18px;
+ margin-right: 12px;
+ text-align: center;
+ width: 28px;
+ }
+ }
}
diff --git a/src/server/locale/GB/GPL/index.js b/src/server/locale/GB/GPL/index.js
new file mode 100644
index 0000000000..00cf1eab30
--- /dev/null
+++ b/src/server/locale/GB/GPL/index.js
@@ -0,0 +1,13 @@
+import validOptions from './validOptions';
+import getMutations from './mutations';
+import logos from '../../../message/logos';
+import styles from './styles';
+
+export default {
+ localeClass: 'locale--GB',
+ productName: ['with', 'PayPal.'],
+ validOptions,
+ getMutations,
+ logos,
+ styles
+};
diff --git a/src/server/locale/GB/mutations/gpl.js b/src/server/locale/GB/GPL/mutations/gpl.js
similarity index 96%
rename from src/server/locale/GB/mutations/gpl.js
rename to src/server/locale/GB/GPL/mutations/gpl.js
index 6890a53aa5..0a5a05aec1 100644
--- a/src/server/locale/GB/mutations/gpl.js
+++ b/src/server/locale/GB/GPL/mutations/gpl.js
@@ -1,4 +1,4 @@
-import Logo from '../../../message/logos';
+import Logo from '../../../../message/logos';
import {
textWrap,
messageLogoWidth,
@@ -6,8 +6,8 @@ import {
logo20x1,
altNoWrap,
setLogoTop
-} from '../../../message/mediaQueries';
-import { textLogoMutations, flexLogoMutations } from '../../../message/logoMutations';
+} from '../../../../message/mediaQueries';
+import { textLogoMutations, flexLogoMutations } from '../../../../message/logoMutations';
export default {
'layout:text': [
diff --git a/src/server/locale/GB/mutations/gplq.js b/src/server/locale/GB/GPL/mutations/gplq.js
similarity index 96%
rename from src/server/locale/GB/mutations/gplq.js
rename to src/server/locale/GB/GPL/mutations/gplq.js
index 2a124e6603..9cff420d45 100644
--- a/src/server/locale/GB/mutations/gplq.js
+++ b/src/server/locale/GB/GPL/mutations/gplq.js
@@ -1,4 +1,4 @@
-import Logo from '../../../message/logos';
+import Logo from '../../../../message/logos';
import {
textWrap,
messageLogoWidth,
@@ -7,8 +7,8 @@ import {
altNoWrap,
setLogoTop,
addPeriod
-} from '../../../message/mediaQueries';
-import { textLogoMutations, flexLogoMutations } from '../../../message/logoMutations';
+} from '../../../../message/mediaQueries';
+import { textLogoMutations, flexLogoMutations } from '../../../../message/logoMutations';
export default {
'layout:text': [
diff --git a/src/server/locale/GB/mutations/index.js b/src/server/locale/GB/GPL/mutations/index.js
similarity index 100%
rename from src/server/locale/GB/mutations/index.js
rename to src/server/locale/GB/GPL/mutations/index.js
diff --git a/src/server/locale/GB/styles/flex/base.css b/src/server/locale/GB/GPL/styles/flex/base.css
similarity index 100%
rename from src/server/locale/GB/styles/flex/base.css
rename to src/server/locale/GB/GPL/styles/flex/base.css
diff --git a/src/server/locale/GB/styles/flex/index.js b/src/server/locale/GB/GPL/styles/flex/index.js
similarity index 100%
rename from src/server/locale/GB/styles/flex/index.js
rename to src/server/locale/GB/GPL/styles/flex/index.js
diff --git a/src/server/locale/GB/styles/flex/ratio--1x1.css b/src/server/locale/GB/GPL/styles/flex/ratio--1x1.css
similarity index 100%
rename from src/server/locale/GB/styles/flex/ratio--1x1.css
rename to src/server/locale/GB/GPL/styles/flex/ratio--1x1.css
diff --git a/src/server/locale/GB/styles/flex/ratio--1x4.css b/src/server/locale/GB/GPL/styles/flex/ratio--1x4.css
similarity index 100%
rename from src/server/locale/GB/styles/flex/ratio--1x4.css
rename to src/server/locale/GB/GPL/styles/flex/ratio--1x4.css
diff --git a/src/server/locale/GB/styles/flex/ratio--20x1.css b/src/server/locale/GB/GPL/styles/flex/ratio--20x1.css
similarity index 100%
rename from src/server/locale/GB/styles/flex/ratio--20x1.css
rename to src/server/locale/GB/GPL/styles/flex/ratio--20x1.css
diff --git a/src/server/locale/GB/styles/flex/ratio--6x1.css b/src/server/locale/GB/GPL/styles/flex/ratio--6x1.css
similarity index 100%
rename from src/server/locale/GB/styles/flex/ratio--6x1.css
rename to src/server/locale/GB/GPL/styles/flex/ratio--6x1.css
diff --git a/src/server/locale/GB/styles/flex/ratio--8x1.css b/src/server/locale/GB/GPL/styles/flex/ratio--8x1.css
similarity index 100%
rename from src/server/locale/GB/styles/flex/ratio--8x1.css
rename to src/server/locale/GB/GPL/styles/flex/ratio--8x1.css
diff --git a/src/server/locale/GB/styles/index.js b/src/server/locale/GB/GPL/styles/index.js
similarity index 100%
rename from src/server/locale/GB/styles/index.js
rename to src/server/locale/GB/GPL/styles/index.js
diff --git a/src/server/locale/GB/GPL/styles/text/index.js b/src/server/locale/GB/GPL/styles/text/index.js
new file mode 100644
index 0000000000..527fee1134
--- /dev/null
+++ b/src/server/locale/GB/GPL/styles/text/index.js
@@ -0,0 +1,3 @@
+import sharedGPLTextStyles from '../../../../common/styles/GPL/text';
+
+export default [...sharedGPLTextStyles];
diff --git a/src/server/locale/GB/validOptions.js b/src/server/locale/GB/GPL/validOptions.js
similarity index 95%
rename from src/server/locale/GB/validOptions.js
rename to src/server/locale/GB/GPL/validOptions.js
index fe8d2563ba..10771f5ceb 100644
--- a/src/server/locale/GB/validOptions.js
+++ b/src/server/locale/GB/GPL/validOptions.js
@@ -1,4 +1,4 @@
-import { Types } from '../../types';
+import { Types } from '../../../types';
export default {
text: {
diff --git a/src/server/locale/GB/Pi30/index.js b/src/server/locale/GB/Pi30/index.js
new file mode 100644
index 0000000000..00cf1eab30
--- /dev/null
+++ b/src/server/locale/GB/Pi30/index.js
@@ -0,0 +1,13 @@
+import validOptions from './validOptions';
+import getMutations from './mutations';
+import logos from '../../../message/logos';
+import styles from './styles';
+
+export default {
+ localeClass: 'locale--GB',
+ productName: ['with', 'PayPal.'],
+ validOptions,
+ getMutations,
+ logos,
+ styles
+};
diff --git a/src/server/locale/GB/Pi30/mutations/index.js b/src/server/locale/GB/Pi30/mutations/index.js
new file mode 100644
index 0000000000..db3e517e88
--- /dev/null
+++ b/src/server/locale/GB/Pi30/mutations/index.js
@@ -0,0 +1,13 @@
+// mutations import here.
+import pay30nq from './pay30nq';
+import pay30q from './pay30q';
+
+export default function getMutations(id, type) {
+ switch (id) {
+ case 'PLP1_SQ':
+ return pay30q[type];
+ case 'PLP1_NQ':
+ default:
+ return pay30nq[type];
+ }
+}
diff --git a/src/server/locale/GB/Pi30/mutations/pay30nq.js b/src/server/locale/GB/Pi30/mutations/pay30nq.js
new file mode 100644
index 0000000000..030c1889cd
--- /dev/null
+++ b/src/server/locale/GB/Pi30/mutations/pay30nq.js
@@ -0,0 +1,136 @@
+import Logo from '../../../../message/logos';
+import {
+ textWrap,
+ messageLogoWidth,
+ xSmallFallback,
+ logo20x1,
+ altNoWrap,
+ setLogoTop
+} from '../../../../message/mediaQueries';
+import { textLogoMutations, flexLogoMutations } from '../../../../message/logoMutations';
+
+export default {
+ 'layout:text': [
+ [
+ 'default',
+ ({ textSize }) => ({
+ styles: [
+ textWrap(textSize * 45, textSize, 'GB'),
+ xSmallFallback(textSize * 16),
+ messageLogoWidth(false, textSize * 4, textSize * 1.25)
+ ],
+ logo: Logo.PP_PAYPAL.COLOR,
+ headline: [
+ {
+ tag: 'medium',
+ br: ['Credit']
+ },
+ { tag: 'xsmall' }
+ ],
+ disclaimer: ['default']
+ })
+ ],
+ [
+ 'logo.type:primary && logo.position:right',
+ ({ textSize }) => ({
+ styles: [
+ xSmallFallback(textSize * 16),
+ setLogoTop(textSize * 44 + 10),
+ messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)
+ ]
+ })
+ ],
+ [
+ 'logo.type:primary && logo.position:top',
+ ({ textSize }) => ({
+ styles: [xSmallFallback(textSize * 16), messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)]
+ })
+ ],
+ [
+ 'logo.type:alternative',
+ ({ textSize }) => ({
+ styles: [
+ `@media screen and (max-width: ${textSize * 10.6}px) { .message__content { white-space: nowrap; }}`,
+ textWrap(textSize * 40, textSize, 'GB'),
+ xSmallFallback(textSize * 16),
+ altNoWrap(textSize * 10.6),
+ messageLogoWidth(textSize * 1.75, textSize * 4, textSize * 1.25)
+ ],
+ logo: Logo.PP_PAYPAL.COLOR[0]
+ })
+ ],
+ [
+ 'logo.type:none',
+ ({ textSize }) => ({
+ styles: [
+ xSmallFallback(textSize * 20),
+ `@media screen and (max-width: ${textSize * 21}px) {
+ .message__messaging span.br { white-space: normal }
+ }`
+ ],
+ logo: false,
+ headline: [
+ {
+ tag: 'medium',
+ br: ['Credit'],
+ replace: [['option.', 'option']]
+ },
+ {
+ tag: 'xsmall.2',
+ replace: [['later.', 'later']]
+ }
+ ]
+ })
+ ],
+ [
+ 'logo.type:inline',
+ ({ textSize }) => ({
+ styles: [
+ xSmallFallback(textSize * 16),
+ `.message__logo { width: ${textSize * 4}px }`,
+ `@media screen and (max-width: ${textSize * 21}px) {
+ .message__messaging span.br { white-space: normal }
+ }`
+ ],
+ logo: Logo.NO_PP_MONOGRAM.COLOR,
+ headline: [
+ {
+ tag: 'medium',
+ br: ['Credit'],
+ replace: [['option.', 'option']]
+ },
+ {
+ tag: 'xsmall.2',
+ replace: [['later.', 'later']]
+ }
+ ]
+ })
+ ],
+ ...textLogoMutations
+ ],
+
+ 'layout:flex': [
+ [
+ 'default',
+ {
+ logo: Logo.PP_PAYPAL.WHITE,
+ headline: [
+ {
+ tag: 'xsmall'
+ },
+ {
+ tag: 'medium'
+ }
+ ],
+ disclaimer: ['default']
+ }
+ ],
+ [
+ 'ratio:20x1',
+ {
+ styles: [logo20x1()]
+ }
+ ],
+ ...flexLogoMutations
+ ]
+};
diff --git a/src/server/locale/GB/Pi30/mutations/pay30q.js b/src/server/locale/GB/Pi30/mutations/pay30q.js
new file mode 100644
index 0000000000..d36a60a0fa
--- /dev/null
+++ b/src/server/locale/GB/Pi30/mutations/pay30q.js
@@ -0,0 +1,125 @@
+import Logo from '../../../../message/logos';
+import {
+ textWrap,
+ messageLogoWidth,
+ xSmallFallback,
+ logo20x1,
+ altNoWrap,
+ setLogoTop
+} from '../../../../message/mediaQueries';
+import { textLogoMutations, flexLogoMutations } from '../../../../message/logoMutations';
+
+export default {
+ 'layout:text': [
+ [
+ 'default',
+ ({ textSize }) => ({
+ styles: [
+ xSmallFallback(textSize * 16),
+ textWrap(textSize * 32, textSize, 'GB'),
+ messageLogoWidth(false, textSize * 4, textSize * 1.25)
+ ],
+ logo: Logo.PP_PAYPAL.COLOR,
+ headline: [
+ {
+ tag: 'medium'
+ },
+ { tag: 'xsmall' }
+ ],
+ disclaimer: ['default']
+ })
+ ],
+ [
+ 'logo.type:primary && logo.position:right',
+ ({ textSize }) => ({
+ styles: [
+ xSmallFallback(textSize * 10.75),
+ setLogoTop(textSize * 32 + 10),
+ messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)
+ ]
+ })
+ ],
+ [
+ 'logo.type:primary && logo.position:top',
+ ({ textSize }) => ({
+ styles: [
+ xSmallFallback(textSize * 10.75),
+ messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)
+ ]
+ })
+ ],
+ [
+ 'logo.type:alternative',
+ ({ textSize }) => ({
+ styles: [
+ `@media screen and (max-width: ${textSize * 10.6}px) { .message__content { white-space: nowrap; }}`,
+ textWrap(textSize * 32, textSize, 'GB'),
+ xSmallFallback(textSize * 11.5),
+ altNoWrap(textSize * 10.6),
+ messageLogoWidth(textSize * 1.75, textSize * 4, textSize * 1.25)
+ ],
+ logo: Logo.PP_PAYPAL.COLOR[0]
+ })
+ ],
+ [
+ 'logo.type:none',
+ ({ textSize }) => ({
+ styles: [xSmallFallback(textSize * 18)],
+ logo: false,
+ headline: [
+ {
+ tag: 'medium',
+ replace: [['option.', 'option']]
+ },
+ {
+ tag: 'xsmall.2',
+ replace: [['later.', 'later']]
+ }
+ ]
+ })
+ ],
+ [
+ 'logo.type:inline',
+ ({ textSize }) => ({
+ styles: [xSmallFallback(textSize * 18), `.message__logo { width: ${textSize * 4}px }`],
+ logo: Logo.NO_PP_MONOGRAM.COLOR,
+ headline: [
+ {
+ tag: 'medium',
+ replace: [['option.', 'option']]
+ },
+ {
+ tag: 'xsmall.2',
+ replace: [['later.', 'later']]
+ }
+ ]
+ })
+ ],
+ ...textLogoMutations
+ ],
+
+ 'layout:flex': [
+ [
+ 'default',
+ {
+ logo: Logo.PP_PAYPAL.WHITE,
+ headline: [
+ {
+ tag: 'xsmall'
+ },
+ {
+ tag: 'medium'
+ }
+ ],
+ disclaimer: ['default']
+ }
+ ],
+ [
+ 'ratio:20x1',
+ {
+ styles: [logo20x1()]
+ }
+ ],
+ ...flexLogoMutations
+ ]
+};
diff --git a/src/server/locale/GB/Pi30/styles/flex/base.css b/src/server/locale/GB/Pi30/styles/flex/base.css
new file mode 100644
index 0000000000..445d774119
--- /dev/null
+++ b/src/server/locale/GB/Pi30/styles/flex/base.css
@@ -0,0 +1,61 @@
+.message__logo-container {
+ display: flex;
+ align-items: center;
+}
+
+.message__headline {
+ font-size: 8.4vw;
+ font-weight: 500;
+ line-height: 1.6em;
+}
+
+.message__disclaimer {
+ position: static;
+}
+
+.message__disclaimer > span {
+ font-weight: 400;
+ text-decoration: none;
+ white-space: normal;
+}
+
+.message__disclaimer > span > span {
+ white-space: nowrap;
+}
+
+.message__disclaimer > span > span:only-child,
+.message__disclaimer > span > span.em {
+ text-decoration: underline;
+}
+
+.message__logo:nth-of-type(1) {
+ width: 27px;
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.message__logo:nth-of-type(2) {
+ width: 89px;
+ display: inline-block;
+}
+
+.message__headline strong::after {
+ content: '.';
+ color: white;
+ font-style: normal;
+ font-weight: normal;
+}
+
+.message__headline > span:nth-child(2) > strong {
+ font-weight: 500;
+}
+
+.message__headline > span:nth-child(3) > strong {
+ font-weight: 500;
+}
+
+@media (min-width: 220px) {
+ .message__disclaimer {
+ font-size: 0.9rem;
+ }
+}
diff --git a/src/server/locale/GB/Pi30/styles/flex/index.js b/src/server/locale/GB/Pi30/styles/flex/index.js
new file mode 100644
index 0000000000..fde5efa898
--- /dev/null
+++ b/src/server/locale/GB/Pi30/styles/flex/index.js
@@ -0,0 +1,14 @@
+import base from './base.css';
+import ratio1x1 from './ratio--1x1.css';
+import ratio1x4 from './ratio--1x4.css';
+import ratio6x1 from './ratio--6x1.css';
+import ratio8x1 from './ratio--8x1.css';
+import ratio20x1 from './ratio--20x1.css';
+
+export default [
+ ['default', base],
+ ['ratio:1x1', ratio1x1],
+ ['ratio:1x4', ratio1x4],
+ ['ratio:8x1', [ratio6x1, ratio8x1].join('\n')],
+ ['ratio:20x1', [ratio6x1, ratio20x1].join('\n')]
+];
diff --git a/src/server/locale/GB/Pi30/styles/flex/ratio--1x1.css b/src/server/locale/GB/Pi30/styles/flex/ratio--1x1.css
new file mode 100644
index 0000000000..29d6dfa4c4
--- /dev/null
+++ b/src/server/locale/GB/Pi30/styles/flex/ratio--1x1.css
@@ -0,0 +1,47 @@
+.message__disclaimer span.multi:nth-of-type(1) {
+ display: none;
+}
+
+.message__headline span.multi:nth-of-type(2) {
+ display: none;
+}
+
+.message__logo-container {
+ width: 100%;
+ margin-bottom: 12%;
+}
+
+.message__logo:nth-of-type(1) {
+ width: 29px;
+ max-width: 15%;
+ margin-right: 0px;
+}
+
+.message__logo:nth-of-type(2) {
+ width: 91px;
+ max-width: 45%;
+ margin-left: 3%;
+}
+
+.message__headline {
+ font-size: 10vw;
+ line-height: 1.55em;
+}
+
+@media (min-width: 140px) {
+ .message__headline {
+ font-size: 8.4vw;
+ }
+
+ .message__headline span.multi:nth-of-type(1) {
+ display: none;
+ }
+
+ .message__headline span.multi:nth-of-type(2) {
+ display: inline;
+ }
+
+ .message__disclaimer span.multi:nth-of-type(1) {
+ display: inline;
+ }
+}
diff --git a/src/server/locale/GB/Pi30/styles/flex/ratio--1x4.css b/src/server/locale/GB/Pi30/styles/flex/ratio--1x4.css
new file mode 100644
index 0000000000..2c89e80822
--- /dev/null
+++ b/src/server/locale/GB/Pi30/styles/flex/ratio--1x4.css
@@ -0,0 +1,46 @@
+.message__logo-container {
+ width: 100%;
+ margin-top: 3%;
+ margin-bottom: 0;
+}
+
+.message__messaging {
+ height: 100%;
+ transform: translateY(-80px);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.message__headline {
+ font-size: 1.1rem;
+ margin-bottom: 10%;
+}
+
+.message__sub-headline {
+ display: none;
+}
+
+.message__disclaimer {
+ font-size: 0.9rem;
+}
+
+.message__disclaimer span.multi:nth-of-type(1) {
+ display: inline;
+}
+
+.message__headline .tag--xsmall {
+ display: none;
+}
+
+@media (min-height: 500px) {
+ .message__headline {
+ font-size: 1.7rem;
+ }
+}
+
+@media (aspect-ratio: 1/2) {
+ .message__messaging {
+ transform: translateY(-40px);
+ }
+}
diff --git a/src/server/locale/GB/Pi30/styles/flex/ratio--20x1.css b/src/server/locale/GB/Pi30/styles/flex/ratio--20x1.css
new file mode 100644
index 0000000000..c292e4a5d1
--- /dev/null
+++ b/src/server/locale/GB/Pi30/styles/flex/ratio--20x1.css
@@ -0,0 +1,113 @@
+@media (min-aspect-ratio: 200/11) {
+ .message__logo-container {
+ margin-bottom: -3px;
+ max-width: 12%;
+ margin-right: 1.5vw;
+ }
+
+ .message__logo:nth-of-type(1) {
+ width: 15%;
+ margin-right: 3%;
+ }
+
+ .message__logo:nth-of-type(2) {
+ width: 55%;
+ }
+
+ .message__promo-container {
+ width: unset;
+ }
+
+ .message__messaging {
+ flex: none;
+ display: inline;
+ }
+
+ .message__content {
+ justify-content: center;
+ }
+
+ .message__sub-headline {
+ margin-left: 0;
+ }
+
+ .message__disclaimer {
+ margin-left: 4px;
+ }
+}
+
+@media (min-aspect-ratio: 200/11) and (min-width: 351px) {
+ .message__disclaimer {
+ font-size: 0.9rem;
+ }
+}
+
+@media (min-aspect-ratio: 200/11) and (min-width: 903px) {
+ .message__logo-container {
+ margin-bottom: -6px;
+ }
+}
+
+@media (min-aspect-ratio: 200/11) and (min-width: 400px) {
+ .message__headline {
+ font-size: 2vw;
+ }
+
+ .message__headline > span:nth-of-type(3) {
+ display: inline;
+ }
+
+ .message__logo:nth-of-type(1) {
+ width: 20%;
+ margin-right: 5%;
+ }
+
+ .message__logo:nth-of-type(2) {
+ display: inline-block;
+ width: 60%;
+ }
+}
+
+@media (min-aspect-ratio: 200/11) and (min-width: 523px) {
+ .message__headline span.multi:nth-of-type(1) {
+ display: none;
+ }
+
+ .message__headline span.multi:nth-of-type(2) {
+ display: inline;
+ }
+}
+
+@media (min-aspect-ratio: 200/11) and (max-width: 600px) {
+ .message__logo:nth-of-type(2) {
+ display: none;
+ }
+
+ .message__logo:nth-of-type(1) {
+ width: auto;
+ }
+
+ .message__logo-container {
+ max-width: 18%;
+ }
+}
+
+@media (min-aspect-ratio: 200/11) and (min-width: 401px) and (max-width: 522px) {
+ .message__logo-container {
+ max-width: 18%;
+ }
+
+ .message__headline {
+ font-size: 2.75vw;
+ }
+
+ .message__headline > span:nth-of-type(3) {
+ display: none;
+ }
+}
+
+@media (min-aspect-ratio: 200/11) and (max-width: 350px) {
+ .message__headline {
+ font-size: 10px;
+ }
+}
diff --git a/src/server/locale/GB/Pi30/styles/flex/ratio--6x1.css b/src/server/locale/GB/Pi30/styles/flex/ratio--6x1.css
new file mode 100644
index 0000000000..262febb9ad
--- /dev/null
+++ b/src/server/locale/GB/Pi30/styles/flex/ratio--6x1.css
@@ -0,0 +1,97 @@
+/* Not a valid style option ratio, but used as the mobile base for 8x1 and 20x1 */
+
+.message__logo:nth-of-type(2) {
+ display: none;
+}
+
+.message__headline {
+ font-size: 4vw;
+}
+
+/* remove extra "with Flex" */
+.message__headline > span:nth-of-type(3) {
+ display: none;
+}
+
+.message__disclaimer {
+ font-size: 0.7rem;
+}
+
+@media (max-aspect-ratio: 61/10) and (min-width: 375px) {
+ .message__headline span.multi:nth-of-type(2) {
+ display: inline;
+ }
+ .message__headline span.multi:nth-of-type(1) {
+ display: none;
+ }
+ .message__headline > span:nth-of-type(3) {
+ display: inline;
+ }
+ .message__headline .tag--medium .br:first-child {
+ display: block;
+ }
+ .message__logo:nth-of-type(1) {
+ width: 45%;
+ }
+}
+
+@media (max-aspect-ratio: 61/10) {
+ .message__headline {
+ font-size: 5vw;
+ line-height: 1.3em;
+ display: inline;
+ }
+ .message__logo-container {
+ flex-basis: 12%;
+ margin-bottom: -6px;
+ justify-content: flex-start;
+ margin-left: 5px;
+ }
+ .message__logo:nth-of-type(1) {
+ margin-left: 10px;
+ margin-right: 0;
+ }
+}
+
+@media (max-aspect-ratio: 61/10) and (max-width: 374px) {
+ .message__logo:nth-of-type(1) {
+ width: 50%;
+ }
+}
+
+@media (max-width: 374px) {
+ .message__headline {
+ font-size: 5vw;
+ }
+
+ .message__logo:nth-of-type(1) {
+ width: 55%;
+ }
+
+ .message__logo-container {
+ margin-right: 2.5%;
+ }
+
+ .weak {
+ margin-left: -1.6%;
+ }
+}
+
+@media (max-aspect-ratio: 61/10) and (max-width: 767px) {
+ .message__headline::after {
+ content: ' ';
+ }
+}
+
+@media (max-aspect-ratio: 61/10) and (max-width: 323px) {
+ .message__logo-container {
+ margin-right: 7%;
+ }
+ .message__logo:nth-of-type(1) {
+ margin: 0 5px;
+ width: 30%;
+ }
+ .message__logo:nth-of-type(2) {
+ display: inline;
+ }
+}
diff --git a/src/server/locale/GB/Pi30/styles/flex/ratio--8x1.css b/src/server/locale/GB/Pi30/styles/flex/ratio--8x1.css
new file mode 100644
index 0000000000..be242c7a65
--- /dev/null
+++ b/src/server/locale/GB/Pi30/styles/flex/ratio--8x1.css
@@ -0,0 +1,73 @@
+@media (min-aspect-ratio: 80/11) {
+ .message__headline {
+ display: inline;
+ padding-right: 0;
+ margin-right: 0;
+ line-height: 1.3em;
+ }
+
+ .message__headline .tag--medium .br:first-child {
+ display: inline;
+ }
+
+ .message__logo-container {
+ flex-basis: 12%;
+ margin-bottom: -6px;
+ justify-content: flex-start;
+ margin-left: 5px;
+ }
+
+ .message__logo:nth-of-type(1) {
+ width: 50%;
+ margin-left: 10px;
+ margin-right: 0;
+ }
+
+ .message__disclaimer {
+ margin-left: 1%;
+ }
+}
+
+@media (min-aspect-ratio: 80/11) and (min-width: 501px) {
+ .message__logo-container {
+ flex-basis: 22%;
+ }
+
+ .message__logo:nth-of-type(1) {
+ width: 15%;
+ margin-right: 5%;
+ }
+
+ .message__logo:nth-of-type(2) {
+ display: inline-block;
+ width: 50%;
+ }
+
+ .message__disclaimer {
+ font-size: 0.9rem;
+ }
+}
+
+@media (min-aspect-ratio: 80/11) and (min-width: 375px) {
+ .message__headline > span:nth-of-type(3) {
+ display: inline;
+ }
+}
+
+@media (min-aspect-ratio: 80/11) and (min-width: 351px) {
+ .message__headline {
+ font-size: 3.5vw;
+ }
+}
+
+@media (min-aspect-ratio: 80/11) and (max-width: 350px) {
+ .message__headline {
+ font-size: 10px;
+ }
+}
+
+@media (min-aspect-ratio: 80/11) and (min-width: 360px) {
+ .message__messaging {
+ line-height: 1.3rem;
+ }
+}
diff --git a/src/server/locale/GB/Pi30/styles/index.js b/src/server/locale/GB/Pi30/styles/index.js
new file mode 100644
index 0000000000..e9be344ad3
--- /dev/null
+++ b/src/server/locale/GB/Pi30/styles/index.js
@@ -0,0 +1,7 @@
+import text from './text';
+import flex from './flex';
+
+export default {
+ 'layout:text': text,
+ 'layout:flex': flex
+};
diff --git a/src/server/locale/GB/Pi30/styles/text/index.js b/src/server/locale/GB/Pi30/styles/text/index.js
new file mode 100644
index 0000000000..527fee1134
--- /dev/null
+++ b/src/server/locale/GB/Pi30/styles/text/index.js
@@ -0,0 +1,3 @@
+import sharedGPLTextStyles from '../../../../common/styles/GPL/text';
+
+export default [...sharedGPLTextStyles];
diff --git a/src/server/locale/GB/Pi30/validOptions.js b/src/server/locale/GB/Pi30/validOptions.js
new file mode 100644
index 0000000000..10771f5ceb
--- /dev/null
+++ b/src/server/locale/GB/Pi30/validOptions.js
@@ -0,0 +1,31 @@
+import { Types } from '../../../types';
+
+export default {
+ text: {
+ logo: {
+ type: [Types.STRING, ['primary', 'alternative', 'inline', 'none']],
+ position: [Types.STRING, ['left', 'right', 'top']]
+ },
+ text: {
+ color: [Types.STRING, ['black', 'white', 'monochrome', 'grayscale|greyscale']],
+ size: [Types.NUMBER, [12, 10, 11, 13, 14, 15, 16]],
+ align: [Types.STRING, ['left', 'right', 'center']],
+ fontFamily: [Types.ANY],
+ fontSource: [Types.ANY]
+ }
+ },
+ flex: {
+ color: [
+ Types.STRING,
+ ['blue', 'black', 'white', 'white-no-border', 'gray|grey', 'monochrome', 'grayscale|greyscale']
+ ],
+ ratio: [Types.STRING, ['1x1', '1x4', '8x1', '20x1']],
+ text: {
+ fontFamily: [Types.ANY],
+ fontSource: [Types.ANY]
+ }
+ },
+ custom: {
+ markup: [Types.STRING]
+ }
+};
diff --git a/src/server/locale/GB/index.js b/src/server/locale/GB/index.js
index 7e227e96d5..7cf97e8562 100644
--- a/src/server/locale/GB/index.js
+++ b/src/server/locale/GB/index.js
@@ -1,13 +1,15 @@
-import getMutations from './mutations';
-import logos from '../../message/logos';
-import styles from './styles';
-import validOptions from './validOptions';
+import gpl from './GPL/index';
+import pi30 from './Pi30/index';
+import { OFFER, getStandardProductOffer } from '../../../utils/server';
-export default {
- localeClass: 'locale--GB',
- productName: ['with', 'PayPal.'],
- validOptions,
- getMutations,
- logos,
- styles
-};
+export default function getLocale(offerType) {
+ switch (getStandardProductOffer(offerType)) {
+ case OFFER.PAY_LATER_PAY_IN_1:
+ return pi30;
+ case OFFER.PAY_LATER_SHORT_TERM:
+ default:
+ // Generic message is included with the gpl mutations.
+ // Default case catches GENERIC where getStandardProductOffer returns `undefined`
+ return gpl;
+ }
+}
diff --git a/src/server/locale/GB/styles/text/index.js b/src/server/locale/GB/styles/text/index.js
deleted file mode 100644
index f76a3b916d..0000000000
--- a/src/server/locale/GB/styles/text/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import sharedGPLTextStyles from '../../../common/styles/GPL/text';
-
-export default [...sharedGPLTextStyles];
diff --git a/src/server/locale/index.js b/src/server/locale/index.js
index ad7ad1dc75..2aabc6d217 100644
--- a/src/server/locale/index.js
+++ b/src/server/locale/index.js
@@ -12,7 +12,7 @@ const getLocaleSettings = (offerCountry, offerType, contextualComponents, langua
case 'DE':
return DE(offerType);
case 'GB':
- return GB;
+ return GB(offerType);
case 'ES':
return ES;
case 'FR':
diff --git a/tests/functional/v2/config/GB/DEV_GB_MULTI.js b/tests/functional/v2/config/GB/DEV_GB_MULTI.js
new file mode 100644
index 0000000000..110e640d27
--- /dev/null
+++ b/tests/functional/v2/config/GB/DEV_GB_MULTI.js
@@ -0,0 +1,17 @@
+export const DEV_GB_MULTI = {
+ testFileName: 'multiProduct',
+ country: 'GB',
+ description: 'GB Multi-product merchant with Pay in 3 and Pay in 30 Days',
+ amounts: [
+ {
+ value: '0.00',
+ message: 'Product list modal functionality',
+ expectedValue: 'Buy now, pay later.',
+ modalContent: {
+ headline: 'Buy now',
+ shortTerm: 'Pay in 3 interest-free payments',
+ payIn1: 'Buy now. Pay in 30 Days.'
+ }
+ }
+ ]
+};
diff --git a/tests/functional/v2/config/GB/DEV_GB_PAY_IN_1.js b/tests/functional/v2/config/GB/DEV_GB_PAY_IN_1.js
new file mode 100644
index 0000000000..23b2dc4f09
--- /dev/null
+++ b/tests/functional/v2/config/GB/DEV_GB_PAY_IN_1.js
@@ -0,0 +1,33 @@
+export const DEV_GB_PAY_IN_1 = {
+ testFileName: 'payIn1',
+ country: 'GB',
+ description: 'GB merchant eligible for pay in 30 days',
+ minAmount: 1,
+ maxAmount: 900,
+ amounts: [
+ {
+ value: '0.00',
+ message: 'Non-qualifying Pay in 30 Days',
+ expectedValue: 'Pay in 30 days for purchases of £1 to £900.',
+ modalContent: {
+ subheadline: 'Available for purchases of £1 – £900. Eligibility subject to status.'
+ }
+ },
+ {
+ value: '1.00',
+ message: 'Qualifying Pay in 30 Days',
+ expectedValue: 'Pay in 30 days.',
+ modalContent: {
+ subheadline: 'Available for purchases of £1 – £900. Eligibility subject to status.'
+ }
+ },
+ {
+ value: '900.01',
+ message: 'Non-qualifying Pay in 30 Days',
+ expectedValue: 'Pay in 30 days for purchases of £1 to £900.',
+ modalContent: {
+ subheadline: 'Available for purchases of £1 – £900. Eligibility subject to status.'
+ }
+ }
+ ]
+};
diff --git a/tests/functional/v2/config/GB/index.js b/tests/functional/v2/config/GB/index.js
index 59c6da2d00..6efe6db485 100644
--- a/tests/functional/v2/config/GB/index.js
+++ b/tests/functional/v2/config/GB/index.js
@@ -1,2 +1,4 @@
export { DEV_GB_SHORT_TERM } from './DEV_GB_SHORT_TERM';
export { DEV_GB_SHORT_TERM_CHECKOUT } from './DEV_GB_SHORT_TERM_CHECKOUT';
+export { DEV_GB_PAY_IN_1 } from './DEV_GB_PAY_IN_1';
+export { DEV_GB_MULTI } from './DEV_GB_MULTI';
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/desktop/0-Amount_persists_between_views-desktop-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/desktop/0-Amount_persists_between_views-desktop-snap.png
new file mode 100644
index 0000000000..50a55fbbe4
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/desktop/0-Amount_persists_between_views-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/desktop/0-Opens_to_product_list_view-desktop-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/desktop/0-Opens_to_product_list_view-desktop-snap.png
new file mode 100644
index 0000000000..42d81a875b
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/desktop/0-Opens_to_product_list_view-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/mobile/0-Amount_persists_between_views-mobile-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/mobile/0-Amount_persists_between_views-mobile-snap.png
new file mode 100644
index 0000000000..f0dfc4186a
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/mobile/0-Amount_persists_between_views-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/mobile/0-Opens_to_product_list_view-mobile-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/mobile/0-Opens_to_product_list_view-mobile-snap.png
new file mode 100644
index 0000000000..e82047f728
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_MULTI/mobile/0-Opens_to_product_list_view-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..4de0aadf6e
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..4de0aadf6e
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..4de0aadf6e
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..678b432abd
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..678b432abd
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..678b432abd
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/api/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..edfe64042c
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..edfe64042c
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..edfe64042c
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..a9115be0df
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..a9115be0df
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..a9115be0df
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/sdk/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/desktop/0-Amount_persists_between_views-desktop-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/desktop/0-Amount_persists_between_views-desktop-snap.png
new file mode 100644
index 0000000000..56bfe75d87
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/desktop/0-Amount_persists_between_views-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/desktop/0-Opens_to_product_list_view-desktop-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/desktop/0-Opens_to_product_list_view-desktop-snap.png
new file mode 100644
index 0000000000..56bfe75d87
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/desktop/0-Opens_to_product_list_view-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/mobile/0-Amount_persists_between_views-mobile-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/mobile/0-Amount_persists_between_views-mobile-snap.png
new file mode 100644
index 0000000000..79895da604
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/mobile/0-Amount_persists_between_views-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/mobile/0-Opens_to_product_list_view-mobile-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/mobile/0-Opens_to_product_list_view-mobile-snap.png
new file mode 100644
index 0000000000..4f1d6c947c
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_MULTI/mobile/0-Opens_to_product_list_view-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..56bfe75d87
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..56bfe75d87
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..56bfe75d87
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..a9115be0df
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..a9115be0df
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..a9115be0df
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/standalone/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/desktop/0-Amount_persists_between_views-desktop-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/desktop/0-Amount_persists_between_views-desktop-snap.png
new file mode 100644
index 0000000000..ff2a00cee0
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/desktop/0-Amount_persists_between_views-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/desktop/0-Opens_to_product_list_view-desktop-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/desktop/0-Opens_to_product_list_view-desktop-snap.png
new file mode 100644
index 0000000000..ed7bfff502
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/desktop/0-Opens_to_product_list_view-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/mobile/0-Amount_persists_between_views-mobile-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/mobile/0-Amount_persists_between_views-mobile-snap.png
new file mode 100644
index 0000000000..f78ac372f3
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/mobile/0-Amount_persists_between_views-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/mobile/0-Opens_to_product_list_view-mobile-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/mobile/0-Opens_to_product_list_view-mobile-snap.png
new file mode 100644
index 0000000000..70c2e9fbee
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_MULTI/mobile/0-Opens_to_product_list_view-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..895493571f
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/desktop/0-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..895493571f
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/desktop/1-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png
new file mode 100644
index 0000000000..895493571f
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/desktop/900.01-Shows_correct_subheadline_for_amount-desktop-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..09939d6b2e
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/mobile/0-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..09939d6b2e
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/mobile/1-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png
new file mode 100644
index 0000000000..09939d6b2e
Binary files /dev/null and b/tests/functional/v2/snapshots/modal/webpage/GB/DEV_GB_PAY_IN_1/mobile/900.01-Shows_correct_subheadline_for_amount-mobile-snap.png differ
diff --git a/tests/functional/v2/testFn/multi.js b/tests/functional/v2/testFn/multi.js
index 5ca2032f26..9920bbf46f 100644
--- a/tests/functional/v2/testFn/multi.js
+++ b/tests/functional/v2/testFn/multi.js
@@ -48,7 +48,13 @@ export const clickProductListTiles = async (contentWindow, modalContent, account
await page.waitFor(2 * 1000);
};
- if (account === 'DEV_US_MULTI') {
+ if (account === 'DEV_GB_MULTI') {
+ // Switch to Pay in 3 view
+ await switchViews(2, 'shortTerm');
+
+ // Switch to Pay in 30 Days view
+ await switchViews(3, 'payIn1');
+ } else if (account !== 'DEV_DE_MULTI' && account !== 'DEV_ES_MULTI' && account !== 'DEV_IT_MULTI') {
// Switch to long term view
await switchViews(2, 'shortTerm');
@@ -91,12 +97,17 @@ export const viewsShareAmount = async (contentWindow, testName, account) => {
await contentWindow.click(`${tile}:nth-child(3)`);
await page.waitFor(3 * 1000);
- // FR long term modal does not have a calculator
- if (account !== 'DEV_FR_MULTI') {
+ if (account === 'DEV_GB_MULTI') {
+ await contentWindow.waitForSelector(`${headerContent} > ${subheadlineContent}`);
+ const tile3Subheadline = await contentWindow.$eval(subheadlineContent, element => element.innerText);
+ expect(tile3Subheadline).not.toBeNull();
+ } else {
await contentWindow.waitForSelector(input);
const inputFieldVal = await contentWindow.$eval(input, element => element.value);
expect(subheadline).not.toContain(inputFieldVal);
}
+
+
await modalSnapshot(testName, contentWindow);
};
diff --git a/tests/unit/spec/server/locale/index.test.js b/tests/unit/spec/server/locale/index.test.js
index 79c99a19ff..addb72bac7 100644
--- a/tests/unit/spec/server/locale/index.test.js
+++ b/tests/unit/spec/server/locale/index.test.js
@@ -89,16 +89,26 @@ jest.mock('server/locale/DE/Pi30/mutations/pi30q', () => ({
'layout:flex': ['flex', 'DE', 'PI30Q']
}));
-jest.mock('server/locale/GB/mutations/gpl', () => ({
+jest.mock('server/locale/GB/GPL/mutations/gpl', () => ({
'layout:text': ['text', 'GB', 'PL'],
'layout:flex': ['flex', 'GB', 'PL']
}));
-jest.mock('server/locale/GB/mutations/gplq', () => ({
+jest.mock('server/locale/GB/GPL/mutations/gplq', () => ({
'layout:text': ['text', 'GB', 'PLQ'],
'layout:flex': ['flex', 'GB', 'PLQ']
}));
+jest.mock('server/locale/GB/Pi30/mutations/pay30nq', () => ({
+ 'layout:text': ['text', 'GB', 'PLP1_NQ'],
+ 'layout:flex': ['flex', 'GB', 'PLP1_NQ']
+}));
+
+jest.mock('server/locale/GB/Pi30/mutations/pay30q', () => ({
+ 'layout:text': ['text', 'GB', 'PLP1_SQ'],
+ 'layout:flex': ['flex', 'GB', 'PLP1_SQ']
+}));
+
jest.mock('server/locale/FR/mutations/gpl', () => ({
'layout:text': ['text', 'FR', 'GPL'],
'layout:flex': ['flex', 'FR', 'GPL']
@@ -150,6 +160,8 @@ describe('locale methods', () => {
['DE', 'PI30Q'],
['GB', 'PL'],
['GB', 'PLQ'],
+ ['GB', 'PLP1_NQ'],
+ ['GB', 'PLP1_SQ'],
['FR', 'GPL'],
['FR', 'GPLQ'],
['AU', 'GPL'],
diff --git a/utils/devServerProxy/config/GB/index.js b/utils/devServerProxy/config/GB/index.js
index c97119e796..4905a153ce 100644
--- a/utils/devServerProxy/config/GB/index.js
+++ b/utils/devServerProxy/config/GB/index.js
@@ -14,12 +14,12 @@ export default {
product: 'PAY_LATER_SHORT_TERM'
},
{
- amount: 30,
+ amount: 20,
template: 'plq.json',
product: 'PAY_LATER_SHORT_TERM'
},
{
- amount: 2000.01,
+ amount: 3000.01,
template: 'pl.json',
product: 'PAY_LATER_SHORT_TERM'
}
@@ -30,8 +30,104 @@ export default {
totalPayments: 3,
apr: 0,
nominalRate: 0,
- minAmount: 30,
- maxAmount: 2000
+ minAmount: 20,
+ maxAmount: 3000
+ }
+ ]
+ }
+ },
+ DEV_GB_PAY_IN_1: {
+ country: 'GB',
+ modalViews: [
+ {
+ template: 'pay_in_30.json',
+ product: 'PAY_LATER_PAY_IN_1'
+ }
+ ],
+ messageThresholds: [
+ {
+ amount: 0,
+ template: 'pay30nq.json',
+ product: 'PAY_LATER_PAY_IN_1'
+ },
+ {
+ amount: 1,
+ template: 'pay30q.json',
+ product: 'PAY_LATER_PAY_IN_1'
+ },
+ {
+ amount: 900.01,
+ template: 'pay30nq.json',
+ product: 'PAY_LATER_PAY_IN_1'
+ }
+ ],
+ offers: {
+ PAY_LATER_PAY_IN_1: [
+ {
+ totalPayments: 1,
+ apr: 0,
+ nominalRate: 0,
+ minAmount: 1,
+ maxAmount: 900
+ }
+ ]
+ }
+ },
+ DEV_GB_MULTI: {
+ country: 'GB',
+ modalViews: [
+ {
+ template: 'product_list.json',
+ product: 'PRODUCT_LIST'
+ },
+ {
+ template: 'pay_in_30.json',
+ product: 'PAY_LATER_PAY_IN_1'
+ },
+ {
+ template: 'short_term.json',
+ product: 'PAY_LATER_SHORT_TERM'
+ }
+ ],
+ messageThresholds: [
+ {
+ amount: 0,
+ template: 'pay30nq.json',
+ product: 'PAY_LATER_PAY_IN_1'
+ },
+ {
+ amount: 1,
+ template: 'pay30q.json',
+ product: 'PAY_LATER_PAY_IN_1'
+ },
+ {
+ amount: 150,
+ template: 'plq.json',
+ product: 'PAY_LATER_SHORT_TERM'
+ },
+ {
+ amount: 3000.01,
+ template: 'pl.json',
+ product: 'PAY_LATER_SHORT_TERM'
+ }
+ ],
+ offers: {
+ PAY_LATER_PAY_IN_1: [
+ {
+ totalPayments: 1,
+ apr: 0,
+ nominalRate: 0,
+ minAmount: 1,
+ maxAmount: 900
+ }
+ ],
+ PAY_LATER_SHORT_TERM: [
+ {
+ totalPayments: 3,
+ apr: 0,
+ nominalRate: 0,
+ minAmount: 20,
+ maxAmount: 3000
}
]
}
@@ -51,12 +147,12 @@ export default {
product: 'PAY_LATER_SHORT_TERM'
},
{
- amount: 30,
+ amount: 20,
template: 'plq.json',
product: 'PAY_LATER_SHORT_TERM'
},
{
- amount: 2000.01,
+ amount: 3000.01,
template: 'pl.json',
product: 'PAY_LATER_SHORT_TERM'
}
@@ -67,8 +163,8 @@ export default {
totalPayments: 3,
apr: 0,
nominalRate: 0,
- minAmount: 30,
- maxAmount: 2000
+ minAmount: 20,
+ maxAmount: 3000
}
]
}