New Donation Flow - Alerts and Summary Column

[dimitur2204]

Closes #1286

Motivation and context

Form Improvements:

• Added validation for the Login and Register forms
• Moved validations and initial value objects to each respective step and part of the form
• Moved the PaymentIntent update to run only once on submission
• Changed form value names for the amount regarding card donation to make more sense
• Added an error object on the DonationFlowContext
• Fixed otherAmount field bug when there is an uneven amount of prices

Alerts column:

• Added AlertsColumn which takes a sectionsRefArray which is an array of references. It then attaches alerts to each of the section references based on their id which is mapped to the [alerts](https://github.com/podkrepi-bg/frontend/pull/1314/files#diff-0b9f0d19b2035c89f509f8bf65f75cbc4ced3b1209c50b243ebd57ae86c2ebe9R39)
• Added AnchoredAlert which is an alert that takes a sectionRef and is absolutely positioned with a top equal to section.offsetTop + spacing and titles on the section (theme.spacing(4) + 1.5rem)
• Added PaymentSummaryAlert which is the summary of the payment, taxes and total of your payment.

Screenshots:

Desktop

Transaction	Auth

Mobile

Transaction	Auth

RFC

I think that this Anchoring approach might be problematic since React does not control refs and from my experience rerendering can be unpredictable.

If another viable approach comes to mind to anyone it would be good to hear @podkrepi-bg/frontend-maintainers

Affected urls

campaign/donation-v2/{slug}

[kachar]

Yet another swift update of the payment flow @dimitur2204

I see strong progress with this one.
Shared some ideas for code reusability and simplification.

[kachar]

We can add a helper hook to get the context in a seamless way with:

export function useDonationFlow() {
  return useContext(DonationFlowContext)
}

Suggested change

	const { campaign, stripePaymentIntent, paymentError, setPaymentError } =
	useContext(DonationFlowContext)
	const { campaign, stripePaymentIntent, paymentError, setPaymentError } = useDonationFlow()

[dimitur2204]

Done in d45154f

[kachar]

We can extract this list as separate component to simplify the rendering of alerts

[kachar]

We might also expand the text and reduce the right padding/margin to contain more chars on single row

[dimitur2204]

Removed all on the list items, but kept the one on the X button row

[kachar]

We might improve the width of the different sections so they match, whichever width feels right for you, just to be consistent.

[dimitur2204]

We might improve the width of the different sections so they match, whichever width feels right for you, just to be consistent.

Matched the smaller width, by hardcoding it to the AnchoredAlert

[kachar]

Awesome update!