AutoRenewSwitch.js

import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'server/i18n';
import Subscription from 'store/models/Subscription';
import cx from 'classnames';
import css from './style.css';

/**
 * AutoRenewSwitch
 * @param subscription
 * @returns {*}
 */
const AutoRenewSwitch = ({ subscription }) => {
  const { t } = useTranslation();
  const [on, setOn] = useState(subscription.autoRenew);
  const [loading, setLoading] = useState(false);
  
  const handleChange = useCallback(async ({ target: { checked: newOn } }) => {
    const oldOn = on;
        
    setOn(newOn);
    
    setLoading(true);
    
    const resp = await subscription.patchAutoRenew(newOn);
    
    if (!resp) {
      setOn(oldOn);
    }
    
    setLoading(false);
  });
  
  return (
    <div className={cx(css.box, { [css.loading]: loading })}>
      <label htmlFor={`autorenew${subscription.id}`}>
        <input id={`autorenew${subscription.id}`} type="checkbox" checked={on} onChange={handleChange} />
        <span />
      </label>
      <div className={css.status}>
        {t(`membership:memberships.auto-renew-status.${on}`)}
      </div>
      <a href="" className={css.termsLink}>{t('membership:memberships.view-terms')}</a>
    </div>
  );
};

AutoRenewSwitch.propTypes = {
  subscription: PropTypes.instanceOf(Subscription).isRequired,
};

export AutoRenewSwitch;