New Donation Flow - Form Data Flow and Stripe Card submission (#1311)

* payment-process-stripe - add flow context

* payment-process-stripe - add choose amount component

* payment-process-stripe - connect the accordion group to work with formik now

* payment-process-stripe - connect the accordion card group to work with formik

* payment-process-stripe - add formik to the flow form

* payment-process-stripe - add the choose amount from the old donation flow

* payment-process-stripe - add disabled prop to the options on the cards

* payment-process-stripe - add the stripe payment intent to the context

* payment-process-stripe - add the stripe key to the runtime config

* payment-process-stripe - add locale to the stripe payment process

* dependencies - bump up minor next version to 13.1

* payment-process-stripe - add step splitter component

* payment-process-stripe - add mobile view for the payment method

* payment-process-stripe - add disabled and fix styling for the RadioAccordionGroup

* 1284 - add flow context

* 1284 - add choose amount component

* 1284 - connect the accordion group to work with formik now

* 1284 - connect the accordion card group to work with formik

* 1284 - add formik to the flow form

* 1284 - add the choose amount from the old donation flow

* 1284 - add disabled prop to the options on the cards

* 1284 - add the stripe payment intent to the context

* 1284 - add the stripe key to the runtime config

* 1284 - add locale to the stripe payment process

* dependencies - bump up minor next version to 13.1

* 1284 - add step splitter component

* 1284 - add mobile view for the payment method

* 1284 - add disabled and fix styling for the RadioAccordionGroup

* 1284 - rewrite DonationFlowPage styles to use the new `styled` api

* 1284 - remove unecessary `StyledLayout`

* 1284 - move tax calculations and checkbox to the PaymentMethod step

* 1284 - fix stripe promise and styling issues

* 1284 - fix mobile and tablet styling

* 1284 - remove stripe public key from the .env example file

* 1284 - add `<LinkAuthenticationElement />` for email on the stripe payment

* 1284 - fix rerendering issue on RadioCardItems

* a11y - add accessibility :focus styling to all buttons

* a11y - fix keyboard navigation for `LinkButton` component

* dependencies - update material dependencies

* 1292 - add authentication form RadioAccordionGroup and initial skeleton

* 1292 - add the inline login form to the login step

* 1292 - add translation to the `Authentication`

* 1292 - fix Radio checks on the authentication form accordions

* 1292 - add ƒorm validation and initial values

* 1292 - add inline register form

* 1292 - add authentication folder

* 1292 - style form donate button

* 1292 - return yup.then to non-functions

* 1292 - fix payment method grid problem

* 1292 - remove stripe public key from example env

* 1292 - add heading to the form

* 1292 - move payment method components to a folder

* 1292 - change structure of the donation-flow directory

* 1292 - add docs to the RadioGroup components

* 1292 - fix context import

* 1292 - remove `stripe-fee-calculators.ts` from the payment-method folder

* 1292 - add `anonymous` as a seperate checkbox and field

* feat-7134 - add a `NOREGISTER` state to the authentication and a conditionally rendered checkbox

* feat-7134 - return the authentication on null if checkbox is unchecekd

* avatar-letters-hotfix - add a fallback to `given_name` and `family_name` avatar letters (#1300)

* put campaigns with status different than active at the bottom of the … (#1304)

* put campaigns with status different than active at the bottom of the list

* remove left out `console.log`

* Fix Campaigns section max width and alignment on Homepage and Campaigns page (#1303)

* Fix maxWidth of Campaigns section on Homepage

* Fix maxWidth for Campaigns section on Campaign page

* Fix alignment of campaigns page

* Fix spacings on campaigns section

* Remove unused import (#1306)

* 1292 - add a noregister radio button and put the anonymous checkbox to be avaliable to both logged and unlogged users

* 1292 - add an email field for no-register users

* 1292 - arrange imports on the Authentication

* Adding withdrawnAmount in Admin Campaign Grid (#1305)

* fixed scroll in admin campaign grid

* allow edit of public donor name for all donations - #1206

* fixed: misleading names for bank upload

* fixed typos valt vs vault

* moved: vault grid actions as first column

* fixed: editing of withdrawals and status change to successfully approved

* added: withdrawnAmount column in Admin Campaign grid

* forbid changes on succeeded withdrawal

---------

Co-authored-by: quantum-grit <[email protected]>

* 1299 - move out stripe `Elements` in a separate provider outside the form

* 1299 - add `formik-persist-values` dependency and session storage persistance

* 1299 - add create stripe donation endpoint

* 1299 - add update endpoint call to update the current payment intent

* 1299 - add a call to the createStripePayment endpoint before submitting

* 1299 - reorder imports

* 1299 - update form validation

* #1188, #1194 - Add POM for the E2E tests and update all tests (#1265)

* Created basic POM for the Playwright tests - initial commit

Added method and configurations

Additional refactoring - methods, specs and gitignore

Implemented Support page for E2E tests

Fixed tests for Support page

New changes on the tests

* Created basic POM for the Playwright tests - initial commit

Added method and configurations

Additional refactoring - methods, specs and gitignore

Implemented Support page for E2E tests

Fixed tests for Support page

New changes on the tests

Fixes on E2E tests

* Updated paths for the localization files for E2E

* Merge branch '1194-feature-create-playwright-page-object-model-for-the-e2e-tests' of https://github.com/podkrepi-bg/frontend into 1194-feature-create-playwright-page-object-model-for-the-e2e-tests

* Revert "Merge branch '1194-feature-create-playwright-page-object-model-for-the-e2e-tests' of https://github.com/podkrepi-bg/frontend into 1194-feature-create-playwright-page-object-model-for-the-e2e-tests"

This reverts commit 3bb8a19, reversing
changes made to b18b16b.

* Updated Readme file

* Fixed Sonar issues and updated Playwright version

Additional fix

* 1194 - init yarn project in the e2e folder and move out gitignore

* 1194 - fix ts errors

* 1194 - add e2e/.yarn to gitignore

* 1194 - remove e2e/.yarn

* 1194 - remove cached .yarn folder

* 1194 - change GH Action workflow to now run the `test:e2e`

* 1194 - change GH Action workflow to include artifacts of the reports and results

* 1194 - fix home.page.ts ts errors

* 1194 - remove hardcoded navigation to different environments

* 1194 - add installation of dependencies for the e2e folder  in the CI action

* 1194 - fix translation on the homepage

* 1194 - fix e2e script in the root folder

* 1194 - add a tsconfig.build.json to exclude e2e while next is building

* 1194 - add data based on the STAGING env variable

* 1194 - resolve environment related tests

* 1194 - remove uneccessasry `tsconfigPath` inside of the config

* 1194 - put video to `off` by default

* 1194 - add a clickCampaignByIndex method

* 1194 - remove campaign specific test and changed them to index based

* 1194 - add the index on the campaigns page list

* 1194 - change the expiry date tests data to `04 / 42`

* 1194 - add the index to the campaign card on the campaigns section on the home page

* 1194 - add `playwright` as a dependency for the project

* 1194 - add the changed `yarn.lock`

* 1194 - fix the support action button click test  to not click the card beforehand

---------

Co-authored-by: Daniel Takev <[email protected]>

* feat-7134 - add `yarn install --immutable` to the Github Workflow

* feat-7134 - update `yarn.lock`

* 1299 - fix `e2e` region pick test

---------

Co-authored-by: Ani <[email protected]>
Co-authored-by: quantum-grit <[email protected]>
Co-authored-by: quantum-grit <[email protected]>
Co-authored-by: Daniel Takev <[email protected]>

.github/workflows/build-nextjs.yml

@@ -26,7 +26,7 @@ jobs:
             ${{ runner.os }}-build-yarn-
 
       - name: Install dependencies
-        run: yarn
+        run: yarn install --immutable
 
       - name: Build frontend
         run: |

.github/workflows/lint.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v3
 
       - name: Install dependencies
-        run: yarn
+        run: yarn install --immutable
 
       - name: Lint frontend
         run: yarn lint

.github/workflows/playwright.yml

@@ -67,7 +67,11 @@ jobs:
 
       - name: Install Frontend Dependencies
         working-directory: ./frontend
-        run: yarn
+        run: yarn install --immutable
+
+      - name: Install e2e Dependencies
+        working-directory: ./frontend/e2e
+        run: yarn install --immutable
 
       - name: Setup env
         working-directory: ./frontend
@@ -92,8 +96,8 @@ jobs:
         run: yarn start &> frontend.log &
 
       - name: Install Playwright Browsers
-        working-directory: ./frontend
-        run: npx playwright install --with-deps
+        working-directory: ./frontend/e2e
+        run: yarn run playwright:install
 
       - name: Wait on frontend
         uses: iFaxity/wait-on-action@v1
@@ -103,13 +107,20 @@ jobs:
 
       - name: Run Frontend Tests
         working-directory: ./frontend
-        run: yarn playwright test e2e/local
+        run: yarn run test:e2e
 
       - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report
-          path: ./frontend/playwright-report/
+          path: ./frontend/e2e/test-results/
+          retention-days: 14
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: ./frontend/e2e/e2e-reports/
           retention-days: 14
 
       - uses: actions/upload-artifact@v3

.gitignore

@@ -17,6 +17,13 @@ lerna-debug.log*
 coverage
 .nyc_output
 
+# E2E
+test-results/
+playwright-report/
+playwright/.cache/
+e2e-reports/
+e2e/.yarn/*
+
 # IDEs and editors
 .idea
 .project
@@ -51,9 +58,6 @@ build/
 bld/
 [Bb]in/
 [Oo]bj/
-/test-results/
-/playwright-report/
-/playwright/.cache/
 
 # https://yarnpkg.com/getting-started/qa/#which-files-should-be-gitignored
 .pnp.*

e2e/README.md

@@ -45,14 +45,8 @@ Options:
 yarn test:e2e
 ```
 
-### Run only local test suites
+### Run test suites in headed mode with enabled debug
 
 ```shell
-yarn test:e2e local
-```
-
-### Run local test suites in headed mode with enabled debug
-
-```shell
-yarn test:e2e local --headed --debug -x -g support
+yarn test:e2e --headed --debug -x -g support
 ```

e2e/data/enums/donation-regions.enum.ts

@@ -0,0 +1,5 @@
+export enum DonationRegions {
+  EUROPE = 'EU',
+  GREAT_BRITAIN = 'UK',
+  OTHER = 'Other',
+}

e2e/data/enums/languages.enum.ts

@@ -0,0 +1,6 @@
+// This enum should be used as a parameter for methods in E2E tests
+
+export enum LanguagesEnum {
+  BG = 'BG',
+  EN = 'EN',
+}

e2e/data/localization.ts

@@ -0,0 +1,37 @@
+import bgLocalizationCommonJson from '../../public/locales/bg/common.json'
+import enLocalizationCommonJson from '../../public/locales/en/common.json'
+
+import bgLocalizationIndexJson from '../../public/locales/bg/index.json'
+import enLocalizationIndexJson from '../../public/locales/en/index.json'
+
+import bgLocalizationSupportJson from '../../public/locales/bg/support.json'
+import enLocalizationSupportJson from '../../public/locales/en/support.json'
+
+import bgLocalizationValidationJson from '../../public/locales/bg/validation.json'
+import enLocalizationValidationJson from '../../public/locales/en/validation.json'
+
+import bgLocalizationCampaignsJson from '../../public/locales/bg/campaigns.json'
+import enLocalizationCampaignsJson from '../../public/locales/en/campaigns.json'
+
+import bgLocalizationOneTimeDonationJson from '../../public/locales/bg/one-time-donation.json'
+import enLocalizationOneTimeDonationJson from '../../public/locales/en/one-time-donation.json'
+
+// All these constants are used in the E2E test pages to manipulate web elements in a respective language
+// Common localization terms
+export const bgLocalizationCommon = bgLocalizationCommonJson
+export const enLocalizationCommon = enLocalizationCommonJson
+// Home
+export const bgLocalizationIndex = bgLocalizationIndexJson
+export const enLocalizationIndex = enLocalizationIndexJson
+// Support page
+export const bgLocalizationSupport = bgLocalizationSupportJson
+export const enLocalizationSupport = enLocalizationSupportJson
+// Campaigns page
+export const bgLocalizationCampaigns = bgLocalizationCampaignsJson
+export const enLocalizationCampaigns = enLocalizationCampaignsJson
+// Donations
+export const bgLocalizationOneTimeDonation = bgLocalizationOneTimeDonationJson
+export const enLocalizationOneTimeDonation = enLocalizationOneTimeDonationJson
+// Validations
+export const bgLocalizationValidation = bgLocalizationValidationJson
+export const enLocalizationValidation = enLocalizationValidationJson

e2e/data/support-page-tests.data.ts

@@ -0,0 +1,15 @@
+export const supportPageVolutneerTestData = {
+  firstName: 'Test valid first name',
+  lastName: 'Test valid last name',
+  email: '[email protected]',
+  phone: '+359888000000',
+  comment: 'E2E Test comment',
+}
+
+export const anonDonationTestData = {
+  cardNumber: '4242 4242 4242 4242',
+  cardExpDate: '04 / 42',
+  cardCvc: '424',
+  billingName: 'E2E Test Anonymous Donation',
+  country: 'BG',
+}