Subscription For the Web version using PayPal

package.json

@@ -24,6 +24,7 @@
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.57",
     "@microsoft/applicationinsights-web": "^2.8.11",
+    "@paypal/react-paypal-js": "^7.8.3",
     "@redux-beacon/google-analytics-gtag": "^1.1.0",
     "@redux-beacon/logger": "^1.0.0",
     "@redux-beacon/offline-web": "^1.0.0",

src/components/Settings/Settings.component.js

@@ -98,7 +98,7 @@ export class Settings extends PureComponent {
       }
     ];
 
-    if (isAndroid() && !isInFreeCountry) {
+    if (!isInFreeCountry) {
       const subscribeSection = {
         icon: <MonetizationOnIcon />,
         text: messages.subscribe,

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

@@ -26,7 +26,9 @@ const propTypes = {
   /**
    * Handle refresh subscription
    */
-  onRefreshSubscription: PropTypes.func
+  onRefreshSubscription: PropTypes.func,
+  onSubscribeCancel: PropTypes.func.isRequired,
+  onCancelSubscription: PropTypes.func.isRequired
 };
 
 const defaultProps = {
@@ -39,7 +41,10 @@ const Subscribe = ({
   onSubscribe,
   location: { country, countryCode },
   subscription,
-  onRefreshSubscription
+  onRefreshSubscription,
+  onSubscribeCancel,
+  onPaypalApprove,
+  onCancelSubscription
 }) => {
   return (
     <div className="Subscribe">
@@ -55,9 +60,14 @@ const Subscribe = ({
             onRefreshSubscription={onRefreshSubscription}
             isLogged={isLogged}
             onSubscribe={onSubscribe}
+            onSubscribeCancel={onSubscribeCancel}
+            onPaypalApprove={onPaypalApprove}
           />
         ) : (
-          <SubscriptionInfo onRefreshSubscription={onRefreshSubscription} />
+          <SubscriptionInfo
+            onRefreshSubscription={onRefreshSubscription}
+            onCancelSubscription={onCancelSubscription}
+          />
         )}
       </FullScreenDialog>
     </div>

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

@@ -47,11 +47,12 @@ export class SubscribeContainer extends PureComponent {
 
   handleRefreshSubscription = () => {
     const { updateIsSubscribed, updatePlans } = this.props;
-    //window.CdvPurchase.store.restorePurchases();
     updateIsSubscribed();
     updatePlans();
   };
 
+  handleCancelSubscription = () => {};
+
   handleError = e => {
     const { updateSubscriptionError, updateSubscription } = this.props;
 
@@ -64,7 +65,7 @@ export class SubscribeContainer extends PureComponent {
     updateSubscription({
       isSubscribed: false,
       expiryDate: null,
-      androidSubscriptionState: NOT_SUBSCRIBED
+      status: NOT_SUBSCRIBED
     });
 
     setTimeout(() => {
@@ -76,7 +77,58 @@ export class SubscribeContainer extends PureComponent {
     }, 3000);
   };
 
-  handleSubscribe = product => async event => {
+  handleSubscribeCancel = () => {
+    const { updateSubscription } = this.props;
+    updateSubscription({
+      isSubscribed: false,
+      expiryDate: null,
+      status: NOT_SUBSCRIBED,
+      ownedProduct: ''
+    });
+  };
+
+  handlePaypalApprove = async (product, data) => {
+    const { updateSubscription } = this.props;
+    const {
+      facilitatorAccessToken,
+      orderID,
+      paymentSource,
+      subscriptionID
+    } = data;
+    const transaction = {
+      className: 'Transaction',
+      subscriptionId: subscriptionID,
+      transactionId: subscriptionID,
+      state: 'approved',
+      products: [product],
+      platform: paymentSource,
+      nativePurchase: '',
+      purchaseId: orderID,
+      purchaseDate: '',
+      isPending: false,
+      subscriptionState: ACTIVE,
+      expiryDate: '',
+      facilitatorAccessToken
+    };
+    try {
+      const res = await API.postTransaction(transaction);
+      if (!res.ok) throw res;
+      const subscriber = await API.getSubscriber();
+      updateSubscription({
+        ownedProduct: product,
+        status: ACTIVE,
+        isInFreeCountry: false,
+        isOnTrialPeriod: false,
+        isSubscribed: true,
+        expiryDate: subscriber.transaction.expiryDate
+      });
+    } catch (err) {
+      console.error('Cannot subscribe product. Error: ', err.message);
+      this.handleError(err);
+    }
+  };
+
+  handleSubscribe = async product => {
     const {
       intl,
       user,
@@ -86,40 +138,37 @@ export class SubscribeContainer extends PureComponent {
       updateSubscription,
       subscription
     } = this.props;
-    if (isAndroid()) {
-      if (
-        (isLogged &&
-          product &&
-          subscription.androidSubscriptionState === NOT_SUBSCRIBED) ||
-        subscription.androidSubscriptionState === EXPIRED
-      ) {
-        const newProduct = {
-          title: formatTitle(product.title),
-          billingPeriod: product.billingPeriod,
-          price: product.price,
-          tag: product.tag,
-          subscriptionId: product.subscriptionId
-        };
-        const apiProduct = {
-          product: {
-            ...newProduct
-          }
-        };
+    if (
+      (isLogged && product && subscription.status === NOT_SUBSCRIBED) ||
+      subscription.status === EXPIRED
+    ) {
+      const newProduct = {
+        title: formatTitle(product.title),
+        billingPeriod: product.billingPeriod,
+        price: product.price,
+        tag: product.tag,
+        subscriptionId: product.subscriptionId
+      };
+      const apiProduct = {
+        product: {
+          ...newProduct
+        }
+      };
 
-        updateSubscription({
-          isSubscribed: false,
-          expiryDate: null,
-          androidSubscriptionState: PROCCESING,
-          ownedProduct: ''
-        });
+      updateSubscription({
+        isSubscribed: false,
+        expiryDate: null,
+        status: PROCCESING,
+        ownedProduct: ''
+      });
 
+      let localReceipts = '';
+      let offers, offer;
+      if (isAndroid()) {
         const prod = await window.CdvPurchase.store.products[0];
-        const localReceipts = window.CdvPurchase.store.findInLocalReceipts(
-          prod
-        );
+        localReceipts = window.CdvPurchase.store.findInLocalReceipts(prod);
 
         // get offer from the plugin
-        let offers, offer;
         try {
           await window.CdvPurchase.store.update();
           offers = prod.offers;
@@ -129,73 +178,77 @@ export class SubscribeContainer extends PureComponent {
           this.handleError(err);
           return;
         }
+      }
 
-        try {
-          // update the api
-          const subscriber = await API.getSubscriber(user.id);
-          updateSubscriberId(subscriber._id);
+      try {
+        // update the api
+        const subscriber = await API.getSubscriber(user.id);
+        updateSubscriberId(subscriber._id);
 
-          // check if current subscriber already bought in this device
-          if (
-            localReceipts &&
-            localReceipts.nativePurchase?.orderId !==
-              subscriber.transaction?.transactionId
-          ) {
-            this.handleError({
-              code: '0001',
-              message: intl.formatMessage(messages.googleAccountAlreadyOwns)
-            });
-            return;
-          }
-          await API.updateSubscriber(apiProduct);
+        // check if current subscriber already bought in this device
+        if (
+          localReceipts &&
+          localReceipts.nativePurchase?.orderId !==
+            subscriber.transaction?.transactionId
+        ) {
+          this.handleError({
+            code: '0001',
+            message: intl.formatMessage(messages.googleAccountAlreadyOwns)
+          });
+          return;
+        }
+        await API.updateSubscriber(apiProduct);
 
-          // proceed with the purchase
+        // proceed with the purchase
+        if (isAndroid()) {
           const order = await window.CdvPurchase.store.order(offer);
           if (order && order.isError) throw order;
           updateSubscription({
             ownedProduct: product,
-            androidSubscriptionState: ACTIVE,
+            status: ACTIVE,
             isInFreeCountry: false,
             isOnTrialPeriod: false,
             isSubscribed: true
           });
-        } catch (err) {
-          if (err.response?.data.error === 'subscriber not found') {
-            // check if current subscriber already bought in this device
-            if (localReceipts) {
-              this.handleError({
-                code: '0001',
-                message: intl.formatMessage(messages.googleAccountAlreadyOwns)
-              });
-              return;
-            }
-            try {
-              const newSubscriber = {
-                userId: user.id,
-                country: location.countryCode || 'Not localized',
-                status: NOT_SUBSCRIBED,
-                ...apiProduct
-              };
-              const res = await API.createSubscriber(newSubscriber);
-              updateSubscriberId(res._id);
+        }
+      } catch (err) {
+        if (err.response?.data.error === 'subscriber not found') {
+          // check if current subscriber already bought in this device
+          if (localReceipts) {
+            this.handleError({
+              code: '0001',
+              message: intl.formatMessage(messages.googleAccountAlreadyOwns)
+            });
+            return;
+          }
+          try {
+            const newSubscriber = {
+              userId: user.id,
+              country: location.countryCode || 'Not localized',
+              status: NOT_SUBSCRIBED,
+              ...apiProduct
+            };
+            const res = await API.createSubscriber(newSubscriber);
+            updateSubscriberId(res._id);
+            if (isAndroid()) {
               const order = await window.CdvPurchase.store.order(offer);
               if (order && order.isError) throw order;
               updateSubscription({
                 ownedProduct: product,
-                androidSubscriptionState: ACTIVE,
+                status: ACTIVE,
                 isInFreeCountry: false,
                 isOnTrialPeriod: false,
                 isSubscribed: true
               });
-            } catch (err) {
-              console.error('Cannot subscribe product. Error: ', err.message);
-              this.handleError(err);
             }
-            return;
+          } catch (err) {
+            console.error('Cannot subscribe product. Error: ', err.message);
+            this.handleError(err);
           }
-          console.error('Cannot subscribe product. Error: ', err.message);
-          this.handleError(err);
+          return;
         }
+        console.error('Cannot subscribe product. Error: ', err.message);
+        this.handleError(err);
       }
     }
   };
@@ -212,6 +265,9 @@ export class SubscribeContainer extends PureComponent {
         subscription={this.props.subscription}
         updateSubscriberId={this.props.updateSubscriberId}
         onRefreshSubscription={this.handleRefreshSubscription}
+        onSubscribeCancel={this.handleSubscribeCancel}
+        onPaypalApprove={this.handlePaypalApprove}
+        onCancelSubscription={this.handleCancelSubscription}
       />
     );
   }

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

@@ -115,6 +115,10 @@ export default defineMessages({
     id: 'cboard.components.Settings.Subscribe.manageSubscription',
     defaultMessage: 'Manage Subscription'
   },
+  cancelSubscription: {
+    id: 'cboard.components.Settings.Subscribe.cancelSubscription',
+    defaultMessage: 'Cancel Subscription'
+  },
   planAmount: {
     id: 'cboard.components.Settings.Subscribe.planAmount',
     defaultMessage: 'Plan amount:'