🔨 Switch ChangeSubscription to use useOvermind (#3055)

Author: MichaelDeBoey

packages/app/src/app/overmind/namespaces/patron/actions.ts

@@ -45,9 +45,10 @@ export const createSubscriptionClicked: AsyncAction<{
   state.patron.isUpdatingSubscription = false;
 };
 
-export const updateSubscriptionClicked: AsyncAction<{
-  coupon: string;
-}> = async ({ state, effects }, { coupon }) => {
+export const updateSubscriptionClicked: AsyncAction<string> = async (
+  { state, effects },
+  coupon
+) => {
   effects.analytics.track('Update Patron Subscription');
   state.patron.error = null;
   state.patron.isUpdatingSubscription = true;

packages/app/src/app/pages/Patron/PricingModal/PricingChoice/ChangeSubscription/elements.ts

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import { Button } from '@codesandbox/common/lib/components/Button';
+import { Button as ButtonBase } from '@codesandbox/common/lib/components/Button';
 import Input from '@codesandbox/common/lib/components/Input';
+import styled from 'styled-components';
 
 export const SmallText = styled.div`
   text-align: center;
@@ -17,7 +17,7 @@ export const Buttons = styled.div`
   margin-top: 1rem;
 `;
 
-export const StyledButton = styled(Button)`
+export const Button = styled(ButtonBase)`
   margin: 1rem;
 `;
 
@@ -30,6 +30,10 @@ export const StripeInput = styled(Input)`
   height: 32.8px;
 `;
 
+export const StripeInputContainer = styled.div`
+  margin: 2rem 5rem 0;
+`;
+
 export const Centered = styled.div`
   display: flex;
   flex-direction: row;

packages/app/src/app/pages/Patron/PricingModal/PricingChoice/ChangeSubscription/index.tsx

@@ -1,106 +1,112 @@
-import React, { useState } from 'react';
-import { useOvermind } from 'app/overmind';
 import { format } from 'date-fns';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  MouseEvent,
+  useState,
+} from 'react';
+
 import { LinkButton } from 'app/components/LinkButton';
+import { useOvermind } from 'app/overmind';
 
 import {
-  SmallText,
+  Button,
   Buttons,
-  StyledButton,
-  StripeInput,
   CancelText,
   Centered,
+  SmallText,
+  StripeInput,
+  StripeInputContainer,
 } from './elements';
 
-interface IChangeSubscriptionProps {
-  date: string;
-  markedAsCancelled: boolean;
-  cancelSubscription: () => void;
-  updateSubscription: (params: { coupon: string }) => void;
-}
-
-export const ChangeSubscription: React.FC<IChangeSubscriptionProps> = ({
-  date,
-  markedAsCancelled,
-  cancelSubscription,
-  updateSubscription,
-}) => {
+export const ChangeSubscription: FunctionComponent = () => {
   const {
-    state: {
-      patron: { isUpdatingSubscription, error },
-    },
     actions: {
       modalOpened,
-      patron: { tryAgainClicked },
+      patron: {
+        cancelSubscriptionClicked,
+        tryAgainClicked,
+        updateSubscriptionClicked,
+      },
+    },
+    state: {
+      patron: { error, isUpdatingSubscription },
+      user: { subscription },
     },
   } = useOvermind();
-
   const [coupon, setCoupon] = useState('');
 
   if (error) {
     return (
       <div>
-        There was a problem updating this subscription.
+        <span>There was a problem updating this subscription.</span>
+
         <SmallText>{error}</SmallText>
+
         <Buttons>
-          <StyledButton onClick={() => tryAgainClicked()}>
-            Try again
-          </StyledButton>
+          <Button onClick={() => tryAgainClicked()}>Try again</Button>
         </Buttons>
       </div>
     );
   }
 
   let buttons = (
     <>
-      <div style={{ margin: '0 5rem', marginTop: '2rem' }}>
+      <StripeInputContainer>
         <StripeInput
-          onChange={e => setCoupon(e.target.value)}
-          value={coupon}
+          onChange={({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+            setCoupon(value)
+          }
           placeholder="Apply Coupon Code"
+          value={coupon}
         />
-      </div>
+      </StripeInputContainer>
+
       <Buttons>
-        <StyledButton onClick={() => updateSubscription({ coupon })}>
+        <Button onClick={() => updateSubscriptionClicked(coupon)}>
           Update
-        </StyledButton>
+        </Button>
       </Buttons>
+
       <Centered>
-        <CancelText onClick={() => cancelSubscription()}>
+        <CancelText onClick={() => cancelSubscriptionClicked()}>
           Cancel my subscription
         </CancelText>
       </Centered>
     </>
   );
 
-  if (markedAsCancelled) {
+  if (subscription.cancelAtPeriodEnd) {
     buttons = (
       <Buttons>
-        <StyledButton onClick={() => updateSubscription({ coupon: '' })}>
+        <Button onClick={() => updateSubscriptionClicked('')}>
           Reactivate Subscription
-        </StyledButton>
+        </Button>
       </Buttons>
     );
   }
 
   if (isUpdatingSubscription) {
     buttons = (
       <Buttons>
-        <StyledButton disabled>Processing...</StyledButton>
+        <Button disabled>Processing...</Button>
       </Buttons>
     );
   }
 
   return (
     <div>
       {buttons}
+
       <SmallText>
-        You will be billed every <strong>{format(new Date(date), 'do')}</strong>{' '}
-        of the month, you can change or cancel your subscription at any time.
-        You can change your payment method in{' '}
+        You will be billed every{' '}
+        <strong>{format(new Date(subscription.since), 'do')}</strong> of the
+        month, you can change or cancel your subscription at any time. You can
+        change your payment method in{' '}
         <LinkButton
-          onClick={e => {
-            e.preventDefault();
+          onClick={(event: MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+
             modalOpened({ modal: 'preferences', itemId: 'paymentInfo' });
           }}
         >

packages/app/src/app/pages/Patron/PricingModal/PricingChoice/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { format } from 'date-fns';
 import { PatronBadge } from '@codesandbox/common/lib/types';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
@@ -20,34 +20,30 @@ import {
   StyledSignInButton,
 } from './elements';
 
-interface IPricingChoiceProps {
+type Props = {
   badge: PatronBadge;
-}
-
-export const PricingChoice: React.FC<IPricingChoiceProps> = ({ badge }) => {
+};
+export const PricingChoice: FunctionComponent<Props> = ({ badge }) => {
   const {
-    state: { isLoggedIn, isPatron, user, patron },
     actions: {
-      patron: {
-        priceChanged,
-        createSubscriptionClicked,
-        updateSubscriptionClicked,
-        cancelSubscriptionClicked,
-      },
+      patron: { priceChanged, createSubscriptionClicked },
     },
+    state: { isLoggedIn, isPatron, user, patron },
   } = useOvermind();
 
   return (
     <Container>
       <Centered horizontal vertical={false}>
         <Title>Pay what you want</Title>
+
         {isPatron && (
           <ThankYou
             price={user.subscription.amount}
             color={badges[badge].colors[0]}
             markedAsCancelled={user.subscription.cancelAtPeriodEnd}
           />
         )}
+
         <Relative>
           <Currency>$</Currency>
           <PriceInput
@@ -58,6 +54,7 @@ export const PricingChoice: React.FC<IPricingChoiceProps> = ({ badge }) => {
           />
           <Month>/month</Month>
         </Relative>
+
         <RangeContainer>
           <Range
             onChange={value => priceChanged({ price: Number(value) })}
@@ -68,14 +65,10 @@ export const PricingChoice: React.FC<IPricingChoiceProps> = ({ badge }) => {
             color={badges[badge].colors[0]}
           />
         </RangeContainer>
+
         {isLoggedIn ? ( // eslint-disable-line no-nested-ternary
           isPatron ? (
-            <ChangeSubscription
-              updateSubscription={props => updateSubscriptionClicked(props)}
-              cancelSubscription={() => cancelSubscriptionClicked()}
-              date={user.subscription.since}
-              markedAsCancelled={user.subscription.cancelAtPeriodEnd}
-            />
+            <ChangeSubscription />
           ) : (
             <Centered style={{ marginTop: '2rem' }} horizontal>
               <SubscribeForm

packages/common/src/types/index.ts

@@ -117,7 +117,7 @@ export type CurrentUser = {
     plan?: 'pro' | 'patron';
   } | null;
   curatorAt: string;
-  badges: Array<Badge>;
+  badges: Badge[];
   integrations: {
     zeit?: {
       token: string;