Quiz-PDF/Frontend/sections/AccountContent.tsx

"use client";

import {
  createManagementSubscriptionSession,
  getSubscriptions,
} from "@/app/actions";
import { Subscription, User } from "@/types";
import React from "react";
import { useState, useEffect } from "react";
import { toast } from "react-toastify";
import { useRouter } from "next/navigation";
import { useQRCode } from "next-qrcode";
import pb from "@/lib/pocketbase";

interface ManageSubscriptionProps {
  user: User;
}

function AccountContent({ user }: ManageSubscriptionProps) {
  const router = useRouter();
  const { Canvas } = useQRCode();

  const [subscription, setSubscription] = useState<Subscription>();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    (async () => {
      if (!user) {
        setLoading(false);
        return;
      }
      try {
        setLoading(true);
        const subscriptions = await getSubscriptions();
        if (subscriptions.length > 0) {
          setSubscription(subscriptions[0]);
        }
        setLoading(false);
      } catch (err) {
        setLoading(false);
      }
    })();
  }, [user]);
  const manageSubscription = async () => {
    try {
      const managementSession = await createManagementSubscriptionSession();
      router.push(managementSession.url);
    } catch (error) {
      if (error instanceof Error) {
        toast.error(error.message, {
          position: "bottom-left",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "colored",
        });
      }
    }
  };

  return loading ? (
    <div className="flex flex-col"></div>
  ) : (
    <div className="flex flex-col">
      {/* //TODO: Create Application Component */}
      {/* {subscription ? (
        <div className="max-w-6xl mx-auto h-full w-full py-8 px-6 md:pt-12">
          <div className="flex flex-row justify-between w-full bg-gray-100 dark:bg-gray-700 p-8 rounded">
            <div>
              <h3 className="font-architects-daughter text-xl text-secondary mb-2">
                Get Started
              </h3>
              <ol className="list-decimal ml-6">
                <li>
                  <p className="text-lg bg-base-content">
                    <a
                      href={downloadApplicationLink}
                      className="text-secondary"
                    >
                      Download the application
                    </a>{" "}
                    by scanning the QR code
                  </p>
                </li>
                <li>
                  <p className="text-lg bg-base-content">
                    <a
                      href={portalWebsiteTemplatesLink}
                      className="text-secondary"
                    >
                      Upload some PDF
                    </a>{" "}
                    Forms you want to fill
                  </p>
                </li>
                <li>
                  <p className="text-lg bg-base-content">
                    Setup some{" "}
                    <a
                      href={portalWebsiteIntegrationsLink}
                      className="text-secondary"
                    >
                      Integrations
                    </a>
                  </p>
                </li>
              </ol>
              <a href={portalWebsite}>
                <button className="btn  btn-sm text-base capitalize !rounded-md bg-base-content bg-bg-gray-925 hover:bg-gray-900 w-full sm:w-auto mt-8">
                  Management Portal
                </button>
              </a>
            </div>
            <div>
              <Canvas
                text={"https://github.com/bunlong/next-qrcode"}
                options={{
                  errorCorrectionLevel: "M",
                  margin: 3,
                  scale: 4,
                  width: 200,
                  color: {
                    dark: "#000000",
                    light: "#ffffff",
                  },
                }}
              />
            </div>
          </div>
        </div>
      ) : (
        <></>
      )} */}
      <div className="max-w-6xl mx-auto mb-12 h-full w-full px-6">
        <div className="w-full bg-base-200 p-8 rounded text-base-content">
          <h3 className="font-accent text-xl text-secondary mb-2">
            Your Subscription
          </h3>
          {subscription && subscription.status != "canceled" ? (
            <>
              <h2 className="text-3xl mb-3 font-heading font-bold">
                {subscription?.product?.name}
              </h2>
              <p className="text-lg  mb-4">
                {subscription.product?.description}
              </p>
              <button
                onClick={manageSubscription}
                className="btn  btn-sm text-base-content capitalize !rounded-md bg-secondary hover:bg-secondary/60 w-full sm:w-auto mt-8"
              >
                Manage Subscription
              </button>
            </>
          ) : (
            <>
              <p className="text-lg text-base-content  mb-4">
                {"You haven’t upgraded your workflow yet"}
              </p>
              <div className="flex flex-row gap-2 flex-wrap">
                <button
                  onClick={() => router.push("/pricing")}
                  className="btn  btn-sm btn-neutral text-primary-content capitalize bg-gradient-to-r from-primary to-secondary border-none"
                >
                  Upgrade
                </button>
                <button
                  onClick={manageSubscription}
                  className="btn  btn-sm btn-secondary text-primary-content capitalize border-none"
                >
                  Manage Purchases
                </button>
                <button
                  onClick={() =>
                    document.getElementById("password-reset-modal")?.click()
                  }
                  className="btn  btn-sm btn-secondary md:ml-auto text-primary-content capitalize border-none"
                >
                  Reset Password
                </button>
                <button
                  onClick={() =>
                    document.getElementById("email-change-modal")?.click()
                  }
                  className="btn  btn-sm btn-secondary text-primary-content capitalize border-none"
                >
                  Change Email
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default AccountContent;