Merge pull request #10 from Leanstix/master

ready for prod

app/resume-builder/app/how-to-start/[template]/contact/components/contact-section.js

@@ -2,7 +2,7 @@
 import { useState, useRef, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { inputs } from "@/utils/resume-builder/builder/contact";
-import { errorToast } from "@/utils/error-toast";
+//import { errorToast } from "@/utils/error-toast";
 
 export default function ContactSection() {
   const router = useRouter();

app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js

@@ -1,18 +1,22 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { plans } from "@/utils/resume-builder/builder/finish";
 import { useRouter } from "next/navigation";
 import Cookies from "js-cookie";
 import Link from "next/link";
-
+import html2canvas from "html2canvas";
+import resumeTemplates from "@/resources/resume-builder/resume-templates.json";
 import GuestLayout from "@/components/application/layouts/guest";
 import CheckoutForm from "./checkout-form";
 
 export default function FinishYourResume() {
   const [data, setData] = useState(null);
+  const [TemplateComponent, setTemplateComponent] = useState(null);
+  const [imageSrc, setImageSrc] = useState(null);
   const [selectedPaymentMenu, setSelectedPaymentMenu] = useState("14-day");
   const [user, setUser] = useState(null);
   const router = useRouter();
+  const templateRef = useRef();
 
   useEffect(() => {
     const storedResumeData = localStorage.getItem("resumeInfo");
@@ -25,6 +29,34 @@ export default function FinishYourResume() {
     }
   }, []);
 
+  useEffect(() => {
+    if (data) {
+      const templateEntry = resumeTemplates.find(template => template.id === data.template);
+      if (templateEntry && templateEntry.linkToTemplate) {
+        import(`@/components/application/templates/resume/${data.template}`).then(module => {
+          const TemplateComponent = module.default;
+          setTemplateComponent(() => TemplateComponent);
+        }).catch(error => {
+          console.error("Error importing template:", error);
+        });
+      } else {
+        console.error("Template path not found for:", data.template);
+      }
+    }
+  }, [data]);
+
+  // Convert the rendered template to an image using html2canvas
+  useEffect(() => {
+    if (TemplateComponent && data) {
+      html2canvas(templateRef.current).then((canvas) => {
+        const imgData = canvas.toDataURL("image/png");
+        setImageSrc(imgData);
+      }).catch(error => {
+        console.error("Error generating image:", error);
+      });
+    }
+  }, [TemplateComponent, data]);
+
   const handleContinueForFree = () => {
     if (!user) {
       router.push("/login");
@@ -41,11 +73,18 @@ export default function FinishYourResume() {
         <p className=" text-[2.2rem] max-w-[90%] w-[900px] px-5 text-center max-[900px]:text-xl font-extrabold text-black/80">
           Upgrade now for Unlimited Access to all pro features!
         </p>
-        <div className="w-full mt-8 lg:mt-3  flex flex-col lg:flex-row justify-between h-max min-h-[650px] ">
-          <div className="relative w-full lg:w-[calc(50%-15px)]  h-[600px] ">
+        <div className="w-full mt-8 lg:mt-3 flex flex-col lg:flex-row justify-between h-max min-h-[650px]">
+          <div className="relative w-full lg:w-[calc(50%-15px)] h-[600px]">
             <div className="lg:w-[65%] w-[90%] h-[600px] bg-AnalogueShiftsTextColor fancy-border-radius"></div>
-            <div className="resume-box lg:w-[85%] w-[calc(100%-40px)]  h-[calc(100%-90px)] left-[20px] lg:left-[15%] absolute top-[45px] overflow-y-auto shadow-lg">
+            <div className="resume-box lg:w-[85%] w-[calc(100%-40px)] h-[calc(100%-90px)] left-[20px] lg:left-[15%] absolute top-[45px] overflow-y-auto shadow-lg">
               {/* Render Preview Of Resume With User Info */}
+              {TemplateComponent && !imageSrc ? (
+                <div ref={templateRef}>
+                  <TemplateComponent data={data} />
+                </div>
+              ) : (
+                imageSrc ? <img src={imageSrc} alt="Resume Preview" /> : <div>Loading...</div>
+              )}
             </div>
           </div>
           <div className=" lg:w-[calc(50%-15px)] w-full flex flex-col items-center lg:items-start gap-6 pt-12 pr-[20px]">
@@ -113,7 +152,7 @@ export default function FinishYourResume() {
             {data && (
               <button
                 onClick={handleContinueForFree}
-                className="lg:w-[65%] flex justify-center max-w-[90%] md:max-w-full w-[600px] py-2.5  rounded-full border border-black/20 text-black/80 text-base font-bold"
+                className="lg:w-[65%] flex justify-center max-w-[90%] md:max-w-full w-[600px] py-2.5 rounded-full border border-black/20 text-black/80 text-base font-bold"
               >
                 Download For Free
               </button>

app/resume-builder/app/how-to-start/[template]/finish/page.js

@@ -1,10 +1,10 @@
 import FinishYourResume from "./components/Finish";
 
 export const metadata = {
-  title: "Download Your Resume | AnalogueShifts Resume Builder",
-  description: "Download Your Resume | AnalogueShifts Resume Builder",
+    title: "Download Your Resume | AnalogueShifts Resume Builder",
+    description: "Download Your Resume | AnalogueShifts Resume Builder",
 };
 
 export default function Page() {
-  return <FinishYourResume />;
-}
+    return <FinishYourResume / > ;
+}

package.json

@@ -23,6 +23,7 @@
     "axios": "^1.6.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.395.0",
     "next": "14.0.2",