[fixes ✅ ] pricing , subscription store , feedback from

amitjimiwal · amitjimiwal · commit fca7a9220cb8 · 2024-05-14T22:28:11.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@typeform/embed-react": "^3.17.0",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.0",
     "@types/node": "^20.11.25",
diff --git a/src/components/ContactUS.tsx b/src/components/ContactUS.tsx
@@ -1,3 +1,4 @@
+import { PopupButton } from "@typeform/embed-react";
 export default function ContactUS() {
   return (
     <section
@@ -80,88 +81,18 @@ export default function ContactUS() {
             in touch with us. We look forward to hearing from you!
           </p>
         </div>
-        <div className="mt-12">
-          <form
-            action="#"
-            className="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"
-            method="POST"
+        <PopupButton
+          id={String(import.meta.env.VITE_APP_TYPEFORM_FEEDBACK_ID)}
+          style={{ fontSize: 20 ,width: "100%", marginTop: "20px"}}
+          className="my-button"
+        >
+          <button
+            className="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            type="submit"
           >
-            <div>
-              <label
-                className="block text-sm font-medium text-gray-700"
-                htmlFor="first-name"
-              >
-                Name
-              </label>
-              <div className="mt-1">
-                <input
-                  autoComplete="given-name"
-                  className="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
-                  id="first-name"
-                  name="first-name"
-                  type="text"
-                />
-              </div>
-            </div>
-            <div>
-              <label
-                className="block text-sm font-medium text-gray-700"
-                htmlFor="email"
-              >
-                Email Address
-              </label>
-              <div className="mt-1">
-                <input
-                  autoComplete="email"
-                  className="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
-                  id="email"
-                  name="email"
-                  type="email"
-                />
-              </div>
-            </div>
-            <div className="sm:col-span-2">
-              <label
-                className="block text-sm font-medium text-gray-700"
-                htmlFor="subject"
-              >
-                Subject
-              </label>
-              <div className="mt-1">
-                <input
-                  className="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
-                  id="subject"
-                  name="subject"
-                  type="text"
-                />
-              </div>
-            </div>
-            <div className="sm:col-span-2">
-              <label
-                className="block text-sm font-medium text-gray-700"
-                htmlFor="message"
-              >
-                Your Message
-              </label>
-              <div className="mt-1">
-                <textarea
-                  className="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border border-gray-300 rounded-md"
-                  id="message"
-                  name="message"
-                  rows={4}
-                />
-              </div>
-            </div>
-            <div className="sm:col-span-2">
-              <button
-                className="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                type="submit"
-              >
-                Send Message
-              </button>
-            </div>
-          </form>
-        </div>
+            Send Your FeedBack/Query
+          </button>
+        </PopupButton>
       </div>
     </section>
   );
diff --git a/src/components/Pricing.tsx b/src/components/Pricing.tsx
@@ -1,42 +1,17 @@
-import handleCheckout from "@/api/payment/handleCheckout";
-import { Button } from "@/components/ui/button";
-import { useAuthStatus } from "@/hooks/useAuthStatus";
-import { useSubscription } from "@/hooks/useSubscription";
-import { SVGProps, useEffect, useState } from "react";
+import { SVGProps, useEffect } from "react";
 import toast from "react-hot-toast";
 import { useLocation, useNavigate } from "react-router-dom";
+import SubscriptionButton from "./SubscriptionButton";
 
 export default function Pricing() {
-  const {isProUser}=useSubscription();
-  const {status}=useAuthStatus();
-  const [sessionUrl,setSessionUrl]=useState<string>("");
   const { search } = useLocation();
   const params = new URLSearchParams(search);
-  const navigate = useNavigate();
-  useEffect(() => {
-    if(status){
-      handleCheckout().then((redirect_url) => {
-        console.log(redirect_url);
-        setSessionUrl(redirect_url);
-      }).catch(() => {
-        toast.error("Error in Generating you session Url");
-      });
-    }
-  }, [status]);
+  if (params.get("redirect") && params.get("redirect") === "billingportal") {
+    return <Redirecting to="/" />;
+  }
   if (params.get("success") == "true") {
     toast.success("Payment SuccessFul");
-    setTimeout(() => {
-      navigate("/test");
-    }, 2000);
-    return (
-      <section className="w-full py-12 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-zinc-900 dark:to-zinc-800 flex items-center justify-center h-screen flex-col sm:flex-row">
-        <CheckIcon /> Redirecting to DashBoard{" "}
-        <span className="animate-bounce text-xl font-extrabold">.</span>
-        <span className="animate-bounce text-xl font-extrabold">.</span>
-        <span className="animate-bounce text-xl font-extrabold">.</span>
-        <span className="animate-bounce text-xl font-extrabold">.</span>
-      </section>
-    );
+    return <Redirecting to="/test" />;
   }
   if (params.get("success") == "false") {
     toast.error("Payment Failed");
@@ -72,18 +47,7 @@ export default function Pricing() {
           </ul>
         </div>
         <div className="mt-6">
-          <Button
-            className="w-full bg-gradient-to-r from-pink-500 to-purple-500"
-            onClick={() => {
-              if(!status){
-                navigate("/login");
-              }else{
-                window.location.href=sessionUrl;
-              }
-            }}
-          >
-            { (status && isProUser) ? "Manage Subscription" : "Subscribe Now"}
-          </Button>
+          <SubscriptionButton />
         </div>
       </div>
     </section>
@@ -109,3 +73,23 @@ function CheckIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
   );
 }
 
+function Redirecting({ to = "/" }: { to: string }) {
+  const navigate = useNavigate();
+  useEffect(() => {
+    const id = setTimeout(() => {
+      navigate(`${to}`);
+    }, 2000);
+    return () => {
+      clearTimeout(id);
+    };
+  }, []);
+  return (
+    <section className="w-full py-12 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-zinc-900 dark:to-zinc-800 flex items-center justify-center h-screen flex-col sm:flex-row">
+      <CheckIcon /> Redirecting{" "}
+      <span className="animate-bounce text-xl font-extrabold">.</span>
+      <span className="animate-bounce text-xl font-extrabold">.</span>
+      <span className="animate-bounce text-xl font-extrabold">.</span>
+      <span className="animate-bounce text-xl font-extrabold">.</span>
+    </section>
+  );
+}
diff --git a/src/components/SubscriptionButton.tsx b/src/components/SubscriptionButton.tsx
@@ -0,0 +1,43 @@
+import handleCheckout from "@/api/payment/handleCheckout";
+import { useAuthStatus } from "@/hooks/useAuthStatus";
+import { useSubscription } from "@/hooks/useSubscription";
+import React, { useEffect, useState } from "react";
+import { Button } from "./ui/button";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+
+const SubscribeButton = () => {
+  const { isProUser } = useSubscription();
+  const { status } = useAuthStatus();
+  const [sessionUrl, setSessionUrl] = useState<string>("");
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (status) {
+      handleCheckout()
+        .then((redirect_url) => {
+          console.log(redirect_url);
+          setSessionUrl(redirect_url);
+        })
+        .catch(() => {
+          toast.error("Error in Generating you session Url");
+        });
+    }
+  }, [status]);
+  return (
+    <Button
+      className="w-full bg-gradient-to-r from-pink-500 to-purple-500"
+      onClick={() => {
+        if (!status) {
+          navigate("/login");
+        } else {
+          window.location.href = sessionUrl;
+        }
+      }}
+    >
+      {status && isProUser ? "Manage Subscription" : "Subscribe Now"}
+    </Button>
+  );
+};
+
+const SubscriptionButton = React.memo(SubscribeButton);
+export default SubscriptionButton;
diff --git a/src/pages/Dashboard/DashBoard.tsx b/src/pages/Dashboard/DashBoard.tsx
@@ -18,6 +18,7 @@ import ChartView from "@/components/ChartView";
 import { ModeToggle } from "@/components/ui/toggle-theme";
 import { useSubscription } from "@/hooks/useSubscription";
 import History from "@/components/History";
+import SubscriptionButton from "@/components/SubscriptionButton";
 
 export default function Component() {
   const dispatch = useAppDispatch();
@@ -45,12 +46,12 @@ export default function Component() {
         <div className="flex flex-col flex-1">
           <header className="h-16 px-4 border-b shrink-0 md:px-6 flex items-center">
             <div className="flex items-center justify-end w-full gap-4 md:ml-auto md:gap-2 lg:gap-4">
-            <Link
-                  className="text-gray-600 hover:text-gray-900 dark:text-gray-200"
-                  to="/test"
-                >
-                  Test
-                </Link>
+              <Link
+                className="text-gray-600 hover:text-gray-900 dark:text-gray-200"
+                to="/test"
+              >
+                Test
+              </Link>
               {!isProUser && (
                 <Link
                   className="text-gray-600 hover:text-gray-900 dark:text-gray-200"
@@ -160,12 +161,15 @@ export default function Component() {
           </main>
         </div>
       </div>
-      <Button
+      {/* <Button
         className="fixed bottom-7 left-10 object-cover w-fit shadow-2xl bg-gradient-to-r from-purple-400 to-fuchsia-600"
         variant={"destructive"}
       >
         {isProUser ? "Manage Subscriptions" : "Go Pro"}
-      </Button>
+      </Button> */}
+      <div className="fixed bottom-7 left-10">
+        <SubscriptionButton />
+      </div>
     </div>
   );
 }
diff --git a/src/redux-store/slices/subscriptionslice.ts b/src/redux-store/slices/subscriptionslice.ts
@@ -1,7 +1,6 @@
 import { axiosClient } from "@/api/axiosclient";
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { AxiosError } from "axios";
-const DAY_IN_MS = 86_400_400;
 export interface SubscriptionData {
      id: number;
      userID: number;
@@ -43,7 +42,7 @@ const resultSlice = createSlice({
                state.isLoadingSubscription = false;
                const response = action.payload.data;
                state.subscriptionData = response.data;
-               if (state.subscriptionData?.stripePriceId && state.subscriptionData?.stripeCurrentPeriodEnd.getTime() + DAY_IN_MS > Date.now()) {
+               if (state.subscriptionData?.stripePriceId && new Date(state.subscriptionData?.stripeCurrentPeriodEnd)> new Date()) {
                     state.isProUser = true;
                }
           });
