Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert AddressForm From Angular to React #969

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Open

Convert AddressForm From Angular to React #969

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
db24bf2
remove ts-loader
reldredge71 Mar 9, 2022
f72807a
Translate AddressForm Select Components to React
reldredge71 Mar 8, 2022
710f548
Create TextInput Component
reldredge71 Mar 9, 2022
474b173
Create AddressForm in React
reldredge71 Mar 9, 2022
b8750e6
Add Select and Text Inputs to AddressForm
reldredge71 Mar 9, 2022
aea7f50
Insert AddressForm into CreditCardForm
reldredge71 Mar 9, 2022
0f64054
Install Formik
reldredge71 Mar 2, 2022
72d2e73
Update AddressForm Components to Work With Formik
reldredge71 Mar 9, 2022
92b865d
For now, replace translation handling with hardcoded text
reldredge71 Mar 9, 2022
4945084
Expose address updates to parent view
reldredge71 Mar 9, 2022
2fba43c
Introduce Yup
reldredge71 Mar 9, 2022
1bf6987
Fix jest.config.js
reldredge71 Mar 9, 2022
a07a0e2
Call refreshRegions on selecting country
reldredge71 Mar 11, 2022
5cb7503
Make addressDisabled and canRetry optional
reldredge71 Mar 11, 2022
aa10dea
Start working on tests
reldredge71 Mar 11, 2022
bbabb3c
Adjustments to SelectInput and textInput to be more customizable
reldredge71 Mar 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
290 changes: 173 additions & 117 deletions src/common/components/addressForm/addressForm.react.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import angular from 'angular';
import { react2angular } from 'react2angular';
import { Formik, FormikErrors } from 'formik';
import find from 'lodash/find';

import CountrySelect from './countrySelect';
Expand Down Expand Up @@ -64,6 +65,47 @@ const AddressForm = ({
return 0;
};

const validator = (values: Address): FormikErrors<Address> => {
const errors: FormikErrors<Address> = {};

if (loadingCountriesError) {
errors.country = 'COUNTRY_LIST_ERROR';
} else if (!values.country) {
errors.country = 'COUNTRY_SELECT_ERROR';
}
if (!values.streetAddress) {
errors.streetAddress = 'ADDRESS_ERROR';
} else if (values.streetAddress.length > 200) {
errors.streetAddress = 'MAX_LENGTH_ADDRESS_ERROR';
}
if (values.extendedAddress && values.extendedAddress.length > 100) {
errors.extendedAddress = 'MAX_LENGTH_ADDRESS_OTHERS_ERROR';
}
if (values.intAddressLine3 && values.intAddressLine3.length > 100) {
errors.intAddressLine3 = 'MAX_LENGTH_ADDRESS_OTHERS_ERROR';
}
if (values.intAddressLine4 && values.intAddressLine4.length > 100) {
errors.intAddressLine4 = 'MAX_LENGTH_ADDRESS_OTHERS_ERROR';
}
if (!values.locality) {
errors.locality = 'CITY_ERROR';
} else if (values.locality.length > 50) {
errors.locality = 'MAX_LENGTH_CITY_ERROR';
}
if (loadingRegionsError) {
errors.country = 'REGIONS_LOADING_ERROR';
reldredge71 marked this conversation as resolved.
Show resolved Hide resolved
} else if (!values.region) {
errors.region = 'SELECT_STATE_ERROR';
}
if (!values.postalCode) {
errors.postalCode = 'ZIP_CODE_ERROR';
} else if (!/^\d{5}(?:[-\s]\d{4})?$/.test(values.postalCode)) {
errors.postalCode = 'INVALID_US_ZIP_ERROR';
}

return errors;
};

const loadCountries = () => {
setLoadingCountriesError(false);

Expand Down Expand Up @@ -113,128 +155,142 @@ const AddressForm = ({
}

return (
<>
<div className="row">
<div className="col-sm-12">
<CountrySelect
addressDisabled={addressDisabled}
countries={countries.map(country => ({ name: country.name, displayName: country['display-name']}))}
onChange={}
onBlur={}
onSelectCountry={setCountryName}
refreshCountries={loadCountries}
value={}
error={}
canRetry={}
/>
</div>
</div>
<div className="row">
<div className="col-sm-12">
<TextInput
title="Address"
name="streetAddress"
required
maxLength={200}
disabled={addressDisabled}
onChange={}
onBlur={}
value={}
error={}
/>
</div>
</div>
<div className="row">
<div className="col-sm-12">
<TextInput
name="extendedAddress"
maxLength={100}
disabled={addressDisabled}
onChange={}
onBlur={}
value={}
error={}
/>
</div>
</div>
{
countryName && countryName !== 'US'
? (
<div>
<div className="row">
<div className="col-sm-12">
<TextInput
name="intAddressLine3"
maxLength={100}
disabled={addressDisabled}
onChange={}
onBlur={}
value={}
error={}
/>
</div>
</div>
<div className="row">
<div className="col-sm-12">
<TextInput
name="intAddressLine4"
maxLength={100}
disabled={addressDisabled}
onChange={}
onBlur={}
value={}
error={}
/>
</div>
<Formik
initialValues={address}
validate={validator}
onSubmit={}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
}) => (
<>
<div className="row">
<div className="col-sm-12">
<CountrySelect
addressDisabled={addressDisabled}
countries={countries.map(country => ({ name: country.name, displayName: country['display-name']}))}
onChange={handleChange}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should call refreshRegions I think. Not seeing how that is being done here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that too, I'll push something that should address that.

onBlur={handleBlur}
onSelectCountry={setCountryName}
refreshCountries={loadCountries}
value={values.country}
error={touched.country && errors.country || undefined}
canRetry={loadingCountriesError}
/>
</div>
</div>
) : (
<div>
<div className="row">
<div className="col-sm-12">
<TextInput
title="City"
name="locality"
required
maxLength={50}
disabled={addressDisabled}
onChange={}
onBlur={}
value={}
error={}
/>
</div>
<div className="row">
<div className="col-sm-12">
<TextInput
title="Address"
name="streetAddress"
required
maxLength={200}
disabled={addressDisabled}
onChange={handleChange}
onBlur={handleBlur}
value={values.streetAddress}
error={touched.streetAddress && errors.streetAddress || undefined}
/>
</div>
<div className="row">
<div className="col-sm-6">
<RegionSelect
addressDisabled={addressDisabled}
regions={regions.map(region => ({ name: region.name, displayName: region['display-name']}))}
onChange={}
onBlur={}
refreshRegions={refreshRegions}
value={}
error={}
canRetry={}
/>
</div>
<div className="col-sm-6">
<TextInput
title="Zip / Postal Code"
name="postalCode"
required
disabled={addressDisabled}
onChange={}
onBlur={}
value={}
error={}
/>
</div>
</div>
<div className="row">
<div className="col-sm-12">
<TextInput
name="extendedAddress"
maxLength={100}
disabled={addressDisabled}
onChange={handleChange}
onBlur={handleBlur}
value={values.extendedAddress}
error={touched.extendedAddress && errors.extendedAddress || undefined}
/>
</div>
</div>
)
}
</>
{
countryName && countryName !== 'US'
? (
<>
<div className="row">
<div className="col-sm-12">
<TextInput
name="intAddressLine3"
maxLength={100}
disabled={addressDisabled}
onChange={handleChange}
onBlur={handleBlur}
value={values.intAddressLine3}
error={touched.intAddressLine3 && errors.intAddressLine3 || undefined}
/>
</div>
</div>
<div className="row">
<div className="col-sm-12">
<TextInput
name="intAddressLine4"
maxLength={100}
disabled={addressDisabled}
onChange={handleChange}
onBlur={handleBlur}
value={values.intAddressLine4}
error={touched.intAddressLine4 && errors.intAddressLine4 || undefined}
/>
</div>
</div>
</>
) : (
<>
<div className="row">
<div className="col-sm-12">
<TextInput
title="City"
name="locality"
required
maxLength={50}
disabled={addressDisabled}
onChange={handleChange}
onBlur={handleBlur}
value={values.locality}
error={touched.locality && errors.locality || undefined}
/>
</div>
</div>
<div className="row">
<div className="col-sm-6">
<RegionSelect
addressDisabled={addressDisabled}
regions={regions.map(region => ({ name: region.name, displayName: region['display-name']}))}
onChange={handleChange}
onBlur={handleBlur}
refreshRegions={refreshRegions}
value={values.region}
error={touched.region && errors.region || undefined}
canRetry={loadingRegionsError}
/>
</div>
<div className="col-sm-6">
<TextInput
title="Zip / Postal Code"
name="postalCode"
required
disabled={addressDisabled}
onChange={handleChange}
onBlur={handleBlur}
value={values.postalCode}
error={touched.postalCode && errors.postalCode || undefined}
/>
</div>
</div>
</>
)
}
</>
)}
</Formik>
);
};

Expand Down