message: Fix various small issues with premium subscription
diff: @@ -47,6 +47,7 @@ type OperationsEnum =
  | 'CANCEL_PREMIUM_SUBSCRIPTION'
  | 'DOWNGRADE_TO_LIFETIME'
  | 'APPLY_COUPON_CODE'
  + | 'RESUBSCRIBE'
  interface BillingFormProps {
  me: Me
  @@ -231,12 +232,16 @@ const BillingForm: React.FC<BillingFormProps> = ({
  // Otherwise we are subscribing.
  const waitForCouponCode =
  doWeNeedTo('APPLY_COUPON_CODE') &&
  - // APPLY_COUPON_CODE is inclusive with swtiching plans so ignore this
  + // APPLY_COUPON_CODE is inclusive with swiching plans so ignore this
  // if we are also going to change the plan up
  !doWeNeedTo('CHANGE_PLAN_ID')
  ? applyCouponToSubscription()
  : Promise.resolve(null)
  + if (doWeNeedTo('RESUBSCRIBE')) {
  + return handleSubscribeToPremium()
  + }
  +
  return waitForCouponCode
  .then(() => {
  // Now we can change the plan id if we need to
  @@ -281,9 +286,11 @@ const BillingForm: React.FC<BillingFormProps> = ({
  )
  const handleCancelPremium = useCallback(
  - e => {
  - setState({ operations: addOperation('CANCEL_PREMIUM_SUBSCRIPTION') })
  - handleSubmit(e)
  + () => {
  + setState({ mode: 'processing' })
  + return cancelPremiumSubscription()
  + .then(() => resolveWithMode('canceled'))
  + .catch(handleErrors)
  },
  [handleSubmit, addOperation, setState]
  )
  @@ -300,7 +307,7 @@ const BillingForm: React.FC<BillingFormProps> = ({
  )
  const handleReenable = useCallback(
  - e => {
  + () => {
  if (customer.is_beneficiary) {
  return setState({
  mode: 'error',
  @@ -310,9 +317,10 @@ const BillingForm: React.FC<BillingFormProps> = ({
  setState({
  planId: customer.plan.id as SupportedPlanEnum,
  - operations: addOperation('CHANGE_PLAN_ID'),
  + operations: addOperation('RESUBSCRIBE'),
  + mode: 'processing'
  })
  - handleSubmit(e)
  + handleSubscribeToPremium()
  },
  [addOperation, handleSubmit, customer, setState]
  )
  @@ -465,7 +473,7 @@ const BillingForm: React.FC<BillingFormProps> = ({
  onClick={handleSubmit}
  disabled={!customerCanSubmit}
  >
  - <Icons name="CreditCard" size="1rem" mr={4} />
  + <Icons name="CreditCard" size="1rem" mr={4} color='gray.bold' />
  {{
  'basic:monthly': 'Activate',
  