diff --git a/public/assets/logos/5.1/credit/ppc_black_pri.svg b/public/assets/logos/5.1/credit/ppc_black_pri.svg new file mode 100644 index 0000000000..0d28ba3805 --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_black_pri.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/5.1/credit/ppc_fc_alt.svg b/public/assets/logos/5.1/credit/ppc_fc_alt.svg new file mode 100644 index 0000000000..6b1631aa26 --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_fc_alt.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/logos/5.1/credit/ppc_fc_pri.svg b/public/assets/logos/5.1/credit/ppc_fc_pri.svg new file mode 100644 index 0000000000..81dbc02662 --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_fc_pri.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/5.1/credit/ppc_grayscale_pri.svg b/public/assets/logos/5.1/credit/ppc_grayscale_pri.svg new file mode 100644 index 0000000000..dbd8d8ffed --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_grayscale_pri.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/5.1/credit/ppc_mono_alt.svg b/public/assets/logos/5.1/credit/ppc_mono_alt.svg new file mode 100644 index 0000000000..336e207c83 --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_mono_alt.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/logos/5.1/credit/ppc_mono_alt_noPP.svg b/public/assets/logos/5.1/credit/ppc_mono_alt_noPP.svg new file mode 100644 index 0000000000..85a3e12267 --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_mono_alt_noPP.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/logos/5.1/credit/ppc_mono_pri.svg b/public/assets/logos/5.1/credit/ppc_mono_pri.svg new file mode 100644 index 0000000000..dbd8d8ffed --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_mono_pri.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/5.1/credit/ppc_wh_alt.svg b/public/assets/logos/5.1/credit/ppc_wh_alt.svg new file mode 100644 index 0000000000..1d4ef38688 --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_wh_alt.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/logos/5.1/credit/ppc_wh_alt_noPP.svg b/public/assets/logos/5.1/credit/ppc_wh_alt_noPP.svg new file mode 100644 index 0000000000..aa80551a37 --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_wh_alt_noPP.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/logos/5.1/credit/ppc_wh_pri.svg b/public/assets/logos/5.1/credit/ppc_wh_pri.svg new file mode 100644 index 0000000000..dbd8d8ffed --- /dev/null +++ b/public/assets/logos/5.1/credit/ppc_wh_pri.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_alt.svg b/public/assets/logos/5.1/paylater/paylater_alt.svg new file mode 100644 index 0000000000..69eaf2a2bc --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_alt.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/logos/5.1/paylater/paylater_black_alt.svg b/public/assets/logos/5.1/paylater/paylater_black_alt.svg new file mode 100644 index 0000000000..a9460701b4 --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_black_alt.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_black_pri.svg b/public/assets/logos/5.1/paylater/paylater_black_pri.svg new file mode 100644 index 0000000000..5980d81e8e --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_black_pri.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_fc_alt.svg b/public/assets/logos/5.1/paylater/paylater_fc_alt.svg new file mode 100644 index 0000000000..69eaf2a2bc --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_fc_alt.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/logos/5.1/paylater/paylater_fc_pri.svg b/public/assets/logos/5.1/paylater/paylater_fc_pri.svg new file mode 100644 index 0000000000..c88cd632d9 --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_fc_pri.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_grayscale_alt.svg b/public/assets/logos/5.1/paylater/paylater_grayscale_alt.svg new file mode 100644 index 0000000000..a9460701b4 --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_grayscale_alt.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_grayscale_pri.svg b/public/assets/logos/5.1/paylater/paylater_grayscale_pri.svg new file mode 100644 index 0000000000..5980d81e8e --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_grayscale_pri.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_mono_alt.svg b/public/assets/logos/5.1/paylater/paylater_mono_alt.svg new file mode 100644 index 0000000000..a9460701b4 --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_mono_alt.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_mono_badge.svg b/public/assets/logos/5.1/paylater/paylater_mono_badge.svg new file mode 100644 index 0000000000..60996644a7 --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_mono_badge.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_mono_pri.svg b/public/assets/logos/5.1/paylater/paylater_mono_pri.svg new file mode 100644 index 0000000000..5980d81e8e --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_mono_pri.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_pri.svg b/public/assets/logos/5.1/paylater/paylater_pri.svg new file mode 100644 index 0000000000..5980d81e8e --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_pri.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_wh_alt.svg b/public/assets/logos/5.1/paylater/paylater_wh_alt.svg new file mode 100644 index 0000000000..cff7dd7091 --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_wh_alt.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/assets/logos/5.1/paylater/paylater_wh_pri.svg b/public/assets/logos/5.1/paylater/paylater_wh_pri.svg new file mode 100644 index 0000000000..47830eb0a9 --- /dev/null +++ b/public/assets/logos/5.1/paylater/paylater_wh_pri.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/modal/v2/lib/postMessage.js b/src/components/modal/v2/lib/postMessage.js index a3c2091f98..29a7da7311 100644 --- a/src/components/modal/v2/lib/postMessage.js +++ b/src/components/modal/v2/lib/postMessage.js @@ -40,7 +40,9 @@ function createSafePayload(unscreenedPayload) { const [key, value] = entry; if (allowedFields.includes(key)) { safePayload[key] = value; - } else { + } else if (process.env.NODE_ENV !== 'production') { + // Payload key not in allowlist - only log in development, not production + // eslint-disable-next-line no-console console.warn(`modal hook payload param should be allowlisted if secure: ${key}`); } }); diff --git a/src/components/modal/v2/parts/InlineLinks.jsx b/src/components/modal/v2/parts/InlineLinks.jsx index 02f87bd8d7..28d9cd83e4 100644 --- a/src/components/modal/v2/parts/InlineLinks.jsx +++ b/src/components/modal/v2/parts/InlineLinks.jsx @@ -8,6 +8,7 @@ const InlineLinks = ({ text, useNewCheckoutDesign }) => { const { onClick } = useXProps(); if (!Array.isArray(text)) { + // eslint-disable-next-line react/no-danger return ; } return text.map(textChunk => { diff --git a/src/server/locale/US/PAYPAL_CREDIT/logos.js b/src/server/locale/US/PAYPAL_CREDIT/logos.js index ff78811f34..3565a61515 100644 --- a/src/server/locale/US/PAYPAL_CREDIT/logos.js +++ b/src/server/locale/US/PAYPAL_CREDIT/logos.js @@ -1,4 +1,7 @@ -const ROOT_URL = 'https://www.paypalobjects.com/upstream/assets/logos/US'; +// Old branding URL +// const ROOT_URL = 'https://www.paypalobjects.com/upstream/assets/logos/US'; +// 5.1 branding URL - relative path to local assets +const ROOT_URL = '/assets/logos/5.1/credit'; const TYPES = ['COLOR', 'WHITE', 'BLACK', 'GRAYSCALE']; const TYPE_MAP = { COLOR: 'fc', WHITE: 'wh', BLACK: 'mono', GRAYSCALE: 'grayscale' }; const getSvgSrc = svgFileName => `${ROOT_URL}/${svgFileName}.svg`; @@ -6,7 +9,7 @@ const getSvgSrc = svgFileName => `${ROOT_URL}/${svgFileName}.svg`; const STACKED = TYPES.reduce( (object, type) => ({ ...object, - [type]: { dimensions: [453, 152], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_pri`) } + [type]: { dimensions: [315, 70], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_pri`) } }), {} ); @@ -14,7 +17,7 @@ const STACKED = TYPES.reduce( const SINGLE_LINE = TYPES.reduce( (object, type) => ({ ...object, - [type]: { dimensions: [573, 80], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_alt`) } + [type]: { dimensions: [420, 64], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_alt`) } }), {} ); @@ -22,7 +25,7 @@ const SINGLE_LINE = TYPES.reduce( const SINGLE_LINE_NO_PAYPAL = TYPES.reduce( (object, type) => ({ ...object, - [type]: { dimensions: [401, 100], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_alt_no_paypal`) } + [type]: { dimensions: [350, 64], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_alt_no_paypal`) } }), {} ); @@ -30,11 +33,34 @@ const SINGLE_LINE_NO_PAYPAL = TYPES.reduce( const SINGLE_LINE_NO_PP = TYPES.reduce( (object, type) => ({ ...object, - [type]: { dimensions: [477, 64], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_alt_noPP`) } + [type]: { dimensions: [320, 60], src: getSvgSrc(`ppc_${TYPE_MAP[type]}_alt_noPP`) } }), {} ); +// Define flex logo mutations for PAYPAL_CREDIT +export const flexLogoMutations = [ + ['color:gray', { logo: STACKED.COLOR }], + ['color:white', { logo: STACKED.COLOR }], + ['color:monochrome', { logo: STACKED.MONOCHROME }], + ['color:grayscale', { logo: STACKED.GRAYSCALE }] +]; + +// Define text logo mutations for PAYPAL_CREDIT +export const textLogoMutations = [ + ['text.color:white && logo.type:primary', { logo: STACKED.WHITE }], + ['text.color:grayscale && logo.type:primary', { logo: STACKED.GRAYSCALE }], + ['text.color:monochrome && logo.type:primary', { logo: STACKED.MONOCHROME }], + + ['text.color:white && logo.type:alternative', { logo: SINGLE_LINE.WHITE }], + ['text.color:grayscale && logo.type:alternative', { logo: SINGLE_LINE.GRAYSCALE }], + ['text.color:monochrome && logo.type:alternative', { logo: SINGLE_LINE.MONOCHROME }], + + ['text.color:white && logo.type:inline', { logo: SINGLE_LINE_NO_PP.WHITE }], + ['text.color:grayscale && logo.type:inline', { logo: SINGLE_LINE_NO_PP.GRAYSCALE }], + ['text.color:monochrome && logo.type:inline', { logo: SINGLE_LINE_NO_PP.MONOCHROME }] +]; + export default { STACKED, SINGLE_LINE, @@ -44,5 +70,8 @@ export default { PRIMARY: STACKED, ALTERNATIVE: SINGLE_LINE, ALT_NO_PAYPAL: SINGLE_LINE_NO_PAYPAL, - ALT_NO_PP: SINGLE_LINE_NO_PP + ALT_NO_PP: SINGLE_LINE_NO_PP, + // Export logo mutations for flex layouts + flexLogoMutations, + textLogoMutations }; diff --git a/src/server/locale/US/PAY_LATER_LONG_TERM/index.js b/src/server/locale/US/PAY_LATER_LONG_TERM/index.js index 174e01f2ae..3c90c21e5f 100644 --- a/src/server/locale/US/PAY_LATER_LONG_TERM/index.js +++ b/src/server/locale/US/PAY_LATER_LONG_TERM/index.js @@ -1,6 +1,7 @@ import validOptions from './validOptions'; import getMutations from './mutations'; -import logos from '../../../message/logos'; +import defaultLogos from '../../../message/logos'; +import customLogos from './logos'; import styles from './styles'; export default { @@ -8,6 +9,6 @@ export default { productName: ['with', 'PayPal.'], validOptions, getMutations, - logos, + logos: customLogos || defaultLogos, styles }; diff --git a/src/server/locale/US/PAY_LATER_LONG_TERM/logos.js b/src/server/locale/US/PAY_LATER_LONG_TERM/logos.js new file mode 100644 index 0000000000..259e30d4ca --- /dev/null +++ b/src/server/locale/US/PAY_LATER_LONG_TERM/logos.js @@ -0,0 +1,51 @@ +const ROOT_URL = '/assets/logos/5.1/paylater'; +const TYPES = ['COLOR', 'WHITE', 'BLACK', 'GRAYSCALE']; +const TYPE_MAP = { COLOR: 'fc', WHITE: 'wh', BLACK: 'mono', GRAYSCALE: 'grayscale' }; +const getSvgSrc = svgFileName => `${ROOT_URL}/${svgFileName}.svg`; + +const PRIMARY = TYPES.reduce( + (object, type) => ({ + ...object, + [type]: { dimensions: [131, 47], src: getSvgSrc(`paylater_${TYPE_MAP[type]}_pri`) } + }), + {} +); + +const ALTERNATIVE = TYPES.reduce( + (object, type) => ({ + ...object, + [type]: { dimensions: [32, 32], src: getSvgSrc(`paylater_${TYPE_MAP[type]}_alt`) } + }), + {} +); + +// Define flex logo mutations for PAY_LATER_LONG_TERM +export const flexLogoMutations = [ + ['color:gray', { logo: PRIMARY.COLOR }], + ['color:white', { logo: PRIMARY.COLOR }], + ['color:monochrome', { logo: PRIMARY.MONOCHROME }], + ['color:grayscale', { logo: PRIMARY.GRAYSCALE }] +]; + +// Define text logo mutations for PAY_LATER_LONG_TERM +export const textLogoMutations = [ + ['text.color:white && logo.type:primary', { logo: PRIMARY.WHITE }], + ['text.color:grayscale && logo.type:primary', { logo: PRIMARY.GRAYSCALE }], + ['text.color:monochrome && logo.type:primary', { logo: PRIMARY.MONOCHROME }], + + ['text.color:white && logo.type:alternative', { logo: ALTERNATIVE.WHITE }], + ['text.color:grayscale && logo.type:alternative', { logo: ALTERNATIVE.GRAYSCALE }], + ['text.color:monochrome && logo.type:alternative', { logo: ALTERNATIVE.MONOCHROME }], + + ['text.color:white && logo.type:inline', { logo: ALTERNATIVE.WHITE }], + ['text.color:grayscale && logo.type:inline', { logo: ALTERNATIVE.GRAYSCALE }], + ['text.color:monochrome && logo.type:inline', { logo: ALTERNATIVE.MONOCHROME }] +]; + +export default { + PRIMARY, + ALTERNATIVE, + // Export logo mutations for flex layouts + flexLogoMutations, + textLogoMutations +}; diff --git a/src/server/locale/US/PAY_LATER_SHORT_TERM/index.js b/src/server/locale/US/PAY_LATER_SHORT_TERM/index.js index 174e01f2ae..3c90c21e5f 100644 --- a/src/server/locale/US/PAY_LATER_SHORT_TERM/index.js +++ b/src/server/locale/US/PAY_LATER_SHORT_TERM/index.js @@ -1,6 +1,7 @@ import validOptions from './validOptions'; import getMutations from './mutations'; -import logos from '../../../message/logos'; +import defaultLogos from '../../../message/logos'; +import customLogos from './logos'; import styles from './styles'; export default { @@ -8,6 +9,6 @@ export default { productName: ['with', 'PayPal.'], validOptions, getMutations, - logos, + logos: customLogos || defaultLogos, styles }; diff --git a/src/server/locale/US/PAY_LATER_SHORT_TERM/logos.js b/src/server/locale/US/PAY_LATER_SHORT_TERM/logos.js new file mode 100644 index 0000000000..642e33b9f6 --- /dev/null +++ b/src/server/locale/US/PAY_LATER_SHORT_TERM/logos.js @@ -0,0 +1,51 @@ +const ROOT_URL = '/assets/logos/5.1/paylater'; +const TYPES = ['COLOR', 'WHITE', 'BLACK', 'GRAYSCALE']; +const TYPE_MAP = { COLOR: 'fc', WHITE: 'wh', BLACK: 'mono', GRAYSCALE: 'grayscale' }; +const getSvgSrc = svgFileName => `${ROOT_URL}/${svgFileName}.svg`; + +const PRIMARY = TYPES.reduce( + (object, type) => ({ + ...object, + [type]: { dimensions: [131, 47], src: getSvgSrc(`paylater_${TYPE_MAP[type]}_pri`) } + }), + {} +); + +const ALTERNATIVE = TYPES.reduce( + (object, type) => ({ + ...object, + [type]: { dimensions: [32, 32], src: getSvgSrc(`paylater_${TYPE_MAP[type]}_alt`) } + }), + {} +); + +// Define flex logo mutations for PAY_LATER_SHORT_TERM +export const flexLogoMutations = [ + ['color:gray', { logo: PRIMARY.COLOR }], + ['color:white', { logo: PRIMARY.COLOR }], + ['color:monochrome', { logo: PRIMARY.MONOCHROME }], + ['color:grayscale', { logo: PRIMARY.GRAYSCALE }] +]; + +// Define text logo mutations for PAY_LATER_SHORT_TERM +export const textLogoMutations = [ + ['text.color:white && logo.type:primary', { logo: PRIMARY.WHITE }], + ['text.color:grayscale && logo.type:primary', { logo: PRIMARY.GRAYSCALE }], + ['text.color:monochrome && logo.type:primary', { logo: PRIMARY.MONOCHROME }], + + ['text.color:white && logo.type:alternative', { logo: ALTERNATIVE.WHITE }], + ['text.color:grayscale && logo.type:alternative', { logo: ALTERNATIVE.GRAYSCALE }], + ['text.color:monochrome && logo.type:alternative', { logo: ALTERNATIVE.MONOCHROME }], + + ['text.color:white && logo.type:inline', { logo: ALTERNATIVE.WHITE }], + ['text.color:grayscale && logo.type:inline', { logo: ALTERNATIVE.GRAYSCALE }], + ['text.color:monochrome && logo.type:inline', { logo: ALTERNATIVE.MONOCHROME }] +]; + +export default { + PRIMARY, + ALTERNATIVE, + // Export logo mutations for flex layouts + flexLogoMutations, + textLogoMutations +}; diff --git a/src/server/locale/US/PAY_LATER_SHORT_TERM/mutations/short_term_nq.js b/src/server/locale/US/PAY_LATER_SHORT_TERM/mutations/short_term_nq.js index 3aa4198c6f..fd8ed2afa1 100644 --- a/src/server/locale/US/PAY_LATER_SHORT_TERM/mutations/short_term_nq.js +++ b/src/server/locale/US/PAY_LATER_SHORT_TERM/mutations/short_term_nq.js @@ -7,7 +7,11 @@ import { xSmallFallback, logo20x1 } from '../../../../message/mediaQueries'; -import { flexLogoMutations, textLogoMutations } from '../../../../message/logoMutations'; +import { + flexLogoMutations as defaultFlexLogoMutations, + textLogoMutations as defaultTextLogoMutations +} from '../../../../message/logoMutations'; +import { flexLogoMutations as customFlexLogoMutations, textLogoMutations as customTextLogoMutations } from '../logos'; const flex = [ [ @@ -54,7 +58,7 @@ const flex = [ } ], ['color:white-no-border', { logo: Logo.PP_PAYPAL.COLOR }], - ...flexLogoMutations + ...(customFlexLogoMutations || defaultFlexLogoMutations) ]; export default { @@ -152,6 +156,6 @@ export default { ] }) ], - ...textLogoMutations + ...(customTextLogoMutations || defaultTextLogoMutations) ] }; diff --git a/src/server/locale/US/PAY_LATER_SHORT_TERM/mutations/short_term_q.js b/src/server/locale/US/PAY_LATER_SHORT_TERM/mutations/short_term_q.js index a43315fc30..8ca30753dc 100644 --- a/src/server/locale/US/PAY_LATER_SHORT_TERM/mutations/short_term_q.js +++ b/src/server/locale/US/PAY_LATER_SHORT_TERM/mutations/short_term_q.js @@ -8,7 +8,11 @@ import { logo20x1, addPeriod } from '../../../../message/mediaQueries'; -import { flexLogoMutations, textLogoMutations } from '../../../../message/logoMutations'; +import { + flexLogoMutations as defaultFlexLogoMutations, + textLogoMutations as defaultTextLogoMutations +} from '../../../../message/logoMutations'; +import { flexLogoMutations as customFlexLogoMutations, textLogoMutations as customTextLogoMutations } from '../logos'; const flex = [ [ @@ -59,7 +63,7 @@ const flex = [ } ], ['color:white-no-border', { logo: Logo.PP_PAYPAL.COLOR }], - ...flexLogoMutations + ...(customFlexLogoMutations || defaultFlexLogoMutations) ]; export default { @@ -170,6 +174,6 @@ export default { ] }) ], - ...textLogoMutations + ...(customTextLogoMutations || defaultTextLogoMutations) ] }; diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 6684080620..a7c532161a 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -10,7 +10,7 @@ const PORT = process.env.PORT || 8080; module.exports = (env = {}) => { const WEBPACK_DEV_SERVER_CONFIG = { - contentBase: './demo', + contentBase: ['./demo', './public'], publicPath: '/', // set and export DEV_BROWSER in Terminal config to open that specific browser // otherwise opens default browser if not set