fix cancel premium btn

src/containers/Modals/CancelPremiumModal/index.tsx

@@ -1,17 +1,28 @@
 import React from "react";
-import { Modal, Group, Button, Divider, ModalProps, Text, Image } from "@mantine/core";
+import { Modal, Group, Button, Divider, ModalProps, Text, Image, Anchor } from "@mantine/core";
 import { toast } from "react-hot-toast";
 import { altogic } from "src/api/altogic";
 
 export const CancelPremiumModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const [cancelling, setCancelling] = React.useState(false);
+
   const cancelSub = async () => {
-    altogic.endpoint.delete("/subscription").then(({ data, errors }) => {
+    try {
+      setCancelling(true);
+      const { errors } = await altogic.endpoint.delete("/subscription");
+
       if (errors?.items.length) {
-        toast.error("An error occured while cancelling plan!");
-        console.log(errors.items);
+        return toast.error(
+          "An error occured while cancelling plan! Please contact support@herowand.com"
+        );
       }
+
       toast.success("Cancelled premium plan!");
-    });
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setCancelling(false);
+    }
   };
 
   return (
@@ -22,13 +33,17 @@ export const CancelPremiumModal: React.FC<ModalProps> = ({ opened, onClose }) =>
         <br />
         <br />
         You can restart your subscription anytime.
+        <br />
+        <Anchor target="_blank" href="https://patreon.com/herowand">
+          Click here to cancel if you are Patreon member
+        </Anchor>
       </Text>
       <Divider py="xs" />
       <Group position="right">
         <Button color="dark" variant="subtle" onClick={onClose}>
           Cancel
         </Button>
-        <Button onClick={cancelSub} color="red">
+        <Button onClick={cancelSub} loading={cancelling} color="red">
           QUIT SUBSCRIPTION
         </Button>
       </Group>