in support-frontend/assets/pages/weekly-subscription-checkout/components/weeklyCheckoutForm.tsx [161:448]
function WeeklyCheckoutForm(props: PropTypes) {
useCsrCustomerData(props.setCsrCustomerData);
useEffect(() => {
sendEventSubscriptionCheckoutStart(
props.product,
false,
props.price,
props.billingPeriod,
);
}, []);
const submissionErrorHeading =
props.submissionError === 'personal_details_incorrect'
? 'Sorry, there was a problem'
: 'Sorry, we could not process your payment';
const setBillingAddressMatchesDeliveryHandler = (newState: boolean) => {
props.setBillingAddressMatchesDelivery(newState);
props.setBillingCountry(props.deliveryCountry);
};
const paymentMethods = supportedPaymentMethods(
props.currencyId,
props.billingCountry,
);
const publicationStartDays = days.filter((day) => {
const invalidPublicationDates = ['-12-24', '-12-25', '-12-30'];
const date = formatMachineDate(day);
return !invalidPublicationDates.some((dateSuffix) =>
date.endsWith(dateSuffix),
);
});
return (
<Content>
<Layout
aside={
<>
<Summary
image={
<GridImage
gridId="checkoutPackshotWeekly"
srcSizes={[500]}
sizes="(max-width: 740px) 50vw, 548"
imgType="png"
altText=""
/>
}
title="Guardian Weekly"
description=""
productPrice={props.price}
billingPeriod={props.billingPeriod}
changeSubscription={routes.guardianWeeklySubscriptionLanding}
product={props.product}
/>
</>
}
>
<Form
onSubmit={(ev) => {
ev.preventDefault();
props.submitForm();
}}
>
<FormSection title="Your details">
<Select
cssOverrides={marginBottom}
id="title"
data-qm-masking="blocklist"
label="Title"
optional
value={props.title ?? ''}
onChange={(e) => props.setTitle(e.target.value)}
>
<OptionForSelect>Select a title</OptionForSelect>
{options(titles)}
</Select>
<PersonalDetails
firstName={props.firstName}
setFirstName={props.setFirstName}
lastName={props.lastName}
setLastName={props.setLastName}
email={props.email}
setEmail={props.setEmail}
confirmEmail={props.confirmEmail}
setConfirmEmail={props.setConfirmEmail}
isSignedIn={props.isSignedIn}
telephone={props.telephone}
setTelephone={props.setTelephone}
formErrors={props.formErrors}
signOut={props.signOut}
/>
</FormSection>
<FormSection title="Where should we deliver your magazine?">
<DeliveryAddress countries={gwDeliverableCountries} />
</FormSection>
<FormSection title="Is the billing address the same as the delivery address?">
<Rows>
<RadioGroup
label="Is the billing address the same as the delivery address?"
hideLabel
id="billingAddressMatchesDelivery"
name="billingAddressMatchesDelivery"
orientation="vertical"
error={firstError(
'billingAddressMatchesDelivery',
props.formErrors,
)}
>
<Radio
id="qa-billing-address-same"
value="yes"
label="Yes"
name="billingAddressMatchesDelivery"
checked={props.billingAddressMatchesDelivery}
onChange={() => setBillingAddressMatchesDeliveryHandler(true)}
/>
<Radio
id="qa-billing-address-different"
label="No"
value="no"
name="billingAddressMatchesDelivery"
checked={!props.billingAddressMatchesDelivery}
onChange={() =>
setBillingAddressMatchesDeliveryHandler(false)
}
/>
</RadioGroup>
</Rows>
</FormSection>
{!props.billingAddressMatchesDelivery ? (
<FormSection title="Your billing address">
<BillingAddress countries={gwCountries} />
</FormSection>
) : null}
<FormSection title="Please select the first publication you’d like to receive">
<Rows>
<RadioGroup
id="startDate"
error={firstError('startDate', props.formErrors)}
label="Please select the first publication you’d like to receive"
hideLabel={true}
>
{publicationStartDays.map((day) => {
const [userDate, machineDate] = [
formatUserDate(day),
formatMachineDate(day),
];
return (
<Radio
label={userDate}
value={userDate}
name={machineDate}
checked={machineDate === props.startDate}
onChange={() => props.setStartDate(machineDate)}
/>
);
})}
</RadioGroup>
<Text className="component-text__paddingTop">
<p className="component-text__sans">
We will take the first payment on the date of your first
publication.
</p>
<p className="component-text__sans">
Please allow 1 to 7 days after publication date for your
magazine to arrive, depending on national post services.
</p>
</Text>
</Rows>
</FormSection>
<BillingPeriodSelector
fulfilmentOption={props.fulfilmentOption}
onChange={(billingPeriod) => props.setBillingPeriod(billingPeriod)}
billingPeriods={weeklyBillingPeriods()}
pricingCountry={props.deliveryCountry}
productPrices={props.productPrices}
selected={props.billingPeriod}
/>
{paymentMethods.length > 0 ? (
<FormSection
title={
paymentMethods.length > 1
? 'How would you like to pay?'
: 'Payment Method'
}
>
<PaymentMethodSelector
availablePaymentMethods={paymentMethods}
paymentMethod={props.paymentMethod}
setPaymentMethod={(paymentMethod) =>
props.setPaymentMethod({ paymentMethod })
}
validationError={firstError('paymentMethod', props.formErrors)}
/>
</FormSection>
) : (
<GeneralErrorMessage
classModifiers={['no-valid-payments']}
errorHeading="Payment methods are unavailable"
errorReason="all_payment_methods_unavailable"
/>
)}
<FormSectionHiddenUntilSelected
id="stripeForm"
show={props.paymentMethod === Stripe}
title="Your card details"
>
<StripeProviderForCountry
country={props.deliveryCountry}
currency={props.currencyId}
isTestUser={props.isTestUser}
submitForm={props.submitForm}
// @ts-expect-error TODO: fix when we can fix error states for all checkouts
allErrors={[
...props.billingAddressErrors,
...props.deliveryAddressErrors,
...props.formErrors,
]}
name={`${props.firstName} ${props.lastName}`}
validateForm={props.validateForm}
buttonText="Pay now"
csrf={props.csrf}
setStripePublicKey={(key: string) =>
props.setStripePublicKey(key)
}
/>
<p css={DisclaimerOnSubscribeStyles}>
<StripeDisclaimer />
</p>
</FormSectionHiddenUntilSelected>
<FormSectionHiddenUntilSelected
id="directDebitForm"
show={props.paymentMethod === DirectDebit}
title="Your account details"
>
<DirectDebitForm
buttonText="Subscribe"
submitForm={props.submitForm}
allErrors={[
...props.billingAddressErrors,
...props.deliveryAddressErrors,
...props.formErrors,
]}
submissionError={props.submissionError}
submissionErrorHeading={submissionErrorHeading}
/>
</FormSectionHiddenUntilSelected>
{props.paymentMethod === PayPal ? (
<PayPalSubmitButton
paymentMethod={props.paymentMethod}
onPaymentAuthorised={props.onPaymentAuthorised}
csrf={props.csrf}
currencyId={props.currencyId}
payPalHasLoaded={props.payPalHasLoaded}
formIsValid={props.formIsValid}
validateForm={props.validateForm}
isTestUser={props.isTestUser}
setupRecurringPayPalPayment={props.setupRecurringPayPalPayment}
amount={props.discountedPrice.price}
billingPeriod={props.billingPeriod}
// @ts-expect-error TODO: fix when we can fix error states for all checkouts
allErrors={[
...props.billingAddressErrors,
...props.deliveryAddressErrors,
...props.formErrors,
]}
/>
) : null}
<GeneralErrorMessage
errorReason={props.submissionError ?? undefined}
errorHeading={submissionErrorHeading}
/>
<Total
price={props.discountedPrice.price}
currency={props.currencyId}
/>
<PaymentTerms paymentMethod={props.paymentMethod} />
</Form>
</Layout>
</Content>
);
} // ----- Exports ----- //