Subscription information section

src/api/api.js

@@ -538,6 +538,26 @@ class API {
     );
     return data;
   }
+
+  async updateSubscriber(subscriber = {}) {
+    const authToken = getAuthToken();
+    if (!(authToken && authToken.length)) {
+      throw new Error('Need to be authenticated to perform this request');
+    }
+
+    const headers = {
+      Authorization: `Bearer ${authToken}`
+    };
+    const subscriberId = getSubscriberId();
+    const { data } = await this.axiosInstance.patch(
+      `/subscriber/${subscriberId}`,
+      subscriber,
+      {
+        headers
+      }
+    );
+    return data;
+  }
 }
 
 const API_INSTANCE = new API({});

src/components/Settings/Subscribe/Subscribe.component.js

@@ -38,6 +38,7 @@ import {
   PROCCESING,
   ON_HOLD
 } from '../../../providers/SubscriptionProvider/SubscriptionProvider.constants';
+import SubscriptionInfo from './SubscriptionInfo';
 
 const propTypes = {
   /**
@@ -100,61 +101,70 @@ const Subscribe = ({
     });
   };
   const renderProducts = () => {
-    return products.map(product => {
-      const canPurchase =
-        subscription.androidSubscriptionState === NOT_SUBSCRIBED ||
-        subscription.androidSubscriptionState === EXPIRED ||
-        subscription.androidSubscriptionState === ON_HOLD;
-      return product.offers.map(offer => {
-        return [
-          <Grid
-            key={offer.id}
-            item
-            xs={12}
-            sm={6}
-            style={{ padding: '5px', maxWidth: 328 }}
-          >
-            <Card style={{ minWidth: 275 }} variant="outlined">
-              <CardContent>
-                <Typography
-                  sx={{ fontSize: 19 }}
-                  color="secondary"
-                  gutterBottom
-                >
-                  {formatTitle(product.title)}
-                </Typography>
-                <Typography variant="h3" component="div">
-                  {offer.pricingPhases[0].price} /
-                  {formatDuration(offer.pricingPhases[0].billingPeriod)}
-                </Typography>
-                <Button
-                  variant="contained"
-                  fullWidth={true}
-                  color="primary"
-                  {...(!isLogged
-                    ? { component: Link, to: '/login-signup' }
-                    : { onClick: subscribe(product, offer) })}
-                  disabled={!canPurchase}
-                >
-                  <FormattedMessage {...messages.subscribe} />
-                </Button>
-                <Typography sx={{ mb: 1.5 }} color="secondary">
-                  <br />
-                  <br />
-                  <FormattedMessage {...messages.includedFeatures} />
-                </Typography>
-                <List disablePadding style={{ padding: '5px' }}>
-                  {renderIncludedFeatures()}
-                </List>
-              </CardContent>
-              <CardActions>
-                <Button size="small">Learn More</Button>
-              </CardActions>
-            </Card>
-          </Grid>
-        ];
-      });
-    });
+    const canPurchase =
+      subscription.androidSubscriptionState === NOT_SUBSCRIBED ||
+      subscription.androidSubscriptionState === EXPIRED ||
+      subscription.androidSubscriptionState === ON_HOLD;
+    return [
+      <Grid
+        container
+        spacing={0}
+        alignItems="center"
+        justifyContent="space-around"
+      >
+        {products.map(product => {
+          return product.offers.map(offer => {
+            return [
+              <Grid
+                key={offer.id}
+                item
+                xs={12}
+                sm={6}
+                style={{ padding: '5px', maxWidth: 328 }}
+              >
+                <Card style={{ minWidth: 275 }} variant="outlined">
+                  <CardContent>
+                    <Typography
+                      sx={{ fontSize: 19 }}
+                      color="secondary"
+                      gutterBottom
+                    >
+                      {formatTitle(product.title)}
+                    </Typography>
+                    <Typography variant="h3" component="div">
+                      {offer.pricingPhases[0].price} /
+                      {formatDuration(offer.pricingPhases[0].billingPeriod)}
+                    </Typography>
+                    <Button
+                      variant="contained"
+                      fullWidth={true}
+                      color="primary"
+                      {...(!isLogged
+                        ? { component: Link, to: '/login-signup' }
+                        : { onClick: subscribe(product, offer) })}
+                      disabled={!canPurchase}
+                    >
+                      <FormattedMessage {...messages.subscribe} />
+                    </Button>
+                    <Typography sx={{ mb: 1.5 }} color="secondary">
+                      <br />
+                      <br />
+                      <FormattedMessage {...messages.includedFeatures} />
+                    </Typography>
+                    <List disablePadding style={{ padding: '5px' }}>
+                      {renderIncludedFeatures()}
+                    </List>
+                  </CardContent>
+                  <CardActions>
+                    <Button size="small">Learn More</Button>
+                  </CardActions>
+                </Card>
+              </Grid>
+            ];
+          });
+        })}
+      </Grid>
+    ];
   };
 
   const renderSubscriptionStatus = () => {
@@ -243,18 +253,13 @@ const Subscribe = ({
         onClose={onClose}
         // fullWidth
       >
-        {renderSubscriptionStatus()}
+        {!subscription.isSubscribed && renderSubscriptionStatus()}
 
-        <div style={{}}>
-          <Grid
-            container
-            spacing={0}
-            alignItems="center"
-            justifyContent="space-around"
-          >
-            {renderProducts()}
-          </Grid>
-        </div>
+        {!subscription.isSubscribed ? (
+          renderProducts()
+        ) : (
+          <SubscriptionInfo onRefreshSubscription={onRefreshSubscription} />
+        )}
       </FullScreenDialog>
     </div>
   );

src/components/Settings/Subscribe/Subscribe.container.js

@@ -13,13 +13,16 @@ import {
   updateSubscriberId,
   updateSubscription,
   updateAndroidSubscriptionState,
-  updateSubscriptionError
+  updateSubscriptionError,
+  updateProduct
 } from '../../../providers/SubscriptionProvider/SubscriptionProvider.actions';
 import {
   NOT_SUBSCRIBED,
   PROCCESING
 } from '../../../providers/SubscriptionProvider/SubscriptionProvider.constants';
 
+import { formatTitle } from './Subscribe.helpers';
+
 export class SubscribeContainer extends PureComponent {
   static propTypes = {
     history: PropTypes.object.isRequired,
@@ -116,13 +119,26 @@ export class SubscribeContainer extends PureComponent {
       location,
       updateSubscriberId,
       updateSubscription,
-      subscription
+      subscription,
+      updateProduct
     } = this.props;
     if (isAndroid()) {
       if (
         isLogged &&
         subscription.androidSubscriptionState === NOT_SUBSCRIBED
       ) {
+        const newProduct = {
+          title: formatTitle(product.title),
+          billingPeriod: offer.pricingPhases[0].billingPeriod,
+          price: offer.pricingPhases[0].price
+        };
+        const apiProduct = {
+          product: {
+            ...newProduct,
+            subscriptionId: product.id
+          }
+        };
+
         try {
           updateSubscription({
             isSubscribed: false,
@@ -132,6 +148,9 @@ export class SubscribeContainer extends PureComponent {
 
           const subscriber = await API.getSubscriber(user.id);
           updateSubscriberId(subscriber._id);
+          await API.updateSubscriber(apiProduct);
+          updateProduct(newProduct);
+
           const order = await window.CdvPurchase.store.order(offer);
           if (order && order.isError) throw order;
         } catch (e) {
@@ -141,14 +160,11 @@ export class SubscribeContainer extends PureComponent {
                 userId: user.id,
                 country: location.countryCode || 'Not localized',
                 status: NOT_SUBSCRIBED,
-                product: {
-                  planId: offer.id,
-                  subscriptionId: product.id,
-                  status: 'valid'
-                }
+                apiProduct
               };
               const res = await API.createSubscriber(newSubscriber);
               updateSubscriberId(res._id);
+              updateProduct(newProduct);
               const order = await window.CdvPurchase.store.order(offer);
               if (order && order.isError) throw order;
             } catch (e) {
@@ -210,7 +226,8 @@ const mapDispatchToProps = {
   updateSubscription,
   comprobeSubscription,
   updateAndroidSubscriptionState,
-  updateSubscriptionError
+  updateSubscriptionError,
+  updateProduct
 };
 
 export default connect(

src/components/Settings/Subscribe/Subscribe.css

@@ -17,3 +17,25 @@
   display: flex;
   align-items: center;
 }
+
+.Subscribe__Info {
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.Subscribe__Info__Container {
+  display: flex;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  align-items: center;
+}
+
+.Subscribe__Info__Table__Container {
+  width: 100%;
+}
+
+.Subscribe__Info__Button__Container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2rem;
+}

src/components/Settings/Subscribe/Subscribe.messages.js

@@ -59,25 +59,23 @@ export default defineMessages({
   },
   active: {
     id: 'cboard.components.Settings.Subscribe.active',
-    defaultMessage: 'You are already subscribed. Your next pay is on: {e}'
+    defaultMessage: 'ACTIVE'
   },
   canceled: {
     id: 'cboard.components.Settings.Subscribe.canceled',
-    defaultMessage:
-      'Your subscription was canceled. The premium acces will end on: {e}'
+    defaultMessage: 'CANCELED'
   },
   in_grace_period: {
     id: 'cboard.components.Settings.Subscribe.in_grace_period',
-    defaultMessage:
-      'Your subscription is on grace period. Please fix your payment issues before the date: {e} '
+    defaultMessage: 'GRACE PERIOD'
   },
   proccesing: {
     id: 'cboard.components.Settings.Subscribe.processing',
     defaultMessage: 'We are processing your subscription...'
   },
   expired: {
     id: 'cboard.components.Settings.Subscribe.expired',
-    defaultMessage: 'Your subscription expired on: {e}'
+    defaultMessage: 'EXPIRED'
   },
   paused: {
     id: 'cboard.components.Settings.Subscribe.paused',
@@ -93,7 +91,7 @@ export default defineMessages({
   },
   refresh: {
     id: 'cboard.components.Settings.Subscribe.refresh',
-    defaultMessage: 'REFRESH'
+    defaultMessage: 'Refresh'
   },
   error: {
     id: 'cboard.components.Settings.Subscribe.error',
@@ -108,5 +106,37 @@ export default defineMessages({
     id: 'cboard.components.Settings.Subscribe.on_trial_period',
     defaultMessage:
       'You are on the 30 day free trial. After it ends, you will need to subscribe to get all features.'
+  },
+  subscriptionInfo: {
+    id: 'cboard.components.Settings.Subscribe.subscriptionInfo',
+    defaultMessage: 'Subscription Info'
+  },
+  manageSubscription: {
+    id: 'cboard.components.Settings.Subscribe.manageSubscription',
+    defaultMessage: 'Manage Subscription'
+  },
+  planAmount: {
+    id: 'cboard.components.Settings.Subscribe.planAmount',
+    defaultMessage: 'Plan amount:'
+  },
+  title: {
+    id: 'cboard.components.Settings.Subscribe.title',
+    defaultMessage: 'Plan:'
+  },
+  status: {
+    id: 'cboard.components.Settings.Subscribe.status',
+    defaultMessage: 'Status:'
+  },
+  nextPayment: {
+    id: 'cboard.components.Settings.Subscribe.nextPayment',
+    defaultMessage: 'Next payment at:'
+  },
+  premiumWillEnd: {
+    id: 'cboard.components.Settings.Subscribe.premiumWillEnd',
+    defaultMessage: 'The premium acces will end on:'
+  },
+  fixPaymentIssue: {
+    id: 'cboard.components.Settings.Subscribe.fixPaymentIssue',
+    defaultMessage: 'Fix your payment issues before the:'
   }
 });