department-of-veterans-affairs/vets-website

View on GitHub
src/applications/_mock-form-ae-design-patterns/shared/components/CopyResidentialAddress.jsx

Summary

Maintainability
A
0 mins
Test Coverage
import React from 'react';
import { connect } from 'react-redux';
import pick from 'lodash/pick';
import { isEmptyAddress } from 'platform/forms/address/helpers';
import { areAddressesEqual } from 'platform/user/profile/vap-svc/util';
import { VaCheckbox } from '@department-of-veterans-affairs/component-library/dist/react-bindings';

import { updateFormFieldWithSchema } from 'platform/user/profile/vap-svc/actions';

import {
  FIELD_NAMES,
  ADDRESS_PROPS,
  USA,
} from 'platform/user/profile/vap-svc/constants';

import {
  selectVAPContactInfoField,
  selectEditedFormField,
} from '@@vap-svc/selectors';
import mapValues from 'lodash/mapValues';
import pickBy from 'lodash/pickBy';

class CopyResidentialAddress extends React.Component {
  areHomeMailingAddressesEqual = () => {
    const { mailingAddress, residentialAddress } = this.props;

    return areAddressesEqual(mailingAddress, residentialAddress);
  };

  onChange = () => {
    const {
      copyResidentialAddress,
      residentialAddress,
      mailingAddressFormSchema,
      mailingAddressUiSchema,
      mailingAddress,
    } = this.props;

    // If mailing + home addresses are the same, clear the home address
    if (this.areHomeMailingAddressesEqual()) {
      const clearedAddress = mapValues(mailingAddress, () => null);

      // We need the id to remain the same to prevent POST calls
      clearedAddress.id = mailingAddress?.id || null;
      clearedAddress.countryCodeIso3 = USA.COUNTRY_ISO3_CODE;

      copyResidentialAddress(
        clearedAddress,
        mailingAddressFormSchema,
        mailingAddressUiSchema,
      );
      return;
    }

    // Otherwise, make the home address the same as the mailing address
    // pickBy removes any null or undefined values from the object
    // pick removes any properties that are not in ADDRESS_PROPS
    const copiedResidentialAddress = pick(
      pickBy(residentialAddress),
      ADDRESS_PROPS,
    );

    // We need the id to remain the same to prevent POST calls when a record exists
    if (mailingAddress?.id) {
      copiedResidentialAddress.id = mailingAddress.id;
    }

    copyResidentialAddress(
      copiedResidentialAddress,
      mailingAddressFormSchema,
      mailingAddressUiSchema,
    );
  };

  render() {
    const { areHomeMailingAddressesEqual, onChange } = this;

    if (this.props.emptyResidentialAddress) {
      return null;
    }

    return (
      <div className="vads-u-background-color--primary-alt-lightest vads-u-padding-y--2 vads-u-padding-left--3">
        <div className="form-checkbox-buttons form-checkbox">
          <VaCheckbox
            checked={areHomeMailingAddressesEqual()}
            label="Use my home address for my mailing address."
            onVaChange={onChange}
          />
        </div>
      </div>
    );
  }
}

export function mapStateToProps(state) {
  const residentialAddress = selectVAPContactInfoField(
    state,
    FIELD_NAMES.RESIDENTIAL_ADDRESS,
  );

  const mailingAddressFormField = selectEditedFormField(
    state,
    FIELD_NAMES.MAILING_ADDRESS,
  );

  return {
    emptyResidentialAddress: isEmptyAddress(residentialAddress),
    mailingAddress: mailingAddressFormField?.value,
    mailingAddressFormSchema: mailingAddressFormField?.formSchema,
    mailingAddressUiSchema: mailingAddressFormField?.uiSchema,
    residentialAddress,
  };
}

export function mapDispatchToProps(dispatch) {
  return {
    copyResidentialAddress: (address, schema, uiSchema) =>
      dispatch(
        updateFormFieldWithSchema(
          FIELD_NAMES.MAILING_ADDRESS,
          address,
          schema,
          uiSchema,
        ),
      ),
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(CopyResidentialAddress);