Convert AddressForm From Angular to React

src/common/components/addressForm/countrySelect/index.tsx

@@ -0,0 +1,53 @@
+import React, { ChangeEvent, FocusEvent } from 'react';
+import SelectInput, { Option } from '../../form/selectInput';
+
+interface CountrySelectProps {
+  addressDisabled: boolean,
+  countries: Option[],
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void,
+  onBlur: (event: FocusEvent<HTMLSelectElement>) => void,
+  onSelectCountry: (country?: string, initial?: boolean) => void,
+  refreshCountries: () => void,
+  value: string,
+  error?: string,
+  canRetry: boolean,
+}
+
+const CountrySelect = ({
+  addressDisabled,
+  countries,
+  onChange,
+  onBlur,
+  onSelectCountry,
+  refreshCountries,
+  value,
+  error,
+  canRetry,
+}: CountrySelectProps) => {
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    onChange(event);
+    onSelectCountry(event.target.value);
+  };
+
+  const handleRetry = () => {
+    refreshCountries();
+  };
+
+  return (
+    <SelectInput
+      title="Country"
+      name="country"
+      required={true}
+      disabled={addressDisabled}
+      options={countries}
+      onChange={handleChange}
+      onBlur={onBlur}
+      value={value}
+      error={error}
+      retry={error && canRetry ? handleRetry : undefined}
+    />
+  );
+};
+
+export default CountrySelect;

src/common/components/addressForm/regionSelect/index.tsx

@@ -0,0 +1,50 @@
+import React, { ChangeEvent, FocusEvent } from 'react';
+import SelectInput, { Option } from '../../form/SelectInput';
+
+interface RegionSelectProps {
+  addressDisabled: boolean,
+  regions: Option[],
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void,
+  onBlur: (event: FocusEvent<HTMLSelectElement>) => void,
+  refreshRegions: () => void,
+  value: string,
+  error?: string,
+  canRetry: boolean,
+}
+
+const RegionSelect = ({
+  addressDisabled,
+  regions,
+  onChange,
+  onBlur,
+  refreshRegions,
+  value,
+  error,
+  canRetry,
+}: RegionSelectProps) => {
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    onChange(event);
+  };
+
+  const handleRetry = () => {
+    refreshRegions();
+  };
+
+  return (
+    <SelectInput
+      title="State"
+      name="region"
+      required={true}
+      disabled={addressDisabled}
+      options={regions}
+      onChange={handleChange}
+      onBlur={onBlur}
+      value={value}
+      error={error}
+      retry={error && canRetry ? handleRetry : undefined}
+    />
+  );
+};
+
+export default RegionSelect;

src/common/components/form/selectInput/index.tsx

@@ -0,0 +1,74 @@
+import React, { ChangeEvent, FocusEvent } from 'react';
+
+interface SelectInputProps {
+  title?: string,
+  name: string,
+  required?: boolean,
+  disabled?: boolean,
+  options: Option[],
+  onChange: (value: ChangeEvent<HTMLSelectElement>) => void,
+  onBlur: (value: FocusEvent<HTMLSelectElement>) => void,
+  value: string,
+  error?: string,
+  retry?: () => void,
+}
+
+export interface Option {
+  name: string,
+  displayName: string
+}
+
+const SelectInput = ({
+  title,
+  name,
+  required,
+  disabled,
+  options,
+  onChange,
+  onBlur,
+  value,
+  error,
+  retry
+}: SelectInputProps) => {
+  const optionRow = ({ name, displayName }: Option) => (
+    <option value={name} label={displayName} />
+  );
+
+  return (
+    <div className={`form-group${required && ' is-required' || ''}${error && ' has-error' || ''}`}>
+      { title && <label>{title}</label> }
+      <div className="form-group">
+        <select
+          className="form-control form-control-subtle"
+          name={name}
+          required={required}
+          disabled={disabled}
+          onChange={onChange}
+          onBlur={onBlur}
+          value={value}
+        >
+          { options.map(optionRow) }
+        </select>
+        { error && (
+          <div role="alert">
+            <div className="help-block">
+              <span>{error}</span>
+              { retry && (
+                <button
+                  id="retryButton"
+                  type="button"
+                  className="btn btn-default btn-sm"
+                  onClick={retry}
+                >
+                  {'Retry'}
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SelectInput;