chore: cut release (#1098)

src/components/modal/v2/lib/hooks/calculator.js

@@ -201,10 +201,8 @@ export default function useCalculator({ autoSubmit = false } = {}) {
         dispatch({
             type: 'input',
             data: {
-                value:
-                    localize(value, country, 2).length > 9 || value.length > 9
-                        ? state.inputValue
-                        : value.replace(/[^\d.,]/g, ''),
+                // eslint-disable-next-line security/detect-unsafe-regex
+                value: !value.match(/^\D*(\d\D*){0,9}$/gm) ? state.inputValue : value.replace(/[^\d.,]/g, ''),
                 autoSubmit
             }
         });

src/components/modal/v2/parts/Calculator.jsx

@@ -207,7 +207,7 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design,
                 </div>
                 <div aria-live="polite">{renderError(error || emptyState || isLoading)}</div>
             </form>
-            {hasInitialAmount || hasUsedInputField ? (
+            {(hasInitialAmount || hasUsedInputField) && !error ? (
                 <div aria-live="polite" className="content-column">
                     <TermsTable
                         view={view}

tests/functional/spec/DE/banner/text.test.js → tests/functional/spec/DE/banner/textColorsSmallViewport.test.js

@@ -1,18 +1,10 @@
 import createBannerTest from '../../createBannerTest';
 import accounts from '../accounts';
 
-const positions = ['top', 'left', 'right'];
 const logoTypes = ['primary', 'alternative', 'inline', 'none'];
-const fontSizes = [10, 12, 16];
 const colors = ['black', 'white', 'monochrome', 'grayscale'];
 
 const tests = [].concat(
-    // Logo type primary and all valid logo position options
-    positions.map(position => [`Primary, Position:${position}`, { logo: { type: 'primary', position } }]),
-    // Logo types that do not have different logo position options
-    logoTypes.slice(1).map(type => [`Logo type:${type}`, { logo: { type } }]),
-    // Each font size option logo.type-primary
-    fontSizes.map(size => [`Font size:${size}`, { logo: { type: 'primary' }, text: { size } }]),
     // Each logo type, with non-black color options
     colors
         .slice(1)

tests/functional/spec/DE/banner/textPositionsLogoTypesSizes.test.js

@@ -0,0 +1,33 @@
+import createBannerTest from '../../createBannerTest';
+import accounts from '../accounts';
+
+const positions = ['top', 'left', 'right'];
+const logoTypes = ['primary', 'alternative', 'inline', 'none'];
+const fontSizes = [10, 12, 16];
+
+const tests = [].concat(
+    // Logo type primary and all valid logo position options
+    positions.map(position => [`Primary, Position:${position}`, { logo: { type: 'primary', position } }]),
+    // Logo types that do not have different logo position options
+    logoTypes.slice(1).map(type => [`Logo type:${type}`, { logo: { type } }]),
+    // Each font size option logo.type-primary
+    fontSizes.map(size => [`Font size:${size}`, { logo: { type: 'primary' }, text: { size } }])
+);
+
+describe(`DE > text (Test Count: ${tests.length * accounts.length})`, () => {
+    const runBannerTest = createBannerTest('DE');
+
+    describe.each(accounts)(`> %s (Test Count: ${tests.length})`, account => {
+        const getConfig = style => ({
+            account,
+            style: {
+                layout: 'text',
+                ...style
+            }
+        });
+
+        describe.each(tests)('%s', (name, style, viewport = { width: 1000, height: 100 }) => {
+            runBannerTest(viewport, getConfig(style));
+        });
+    });
+});

tests/functional/spec/US/banner/flexColors.test.js

@@ -0,0 +1,7 @@
+import runDescribeBlock from './runDescribeBlock';
+
+const colors = ['blue', 'black', 'white', 'gray', 'white-no-border', 'monochrome', 'grayscale'];
+
+const tests = [].concat(colors.slice(1).map(color => [`Ratio:1x1. Color:${color}`, { ratio: '1x1', color }]));
+
+runDescribeBlock('flex', tests);

tests/functional/spec/US/banner/flexViewportLarge.test.js

@@ -0,0 +1,14 @@
+import runDescribeBlock from './runDescribeBlock';
+
+const ratios = ['1x1', '1x4', '8x1', '20x1'];
+const viewports = [{ name: 'Large', width: 1100 }];
+
+const tests = [].concat(
+    viewports.reduce(
+        (array, { name, width }) =>
+            array.concat(ratios.map(ratio => [`Viewport:${name} Ratio:${ratio}`, { ratio, color: 'blue' }, { width }])),
+        []
+    )
+);
+
+runDescribeBlock('flex', tests);

tests/functional/spec/US/banner/flexViewportMedium.test.js

@@ -0,0 +1,14 @@
+import runDescribeBlock from './runDescribeBlock';
+
+const ratios = ['1x1', '1x4', '8x1', '20x1'];
+const viewports = [{ name: 'Medium', width: 400 }];
+
+const tests = [].concat(
+    viewports.reduce(
+        (array, { name, width }) =>
+            array.concat(ratios.map(ratio => [`Viewport:${name} Ratio:${ratio}`, { ratio, color: 'blue' }, { width }])),
+        []
+    )
+);
+
+runDescribeBlock('flex', tests);

tests/functional/spec/US/banner/flexViewportSmall.test.js

@@ -0,0 +1,14 @@
+import runDescribeBlock from './runDescribeBlock';
+
+const ratios = ['1x1', '1x4', '8x1', '20x1'];
+const viewports = [{ name: 'Small', width: 100 }];
+
+const tests = [].concat(
+    viewports.reduce(
+        (array, { name, width }) =>
+            array.concat(ratios.map(ratio => [`Viewport:${name} Ratio:${ratio}`, { ratio, color: 'blue' }, { width }])),
+        []
+    )
+);
+
+runDescribeBlock('flex', tests);

tests/functional/spec/US/banner/runDescribeBlock.js

@@ -0,0 +1,48 @@
+import createBannerTest from '../../createBannerTest';
+import accounts from '../accounts';
+
+// layout is flex or text
+export default function runDescribeBlock(layout, tests) {
+    // +1 is for GPL unqualified
+    describe(`US > ${layout} (Test Count: ${tests.length * (accounts.length + 1)})`, () => {
+        const runBannerTest = createBannerTest('US');
+        const isFlexLayout = layout === 'flex';
+        const viewportDefault = isFlexLayout ? { width: 1100 } : { width: 600, height: 100 };
+
+        describe.each(accounts)(`> %s (Test Count: ${tests.length})`, account => {
+            const getConfig = style => ({
+                account,
+                style: {
+                    layout,
+                    ...style
+                }
+            });
+
+            describe.each(tests)('%s', (name, style, viewport = viewportDefault) => {
+                if (isFlexLayout) {
+                    viewport.height = 700; // eslint-disable-line no-param-reassign
+                }
+                runBannerTest(viewport, getConfig(style));
+            });
+        });
+
+        // Run GPL with an unqualified amount
+        describe(`> DEV0000000GPL (Test Count: ${tests.length})`, () => {
+            const getConfig = style => ({
+                account: 'DEV0000000GPL',
+                amount: 5,
+                style: {
+                    layout,
+                    ...style
+                }
+            });
+
+            describe.each(tests)('%s', (name, style, viewport = viewportDefault) => {
+                if (isFlexLayout) {
+                    viewport.height = 700; // eslint-disable-line no-param-reassign
+                }
+                runBannerTest(viewport, getConfig(style));
+            });
+        });
+    });
+}

tests/functional/spec/US/banner/textAligns.test.js

@@ -0,0 +1,15 @@
+import runDescribeBlock from './runDescribeBlock';
+
+const textAlign = ['left', 'right', 'center'];
+
+const tests = [].concat(
+    textAlign.map(align => [`Text align:${align}`, { text: { align } }]),
+    // Small viewport
+    textAlign.map(align => [
+        'Small viewport',
+        { logo: { type: 'primary' }, text: { position: 'left', align } },
+        { width: 200, height: 100 }
+    ])
+);
+
+runDescribeBlock('text', tests);

tests/functional/spec/US/banner/textColorsInlineNone.js

@@ -0,0 +1,18 @@
+import runDescribeBlock from './runDescribeBlock';
+
+const logoTypes = ['inline', 'none'];
+const colors = ['black', 'white', 'monochrome', 'grayscale'];
+
+const tests = [].concat(
+    colors
+        .slice(1)
+        .reduce(
+            (array, color) =>
+                array.concat(
+                    logoTypes.map(type => [`${color} text, Logo type:${type}`, { logo: { type }, text: { color } }])
+                ),
+            []
+        )
+);
+
+runDescribeBlock('text', tests);

tests/functional/spec/US/banner/textColorsPrimaryAlternative.test.js

@@ -0,0 +1,18 @@
+import runDescribeBlock from './runDescribeBlock';
+
+const logoTypes = ['primary', 'alternative'];
+const colors = ['black', 'white', 'monochrome', 'grayscale'];
+
+const tests = [].concat(
+    colors
+        .slice(1)
+        .reduce(
+            (array, color) =>
+                array.concat(
+                    logoTypes.map(type => [`${color} text, Logo type:${type}`, { logo: { type }, text: { color } }])
+                ),
+            []
+        )
+);
+
+runDescribeBlock('text', tests);

tests/functional/spec/US/banner/textFontSizes.test.js

@@ -0,0 +1,9 @@
+import runDescribeBlock from './runDescribeBlock';
+
+const fontSizes = [10, 12, 16];
+
+const tests = [].concat(
+    fontSizes.map(size => [`Font size:${size}`, { logo: { type: 'alternative' }, text: { size } }])
+);
+
+runDescribeBlock('text', tests);

tests/functional/spec/US/banner/textLogoTypesAlternativeInlineNone.test.js

@@ -0,0 +1,21 @@
+import runDescribeBlock from './runDescribeBlock';
+
+const positions = ['top', 'left', 'right'];
+const logoTypes = ['alternative', 'inline', 'none'];
+
+const tests = [].concat(
+    // Logo types with valid logo position options
+    logoTypes
+        .slice(0, 2)
+        .reduce(
+            (array, type) =>
+                array.concat(
+                    positions.map(position => [`${type}, Position:${position}`, { logo: { type, position } }])
+                ),
+            []
+        ),
+    // Logo types that do not have different logo position options
+    logoTypes.slice(2).map(type => [`Logo type:${type}`, { logo: { type } }])
+);
+
+runDescribeBlock('text', tests);