Feat unsubscribe

src/components/Header/AfterLogin/ActionNavigate.tsx

@@ -5,8 +5,9 @@ import ActionItem from "./ActionItem";
 type InputProps = {
   text: string;
   to: string;
+  onClick: () => void;
 };
-const ActionNavigate = ({ text, to }: InputProps) => {
+const ActionNavigate = ({ text, to, onClick }: InputProps) => {
   const navigate = useNavigate();
   const { handleCloseNavMenu } = useHeaderCtx();
 
@@ -15,6 +16,7 @@ const ActionNavigate = ({ text, to }: InputProps) => {
       onClick={() => {
         navigate(to);
         handleCloseNavMenu();
+        onClick();
       }}
     >
       {text}

src/components/Header/AfterLogin/Subscribe.tsx

@@ -1,4 +1,5 @@
 import { UserInfo } from "apis/api";
+import { useUnsubscribeToStripe } from "components/Stripe/useUnsubscribeToStripe";
 import { pricing } from "const/urls";
 import ActionItem from "./ActionItem";
 import ActionNavigate from "./ActionNavigate";
@@ -8,10 +9,16 @@ type InputProps = {
 };
 
 const Subscribe = ({ handleClose, userInfo }: InputProps) => {
+  const { openModal, renderUnsubscribe } = useUnsubscribeToStripe({
+    onCloseModal: handleClose
+  });
   return userInfo.isPremium ? (
-    <ActionItem onClick={handleClose}>Unsubscribe</ActionItem>
+    <>
+      <ActionItem onClick={openModal}>Unsubscribe</ActionItem>
+      {renderUnsubscribe}
+    </>
   ) : (
-    <ActionNavigate text="Upgrade" to={`/${pricing}`} />
+    <ActionNavigate text="Upgrade" to={`/${pricing}`} onClick={handleClose} />
   );
 };
 

src/components/Header/AfterLogin/useActions.tsx

@@ -41,12 +41,14 @@ const useActions = () => {
         key="NewPlugin"
         text="New Plugins"
         to={`/${pluginBuilder("new")}`}
+        onClick={handleClose}
       />,
       <div key="sep2" className="h-px w-full bg-white"></div>,
       <ActionNavigate
         key="YourPlugins"
         text="Your Plugins"
         to={`/${yourPlugins}`}
+        onClick={handleClose}
       />,
       <div key="sep3" className="h-px w-full bg-white"></div>,
       <ActionItem

src/components/Stripe/GoToContact.tsx

@@ -0,0 +1,19 @@
+import Button from "components/Button";
+import { contacts } from "const/urls";
+import { useNavigate } from "react-router-dom";
+
+const GoToContact = () => {
+  const navigate = useNavigate();
+  return (
+    <Button
+      type="button"
+      color="primary"
+      variant="darkBg"
+      onClick={() => navigate(`/${contacts}`)}
+    >
+      CONTACT US
+    </Button>
+  );
+};
+
+export default GoToContact;

src/components/Stripe/GoToPlugins.tsx

@@ -1,15 +1,10 @@
-import { Button } from "@mui/material";
+import Button from "components/Button";
 import { useUserInfoCtx } from "components/UserInfo/UserInfo";
 
 const GoToPlugins = () => {
   const { handleLogin } = useUserInfoCtx();
   return (
-    <Button
-      type="button"
-      variant="contained"
-      color="primary"
-      onClick={handleLogin}
-    >
+    <Button type="button" color="primary" onClick={handleLogin}>
       Go to your plugins
     </Button>
   );

src/components/Stripe/GoToPricing.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import Button from "components/Button";
 import { pricing } from "const/urls";
 import { useNavigate } from "react-router-dom";
 
@@ -7,7 +7,6 @@ const GoToPricing = () => {
   return (
     <Button
       type="button"
-      variant="contained"
       color="primary"
       onClick={() => navigate(`/${pricing}`)}
     >

src/components/Stripe/ModalUnsubscribe.tsx

@@ -0,0 +1,116 @@
+import Button from "components/Button";
+import ButtonLoading from "components/ButtonLoading";
+import Modal from "components/Modal";
+import Typography from "components/Typography";
+import { useUserInfoCtx } from "components/UserInfo/UserInfo";
+import { contacts, home, pricing } from "const/urls";
+import { Link, useNavigate } from "react-router-dom";
+
+type InputProps = {
+  unsubscribe: () => void;
+  closeModal: () => void;
+  isLoading: boolean;
+  isError: boolean;
+  isUnsubscribed: boolean;
+  showModal: boolean;
+};
+export const ModalUnsubscribe = ({
+  isLoading,
+  unsubscribe,
+  closeModal,
+  isError,
+  isUnsubscribed,
+  showModal
+}: InputProps) => {
+  const { isLogged, userInfo } = useUserInfoCtx();
+  const navigate = useNavigate();
+  return (
+    <Modal
+      actions={
+        <div className="grid grid-cols-2 grid-rows-2 gap-x-4 gap-y-2 md:grid-rows-1">
+          {isUnsubscribed ? (
+            <Button
+              type="button"
+              color="primary"
+              variant="darkBg"
+              onClick={() => {
+                navigate(`${home}`);
+                closeModal();
+              }}
+              className="col-start-1 col-end-3 row-start-1"
+            >
+              HOME
+            </Button>
+          ) : (
+            <ButtonLoading
+              onClick={unsubscribe}
+              color="primary"
+              variant="darkBg"
+              isLoading={isLoading}
+              className="col-start-1 col-end-3 row-start-1"
+            >
+              {isError ? "RETRY?" : "UNSUBSCRIBE"}
+            </ButtonLoading>
+          )}
+          <Button
+            type="button"
+            color="primary"
+            variant="darkBg"
+            onClick={() => {
+              navigate(`/${contacts}`);
+              closeModal();
+            }}
+            className="row-start-2 md:row-start-1"
+          >
+            CONTACT US
+          </Button>
+          <Button
+            onClick={closeModal}
+            color="primary"
+            variant="darkBg"
+            disabled={isLoading}
+            className="row-start-2 md:row-start-1"
+          >
+            CLOSE
+          </Button>
+        </div>
+      }
+      open={isLogged && !!userInfo.isPremium && showModal}
+      handleClose={closeModal}
+      titleText={
+        isUnsubscribed
+          ? "Successful unsubscribed."
+          : "Do you want to unsubscribe?"
+      }
+      contentText={
+        <>
+          {isUnsubscribed ? (
+            <Typography component="p" className="text-white">
+              Please send as a&nbsp;
+              <Link to={contacts} className="font-bold" onClick={closeModal}>
+                feedback
+              </Link>
+              &nbsp;
+            </Typography>
+          ) : (
+            <Typography component="p" className="text-white">
+              If you unsubscribe you lost all features. Click&nbsp;
+              <Link to={pricing} className="font-bold" onClick={closeModal}>
+                HERE
+              </Link>
+              &nbsp;to know what you lost
+            </Typography>
+          )}
+          {isError && (
+            <Typography
+              component="p"
+              className="text-bold mt-5 text-dangerLight"
+            >
+              Something went wrong, please retry.
+            </Typography>
+          )}
+        </>
+      }
+    />
+  );
+};

src/components/Stripe/useUnsubscribeToStripe.tsx

@@ -0,0 +1,70 @@
+import { PaymentsApi } from "apis/api";
+import { useUserInfoCtx } from "components/UserInfo/UserInfo";
+import { debugConsole } from "components/util";
+import { useCallback, useState } from "react";
+import { ModalUnsubscribe } from "./ModalUnsubscribe";
+
+type InputProps = {
+  onCloseModal: () => void;
+};
+export const useUnsubscribeToStripe = ({ onCloseModal }: InputProps) => {
+  const { getUserData } = useUserInfoCtx();
+
+  const [isAskingConfirm, setIsAskingConfirm] = useState(false);
+  const [{ isLoading, isError, isUnsubscribed }, setHttpState] = useState({
+    isLoading: false,
+    isError: false,
+    isUnsubscribed: false
+  });
+
+  const openModal = useCallback(() => setIsAskingConfirm(true), []);
+  const closeModal = useCallback(() => {
+    setIsAskingConfirm(false);
+    onCloseModal();
+  }, [onCloseModal]);
+
+  const unsubscribe = useCallback(async () => {
+    setHttpState({ isLoading: true, isError: false, isUnsubscribed: false });
+    try {
+      const paymentsApi = new PaymentsApi();
+      await paymentsApi
+        .apiPaymentsUnsubscribePost()
+        .then(async (res) => {
+          await getUserData();
+          // unsubscribed
+          setHttpState({
+            isLoading: false,
+            isError: false,
+            isUnsubscribed: true
+          });
+        })
+        .catch(() =>
+          setHttpState({
+            isLoading: false,
+            isError: false,
+            isUnsubscribed: false
+          })
+        );
+    } catch (err) {
+      setHttpState({
+        isLoading: false,
+        isError: true,
+        isUnsubscribed: false
+      });
+      debugConsole(err);
+    }
+  }, []);
+
+  const renderUnsubscribe = (
+    <ModalUnsubscribe
+      closeModal={closeModal}
+      isError={isError}
+      isLoading={isLoading}
+      isUnsubscribed={isUnsubscribed}
+      showModal={isAskingConfirm}
+      unsubscribe={unsubscribe}
+    />
+  );
+
+  return { openModal, closeModal, renderUnsubscribe };
+};

src/components/Typography.tsx

@@ -1,21 +1,32 @@
 import { Typography as TypographyCore } from "@mui/material";
+import { memo } from "react";
 
 interface InputProps {
   children?: React.ReactNode;
   variant?: "t1" | "t2" | "t3" | "t4" | "t5" | "t6";
   className?: string;
+  component?: "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
 
 const Typography = ({
   children = "change me",
   variant = "t4",
-  className
+  className,
+  component
 }: InputProps) => {
-  return (
+  return component ? (
+    <TypographyCore
+      component={component}
+      variant={variant}
+      className={className}
+    >
+      {children}
+    </TypographyCore>
+  ) : (
     <TypographyCore variant={variant} className={className}>
       {children}
     </TypographyCore>
   );
 };
 
-export default Typography;
+export default memo(Typography);

src/components/UserInfo/UserInfo.tsx

@@ -9,6 +9,7 @@ type ctxType = {
   manualLogin: ReturnType<typeof useHandlerAuth>["manualLogin"];
   handleLogin: ReturnType<typeof useHandlerAuth>["handleLogin"];
   handleLogout: ReturnType<typeof useHandlerAuth>["handleLogout"];
+  getUserData: ReturnType<typeof useHandlerAuth>["getUserData"];
 };
 
 const Ctx = createContext<ctxType>({
@@ -22,7 +23,10 @@ const Ctx = createContext<ctxType>({
   handleLogin: async () => {
     throw new Error("Outside context");
   },
-  handleLogout: async () => {}
+  handleLogout: async () => {},
+  getUserData: async () => {
+    throw new Error("Outside context");
+  }
 });
 
 type InputProps = {
@@ -35,7 +39,8 @@ const UserInfo = ({ children }: InputProps) => {
     manualLogin,
     isLoadingUser,
     userInfo,
-    user
+    user,
+    getUserData
   } = useHandlerAuth();
 
   const providerValue: ctxType = useMemo(
@@ -46,9 +51,18 @@ const UserInfo = ({ children }: InputProps) => {
       handleLogin,
       handleLogout,
       userInfo,
-      manualLogin
+      manualLogin,
+      getUserData
     }),
-    [handleLogin, handleLogout, manualLogin, user, userInfo, isLoadingUser]
+    [
+      handleLogin,
+      handleLogout,
+      manualLogin,
+      user,
+      userInfo,
+      isLoadingUser,
+      getUserData
+    ]
   );
 
   const memoChildren = useMemo(() => children, [children]); // To avoid unless rerender