New Donation Flow - Alerts and Summary Column (#1314)

* 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

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

* 1299 - add create stripe donation endpoint

* 1299 - reorder imports

* 1286 - add alerts column on desktop

* 1286 - add payment method alerts and create a separete types file

* 1286 - add authentication alert info

* 1286 - add hiding logic to the alerts boxes

* 1286 - remove recurring donations checkbox

* 1286 - add summary alert box skeleton

* 1286 - style summary alret box

* 1286 - add a privacy field and move the anonymous checkbox

* 1286 - add the splitter and fix typings

* 1286 - add mobile alerts

* 1286 - change authenticated text

* 1286 - remove mobile auth alerts on desktop

* 1286 - add strict typings to the form

* 1286 - split register validation

* 1286 - split login, general, amount validation

* 1286 - split initial form values

* 1286 - add error handling on the form submit requests

* 1286 - fix otherAmount field validation problems

* 1286 - change mutation configs to now use the mutationFn options

* 1286 - update authentication alert after stripe form initialization

* 1286 - add minus margins on the no registration alert

* 1286 - fix other field price overlap

* 1286 - add comment on the amount change

* 1286 - add `useDonationFlow` hook

* 1286 - comment out the `JSON.stringify(error)` and add a todo comment

* 1286 - add alert max-width to match the PaymentSummary alert

* 1286 - add PaymentSummaryAlert on mobile

* 1286 - add back button, and cancel confirmation dialog

* 1286 - adjust anchored alert width

* 1286 - swapped the change and confirmation buttons

* 1286 - removed unused imports

---------

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]>

src/components/common/ConfirmationDialog.tsx

@@ -39,7 +39,7 @@ const ConfirmationDialog = ({
       <Button onClick={handleConfirm} color="primary">
         {confirmButtonLabel}
       </Button>
-      <Button onClick={handleCancel} color="secondary">
+      <Button onClick={handleCancel} color="error">
         {cancelButtonLabel}
       </Button>
     </DialogActions>

src/components/common/form/RadioButtonGroup.tsx

@@ -31,6 +31,7 @@ export type RadioButtonGroup = {
    * <Grid />
    */
   muiRadioButtonGridProps?: Partial<GridProps>
+  ref?: React.RefObject<HTMLDivElement>
 }
 
 export default function RadioButtonGroup({

src/components/donation-flow/DonationFlowContext.tsx

@@ -1,11 +1,12 @@
 import React, { PropsWithChildren } from 'react'
+import getConfig from 'next/config'
 import { useRouter } from 'next/router'
+import Stripe from 'stripe'
+import { loadStripe, Stripe as StripeType, StripeError } from '@stripe/stripe-js'
+
 import { useViewCampaign } from 'common/hooks/campaigns'
 import CenteredSpinner from 'components/common/CenteredSpinner'
 import { CampaignResponse } from 'gql/campaigns'
-import Stripe from 'stripe'
-import { loadStripe, Stripe as StripeType } from '@stripe/stripe-js'
-import getConfig from 'next/config'
 const {
   publicRuntimeConfig: { STRIPE_PUBLIC_KEY },
 } = getConfig()
@@ -15,11 +16,13 @@ const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)
 type DonationContext = {
   stripePaymentIntent: Stripe.PaymentIntent | null
   setStripePaymentIntent: React.Dispatch<React.SetStateAction<Stripe.PaymentIntent | null>>
+  paymentError: StripeError | null
+  setPaymentError: React.Dispatch<React.SetStateAction<StripeError | null>>
   campaign: CampaignResponse
   stripePromise: Promise<StripeType | null>
 }
 
-export const DonationFlowContext = React.createContext({} as DonationContext)
+const DonationFlowContext = React.createContext({} as DonationContext)
 
 export const DonationFlowProvider = ({ children }: PropsWithChildren) => {
   //get the campaign with react-query and pass it to the context
@@ -28,13 +31,24 @@ export const DonationFlowProvider = ({ children }: PropsWithChildren) => {
   const { data, isLoading } = useViewCampaign(slug)
   const [stripePaymentIntent, setStripePaymentIntent] =
     React.useState<Stripe.PaymentIntent | null>(null)
+  const [paymentError, setPaymentError] = React.useState<StripeError | null>(null)
   if (isLoading || !data) return <CenteredSpinner size="2rem" />
   const { campaign } = data
   const value = {
     stripePaymentIntent,
     setStripePaymentIntent,
+    paymentError,
+    setPaymentError,
     campaign,
     stripePromise,
   }
   return <DonationFlowContext.Provider value={value}>{children}</DonationFlowContext.Provider>
 }
+
+export function useDonationFlow() {
+  const context = React.useContext(DonationFlowContext)
+  if (context === undefined) {
+    throw new Error('useDonationFlow must be used within a DonationFlowProvider')
+  }
+  return context
+}