feat: pause, resume main subscription

packages/webapp/src/containers/Subscriptions/BillingPage.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { Button } from '@blueprintjs/core';
+import withAlertActions from '../Alert/withAlertActions';
+
+function BillingPageRoot({ openAlert }) {
+  const handleCancelSubBtnClick = () => {
+    openAlert('cancel-main-subscription');
+  };
+  const handleResumeSubBtnClick = () => {
+    openAlert('resume-main-subscription');
+  };
+  const handleUpdatePaymentMethod = () => {};
+
+  return (
+    <h1>
+      <Button onClick={handleCancelSubBtnClick}>Cancel Subscription</Button>
+      <Button onClick={handleResumeSubBtnClick}>Resume Subscription</Button>
+      <Button>Update Payment Method</Button>
+    </h1>
+  );
+}
+
+export default R.compose(withAlertActions)(BillingPageRoot);

packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx

@@ -0,0 +1,3 @@
+export function BillingPageBoot() {
+  return null;
+}

packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx

@@ -0,0 +1,74 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { useCancelMainSubscription } from '@/hooks/query/subscription';
+
+/**
+ * Cancel Unlocking partial transactions alerts.
+ */
+function CancelMainSubscriptionAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { module },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: cancelSubscription, isLoading } =
+    useCancelMainSubscription();
+
+  // Handle cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+  // Handle confirm.
+  const handleConfirm = () => {
+    const values = {
+      module: module,
+    };
+    cancelSubscription()
+      .then(() => {
+        AppToaster.show({
+          message: 'The subscription has been cancel.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={'Cancel Subscription'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>asdfsadf asdf asdfdsaf</p>
+    </Alert>
+  );
+}
+
+export default R.compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CancelMainSubscriptionAlert);

packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import { useResumeMainSubscription } from '@/hooks/query/subscription';
+
+/**
+ * Resume Unlocking partial transactions alerts.
+ */
+function ResumeMainSubscriptionAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { module },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: resumeSubscription, isLoading } =
+    useResumeMainSubscription();
+
+  // Handle cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+  // Handle confirm.
+  const handleConfirm = () => {
+    const values = {
+      module: module,
+    };
+    resumeSubscription()
+      .then(() => {
+        AppToaster.show({
+          message: 'The subscription has been resumed.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={'Resume Subscription'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>asdfsadf asdf asdfdsaf</p>
+    </Alert>
+  );
+}
+
+export default R.compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ResumeMainSubscriptionAlert);

packages/webapp/src/containers/Subscriptions/alerts/alerts.ts

@@ -0,0 +1,23 @@
+// @ts-nocheck
+import React from 'react';
+
+const CancelMainSubscriptionAlert = React.lazy(
+  () => import('./CancelMainSubscriptionAlert'),
+);
+const ResumeMainSubscriptionAlert = React.lazy(
+  () => import('./ResumeMainSubscriptionAlert'),
+);
+
+/**
+ * Subscription alert.
+ */
+export const SubscriptionAlerts = [
+  {
+    name: 'cancel-main-subscription',
+    component: CancelMainSubscriptionAlert,
+  },
+  {
+    name: 'resume-main-subscription',
+    component: ResumeMainSubscriptionAlert,
+  },
+];