2nd pillar custom transfer redesign (#1321)

* FundTransferTable to TS * Initial version of custom transfer table * Fix SCSS error, improve layout alignment * Update english translations * Fix second pillar flow test * Fix more tests * Remove obsolete text check * Fix fund transfer table test * Rewrite FundTransferTable test with RTL * Fix paddings * Remove too specific test, fix test string
TulevaEE · Jul 1, 2024 · 5d97cb0 · 5d97cb0
1 parent 974c6fa
commit 5d97cb0
Show file tree

Hide file tree

Showing 15 changed files with 98 additions and 165 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -34,6 +34,7 @@ module.exports = {
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
     'react/require-default-props': 'off',
     'arrow-body-style': ['error', 'as-needed'],
+    'react/react-in-jsx-scope': 'off',
   },
   overrides: [
     {
@@ -42,7 +43,6 @@ module.exports = {
         '@typescript-eslint/explicit-module-boundary-types': 0, // should only be used once file is renamed to actual typescript
         'no-shadow': 'off', // https://stackoverflow.com/questions/63961803/eslint-says-all-enums-in-typescript-app-are-already-declared-in-the-upper-scope
         '@typescript-eslint/no-shadow': ['error'],
-        'react/react-in-jsx-scope': 'off',
       },
     },
     {

diff --git a/src/components/_variables.scss b/src/components/_variables.scss
@@ -22,12 +22,12 @@ $blue: #0081ee;
 $navy-blue: #002f63;
 $blue-light: #00aeea;
 $very-light-blue: #edf7fe;
-$blue-washed: #ebf7ff;
+$blue-washed: #ebf6fe;
 $orange: #ff4800;
 $yellow: #fce228;
 $yellow-dark: #ffc107;
 $green: #078c28;
-$red: #DC3545;
+$red: #dc3545;
 $gray-mid: #d8d8d8;
 $gray-washed: #fafafa;
 $very-light-gray: rgba(48, 48, 48, 0.32);

diff --git a/src/components/flows/partner/PartnerSecondPillarFlow.test.tsx b/src/components/flows/partner/PartnerSecondPillarFlow.test.tsx
@@ -82,9 +82,7 @@ describe('partner 2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to:/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Stocks Pension Fund'),
     ).toBeInTheDocument();
@@ -122,9 +120,7 @@ describe('partner 2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to:/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Bonds Pension Fund'),
     ).toBeInTheDocument();
@@ -193,9 +189,7 @@ describe('partner 2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to:/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Stocks Pension Fund'),
     ).toBeInTheDocument();

diff --git a/src/components/flows/secondPillar/SecondPillarFlow.test.tsx b/src/components/flows/secondPillar/SecondPillarFlow.test.tsx
@@ -60,9 +60,7 @@ describe('2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Stocks Pension Fund'),
     ).toBeInTheDocument();
@@ -100,9 +98,7 @@ describe('2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Bonds Pension Fund'),
     ).toBeInTheDocument();
@@ -171,9 +167,7 @@ describe('2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Stocks Pension Fund'),
     ).toBeInTheDocument();

diff --git a/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.js b/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.js
@@ -16,7 +16,7 @@ import {
 } from '../../../exchange/actions';
 
 import MandateNotFilledAlert from './mandateNotFilledAlert';
-import FundTransferTable from './fundTransferTable';
+import { FundTransferTable } from './fundTransferTable/FundTransferTable';
 import './ConfirmMandate.scss';
 import { hasAddress as isAddressFilled } from '../../../common/user/address';
 
@@ -155,24 +155,24 @@ export const ConfirmMandate = ({
       )}
 
       <FormattedMessage id="confirm.mandate.intro" />
-      {selectedFutureContributionsFund ? (
+      {aggregatedSelections.length ? (
         <div className="mt-4">
-          <FormattedMessage id="confirm.mandate.future.contribution" />
-          <b className="highlight">{selectedFutureContributionsFund.name}</b>
+          <FundTransferTable selections={aggregatedSelectionsWithNames} />
         </div>
       ) : (
         ''
       )}
-      {aggregatedSelections.length ? (
-        <div className="mt-4">
-          <FormattedMessage id="confirm.mandate.switch.sources" />
-          <div className="mt-4">
-            <FundTransferTable selections={aggregatedSelectionsWithNames} />
-          </div>
+      {selectedFutureContributionsFund ? (
+        <div className="mt-2 p-3 fund-selections-container d-flex flex-column justify-content-between">
+          <FormattedMessage id="confirm.mandate.future.contribution" />
+          <b>
+            <span className="highlight">{selectedFutureContributionsFund.name}</span>
+          </b>
         </div>
       ) : (
         ''
       )}
+
       <div className="mt-5">
         <div className="custom-control custom-checkbox">
           <input

diff --git a/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.spec.js b/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.spec.js
@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 import { Link, Redirect } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { ConfirmMandate } from './ConfirmMandate';
-import FundTransferTable from './fundTransferTable';
+import { FundTransferTable } from './fundTransferTable/FundTransferTable';
 import MandateNotFilledAlert from './mandateNotFilledAlert';
 import { Loader, AuthenticationLoader, ErrorMessage } from '../../../common';
 
@@ -68,14 +68,7 @@ describe('Confirm mandate step', () => {
     };
     const selectedFutureContributionsFund = { name: 'test name' };
     component.setProps({ exchange, selectedFutureContributionsFund });
-    expect(
-      component.contains(
-        <div className="mt-4">
-          <FormattedMessage id="confirm.mandate.future.contribution" />
-          <b className="highlight">test name</b>
-        </div>,
-      ),
-    ).toBe(true);
+    expect(component.contains('test name')).toBe(true);
     exchange.selectedFutureContributionsFundIsin = null;
     component.setProps({ exchange, selectedFutureContributionsFund: null });
     expect(component.contains(<FormattedMessage id="confirm.mandate.future.contribution" />)).toBe(
@@ -152,7 +145,6 @@ describe('Confirm mandate step', () => {
         targetFundName: 'd',
       },
     ]);
-    expect(component.contains(<FormattedMessage id="confirm.mandate.switch.sources" />)).toBe(true);
   });
 
   it('aggregates selections for showing funds', () => {

diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.js b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.js
diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.scss b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.scss
@@ -15,3 +15,18 @@
   border-bottom-style: solid;
   border-color: $gray-mid;
 }
+
+.fund-selections-container {
+  background-color: $blue-washed;
+  border-radius: 8px;
+}
+
+.fund-selections-current-fund {
+  flex-basis: 40%;
+  flex-shrink: 0;
+}
+
+.fund-selection-divider {
+  width: calc(100% - 2rem);
+  border-bottom: 1px solid #cae0f1;
+}
diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.spec.js b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.spec.js
diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.tsx b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.tsx
@@ -0,0 +1,49 @@
+import './FundTransferTable.scss';
+import { PropsWithChildren } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+type Props = {
+  selections: {
+    sourceFundIsin: string;
+    sourceFundName: string;
+    targetFundName: string;
+    targetFundIsin: string;
+    percentage: number;
+  }[];
+};
+
+export const FundTransferTable = ({ selections = [] }: Props) => (
+  <div className="fund-selections-container">
+    <div className="pt-3 px-3">
+      <FormattedMessage id="confirm.mandate.transferExisting" />
+    </div>
+    {selections.map((selection, index) => (
+      <div key={index}>
+        <div className="px-3 pb-3 d-flex flex-column flex-md-row justify-content-between">
+          <TransferDataPoint className="flex-grow-0 flex-shrink-0 fund-selections-current-fund">
+            <FormattedMessage id="confirm.mandate.current.fund" />
+            <b>{selection.sourceFundName}</b>
+          </TransferDataPoint>
+          <TransferDataPoint className="flex-grow-1">
+            <FormattedMessage id="confirm.mandate.future.fund" />
+            <b>
+              <span className="highlight">{selection.targetFundName}</span>
+            </b>
+          </TransferDataPoint>
+          <TransferDataPoint className="flex-grow-0 flex-shrink-0">
+            <FormattedMessage id="confirm.mandate.percentage" />
+            <b>{selection.percentage * 100}%</b>
+          </TransferDataPoint>
+        </div>
+
+        {selections.length > 1 && index !== selections.length - 1 && (
+          <div className="fund-selection-divider ml-3" />
+        )}
+      </div>
+    ))}
+  </div>
+);
+
+const TransferDataPoint = ({ children, className }: PropsWithChildren<{ className?: string }>) => (
+  <div className={`pt-3 d-flex flex-column justify-start ${className ?? ''}`}>{children}</div>
+);
diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/index.js b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/index.js
diff --git a/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.js b/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.js
@@ -9,7 +9,7 @@ import { FormattedMessage } from 'react-intl';
 import ThirdPillarTermsAgreement from './ThirdPillarTermsAgreement';
 import PoliticallyExposedPersonAgreement from '../../../aml/PoliticallyExposedPersonAgreement';
 import { actions as exchangeActions } from '../../../exchange';
-import FundTransferTable from '../../secondPillar/confirmMandate/fundTransferTable';
+import { FundTransferTable } from '../../secondPillar/confirmMandate/fundTransferTable/FundTransferTable';
 import ResidencyAgreement from '../../../aml/ResidencyAgreement';
 import { AuthenticationLoader, ErrorMessage, Loader } from '../../../common';
 import { hasAddress as isAddressFilled } from '../../../common/user/address';

diff --git a/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.spec.js b/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.spec.js
@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 
 import { FormattedMessage } from 'react-intl';
 import { ConfirmThirdPillarMandate } from './ConfirmThirdPillarMandate';
-import FundTransferTable from '../../secondPillar/confirmMandate/fundTransferTable';
+import { FundTransferTable } from '../../secondPillar/confirmMandate/fundTransferTable/FundTransferTable';
 import { AuthenticationLoader, Loader } from '../../../common';
 
 describe('ConfirmThirdPillarMandate', () => {

diff --git a/src/components/translations/translations.en.json b/src/components/translations/translations.en.json
@@ -134,11 +134,12 @@
   "transfer.future.capital.no.subtitle": "Your pension fund contributions will continue to be directed into  {currentFundName} pension fund, with a management fee of {currentFundManagementFee}% per year. If you wish to save money on fees, you can direct your contributions to Tuleva at a later date.",
   "transfer.future.capital.no.already.converted.subtitle": "Your pension fund contributions will continue to be directed into  {currentFundName} pension fund, with a management fee of {currentFundManagementFee}% per year.",
   "confirm.mandate.intro": "By signing I confirm that:",
-  "confirm.mandate.future.contribution": " I wish to transfer future fund payments to: ",
+  "confirm.mandate.transferExisting": "I transfer my existing fund units:",
+  "confirm.mandate.future.contribution": " I transfer future fund payments to: ",
   "confirm.mandate.switch.sources": "I wish to exchange current fund units for:",
-  "confirm.mandate.current.fund": "Current pension fund",
+  "confirm.mandate.current.fund": "Current fund",
   "confirm.mandate.percentage": "Percent",
-  "confirm.mandate.future.fund": "New pension fund",
+  "confirm.mandate.future.fund": "New fund",
   "confirm.mandate.sign": "Sign and send mandate",
   "confirm.mandate.preview": "Preview",
   "confirm.mandate.back": "Go back",