houdiniproject · wwahammy · Nov 5, 2021 · Dec 17, 2021
diff --git a/app/javascript/components/legacy/_dependencies/ff-core/wizard/index.tsx b/app/javascript/components/legacy/_dependencies/ff-core/wizard/index.tsx
@@ -0,0 +1,119 @@
+/* eslint-disable react/prop-types */
+import useSteps, { InputStepsState, KeyedStep, StepsObject } from '../../../../../hooks/useSteps';
+import React, { createContext } from 'react';
+import { noop } from 'lodash';
+
+// from ff-core/wizard
+
+
+interface WizardProps extends InputStepsState<KeyedStep & { body: JSX.Element, title: string }> {
+	followup: () => JSX.Element;
+
+}
+
+
+export const WizardContext = createContext<StepsObject<{ body: JSX.Element, title: string }>>({} as unknown as StepsObject<{ body: JSX.Element, title: string }>);
+
+export default function Wizard(props: WizardProps): JSX.Element {
+
+	const {
+		steps, followup,
+	} = props;
+	const stepManager = useSteps<{ body: JSX.Element, title: string }>({ steps, addStep: noop, removeStep: noop });
+
+	const currentStep = stepManager.activeStep;
+
+
+
+	const isCompleted = stepManager.activeStep === stepManager.steps.length - 1;
+	return (
+		<WizardContext.Provider value={stepManager}>
+			<div className={'ff-wizard-body'}>
+				<StepIndex
+					currentStep={currentStep}
+					isCompleted={isCompleted}
+					stepNames={stepManager.steps.map(value => value.title)}
+					jump={stepManager.goto}
+				/>
+				<Body currentStep={currentStep} isCompleted={isCompleted}>
+					{stepManager.steps.map(i => i.body)}
+				</Body>
+				<Followup isCompleted={isCompleted}>
+					{followup()}
+				</Followup>;
+			</div>
+		</WizardContext.Provider>);
+}
+
+
+Wizard.defaultProps = {
+	addStep: noop,
+	removeStep: noop,
+};
+
+
+
+
+function Followup({ isCompleted, children }: React.PropsWithChildren<{ isCompleted: boolean }>) {
+	return <div className="ff-wizard-followup" style={{
+		display: isCompleted ? 'block' : 'none',
+	}}>
+		{children}
+	</div>;
+}
+
+function StepIndex({ stepNames, isCompleted, currentStep, jump }: { stepNames: string[], isCompleted: boolean, currentStep: number, jump: (args: any) => void }) {
+	const width = 100 / stepNames.length + '%';
+	return <div className={'ff-wizard-index'}
+		style={{ display: isCompleted ? 'none' : 'block' }}>
+		{stepNames.map((name, idx) =>
+			(<StepHeader
+				width={width}
+				name={name}
+				currentStep={currentStep}
+				idx={idx}
+				jump={jump}
+				key={name}
+			/>)
+		)}
+	</div>;
+
+
+}
+
+function StepHeader({ width, jump, name, idx, currentStep }: { width: string, name: string, jump: (args: any) => void, idx: number, currentStep: number }) {
+	const classNames = ['ff-wizard-index-label'];
+	if (currentStep === idx) {
+		classNames.push('ff-wizard-index-label--current');
+	}
+	if (currentStep > idx) {
+		classNames.push('ff-wizard-index-label--accessible');
+	}
+	return (<span
+		className={classNames.join(' ')}
+		style={{ width: width }}
+		onClick={() => jump(idx)} >
+		{name}
+	</span>);
+
+}
+
+function Body({ currentStep, isCompleted, children }: React.PropsWithChildren<{ currentStep: number, isCompleted: boolean }>) {
+	return <div className={'ff-wizard-steps'} style={{
+		display: isCompleted ? 'block' : 'none',
+	}}>
+
+		{React.Children.map(children, (child, idx) => (
+			<StepBody idx={idx} currentStep={currentStep} key={idx}>
+				{child}
+			</StepBody> /* idx is a bad choice for key but we got not options */
+		))}
+
+	</div>;
+}
+
+function StepBody({ idx, currentStep, children }: React.PropsWithChildren<{ idx: number, currentStep: number }>) {
+	return <div className={'ff-wizard-body-step'} style={{ display: currentStep === idx ? 'block' : 'none' }}>
+		{children}
+	</div>;
+}
diff --git a/app/javascript/components/legacy/components/styles/branded-wizard.tsx b/app/javascript/components/legacy/components/styles/branded-wizard.tsx
@@ -0,0 +1,74 @@
+// License: LGPL-3.0-or-later
+
+import { makeStyles } from "@material-ui/core/styles";
+import colors from '../../../../legacy_react/src/lib/nonprofitBranding';
+
+
+function cssGradient(dir: string, to: string, from: string) {
+	return `linear-gradient(${dir}, ${to}, ${from})`;
+}
+
+interface MakeStylesProps {
+	nonprofitColor: string;
+}
+
+const useStyles = makeStyles({
+	'@global': {
+		'.badge': {
+			display: 'inline-block',
+			minWidth: '10px',
+			'padding': '3px 7px',
+			'fontSize': '11px',
+			'fontWeight': 'bold',
+			'color': '#fff',
+			'lineHeight': '1',
+			'verticalAlign': 'middle',
+			'whiteSpace': 'nowrap',
+			'textAlign': 'center',
+			'backgroundColor': '#9c9c9c',
+			'borderRadius': '10px',
+		},
+		'.badge:empty': {
+			display: 'none',
+		},
+		'button .badge': {
+			'position': 'relative',
+			'top': '-1px',
+		},
+		'.wizard-steps div.is-selected, .wizard-steps button.is-selected': {
+			backgroundColor: (props: MakeStylesProps) => `${colors(props.nonprofitColor).lighter} !important`,
+		},
+		'wizard-steps .button.white': {
+			'color': '#494949',
+		},
+		'.wizard-steps a:not(.button--small), .ff-wizard-index-label.ff-wizard-index-label--accessible, .wizard-index-label.is-accessible': {
+			color: (props: MakeStylesProps) => `${colors(props.nonprofitColor).dark} !important`,
+		},
+		'wizard-steps input.is-selected': {
+			borderColor: (props: MakeStylesProps) => `${colors(props.nonprofitColor).light} !important`,
+		},
+		'.wizard-steps button:not(.white):not([disabled])': {
+			backgroundColor: (props: MakeStylesProps) => `${colors(props.nonprofitColor).dark} !important`,
+		},
+		'.wizard-steps .highlight': {
+			backgroundColor: (props: MakeStylesProps) => `${colors(props.nonprofitColor).lightest} !important`,
+		},
+
+		'.wizard-steps label, .wizard-steps th': {
+			color: '#636363',
+		},
+		".wizard-steps input[type='radio']:checked + label:before": {
+			backgroundColor: (props: MakeStylesProps) => `${colors(props.nonprofitColor).base} !important`,
+		},
+		".wizard-steps input[type='checkbox'] + label:before": {
+			color: (props: MakeStylesProps) => `${colors(props.nonprofitColor).base} !important`,
+		},
+		".ff-wizard-index-label.ff-wizard-index-label--current, .wizard-index-label.is-current": {
+			backgroundImage: (props: MakeStylesProps) => cssGradient('left', '#fbfbfb', colors(props.nonprofitColor).light),
+		},
+	},
+});
+
+export function useBrandedWizard(nonprofitColor: string): Record<"@global", string> {
+	return useStyles({ nonprofitColor });
+}
diff --git a/app/javascript/components/legacy/nonprofits/donate/amount-step.tsx b/app/javascript/components/legacy/nonprofits/donate/amount-step.tsx
@@ -0,0 +1,163 @@
+import React, { useContext } from 'react';
+import { useId } from "@reach/auto-id";
+import { Money } from '../../../../common/money';
+import { Formik, useFormikContext } from 'formik';
+import { ActionType, DonationWizardContext } from './wizard';
+declare const I18n: any;
+interface AmountStepProps {
+	amount: Money|null;
+	amountOptions: Money[];
+}
+
+
+
+interface FormikFormValues {
+	amount: Money|null;
+}
+export function AmountStep(props: AmountStepProps): JSX.Element {
+	const {dispatch:dispatchAction} = useContext(DonationWizardContext);
+
+	return (<div className={"wizard-step amount-step"} >
+		<Formik onSubmit={(values) => {
+			dispatchAction({type: 'setAmount', amount: values.amount});
+		}} initialValues={{amount: props.amount} as FormikFormValues} enableReinitialize={true}>
+			{/* <RecurringCheckbox />
+			<RecurringMessage /> */}
+			<AmountFields amounts={props.amountOptions} />
+		</Formik>
+	</div>);
+}
+
+interface RecurringCheckboxProps {
+	isRecurring: boolean;
+	showRecurring: boolean;
+	setRecurring: (recurring: boolean) => void;
+}
+
+function RecurringCheckbox(props: RecurringCheckboxProps): JSX.Element {
+	const checkboxId = useId();
+
+	if (props.showRecurring) {
+
+		return (<section className={'donate-recurringCheckbox u-paddingX--5 u-marginBottom--10'}>
+
+			<div className={`u-padding--8 u-background--grey u-centered ${props.isRecurring ? 'highlight' : ''}`}>
+				<input id={checkboxId} type={'checkbox'} checked={props.isRecurring || undefined} onChange={e => props.setRecurring(!props.isRecurring)} />
+				<label htmlFor={checkboxId}>
+					<ComposeTranslation
+						full={I18n.t('nonprofits.donate.amount.sustaining')}
+						bold={I18n.t('nonprofits.donate.amount.sustaining_bold')} />
+				</label>
+			</div>
+		</section>);
+
+	}
+
+	else {
+		return null;
+	}
+
+}
+function ComposeTranslation(props: { full: string, bold: string }): JSX.Element {
+	const texts = props.full.split(props.bold);
+	if (texts.length > 1) {
+		return (<>{texts[0]}<strong>{props.bold}</strong>{texts[2]}</>);
+	}
+	else {
+		return <>{props.full}</>;
+	}
+}
+
+function RecurringMessage(props: { isRecurring: boolean, recurringWeekly: boolean, periodicAmount: number, singleAmount: string }): JSX.Element {
+	if (!props.isRecurring) return <></>;
+
+	let label = I18n.t('nonprofits.donate.amount.sustaining_selected');
+	let bolded = I18n.t('nonprofits.donate.amount.sustaining_selected_bold');
+	if (props.recurringWeekly) {
+		label = label.replace(I18n.t('nonprofits.donate.amount.monthly'), I18n.t('nonprofits.donate.amount.weekly'));
+		bolded = I18n.t('nonprofits.donate.amount.weekly');
+	}
+	return (<section className={"donate-recurringMessage group"}>
+		<p className={`u-paddingX--5 u-centered ${!props.isRecurring ? 'u-hide' : ''}`}>
+			{props.singleAmount ? '' : <small className="info">
+				<ComposeTranslation full={label} bold={bolded} />
+			</small>}
+		</p>
+	</section>);
+}
+
+function prependCurrencyClassname(currency_symbol: string) {
+	if (currency_symbol === '$') {
+		return 'prepend--dollar';
+	} else if (currency_symbol === '€') {
+		return 'prepend--euro';
+	}
+}
+
+function getCurrencySymbol(amount: Money) {
+	if (amount.currency == 'EUR') {
+		return '€';
+	}
+	else if (amount.currency == 'USD') {
+		return '$';
+	}
+}
+
+interface AmountFieldsProps {
+	// singleAmount: string;
+	amounts: Money[];
+	// buttonAmountSelected: boolean;
+	//currencySymbol: string;
+}
+
+
+
+function AmountFields(props: AmountFieldsProps): JSX.Element {
+	const {values, setFieldValue, submitForm} = useFormikContext<FormikFormValues>();
+	// if (props.singleAmount) {
+	// 	return <></>;
+	// }s
+	return (<div className={'u-inline fieldsetLayout--three--evenPadding'}>
+		<span>
+			{props.amounts.map(amt => {
+				const weAreSelected = values.amount.equals(amt);
+				return (<fieldset key={JSON.stringify(amt.toJSON())}>
+					<button className={`button u-width--full white amount ${weAreSelected ? 'is-selected' : ''}`}
+						onClick={() => {
+							setFieldValue("amount", amt);
+							submitForm();
+						}}
+					>
+						<span className={'dollar'}>{getCurrencySymbol(amt)}</span>
+						{amt.cents}
+					</button>
+				</fieldset>);
+			})}
+		</span>
+
+		{/* <fieldset className={prependCurrencyClassname(props.currencySymbol)}>
+			<input className={'amount other'} name={'amount'} step='any' type='number' min={1}
+				placeholder={I18n.t('nonprofits.donate.amount.custom')}
+				onFocus={() => { throw new Error('onFocus not implemented'); }}
+				onChange={() => { throw new Error('onChange not implemented'); }}
+			/>
+		</fieldset>
+
+		<fieldset>
+			<button className={'button u-width--full btn-next'}
+				type={'submit'}
+				disabled={nextStepDisabled}
+				onClick={() => props.goToNextStep()}
+			>
+				{I18n.t('nonprofits.donate.amount.next')}
+			</button>
+		</fieldset> */}
+	</div>);
+}
+
+AmountFields.defaultProps = {
+	amounts: [],
+};
+
+
+
diff --git a/app/javascript/components/legacy/nonprofits/donate/close.svg b/app/javascript/components/legacy/nonprofits/donate/close.svg