From fe8cdec3f81c482c82f901d5bf109e70fefba83e Mon Sep 17 00:00:00 2001 From: Leanstix Date: Fri, 6 Sep 2024 18:38:37 +0100 Subject: [PATCH 1/2] resume preview added --- .../contact/components/contact-section.js | 2 +- .../[template]/finish/components/Finish.js | 32 ++++++++++++++++--- .../how-to-start/[template]/finish/page.js | 8 ++--- 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/app/resume-builder/app/how-to-start/[template]/contact/components/contact-section.js b/app/resume-builder/app/how-to-start/[template]/contact/components/contact-section.js index 98107ae..51f0d0f 100644 --- a/app/resume-builder/app/how-to-start/[template]/contact/components/contact-section.js +++ b/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(); diff --git a/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js b/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js index 358c956..d433dbd 100644 --- a/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js +++ b/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js @@ -4,12 +4,13 @@ import { plans } from "@/utils/resume-builder/builder/finish"; import { useRouter } from "next/navigation"; import Cookies from "js-cookie"; import Link from "next/link"; - +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); // Add this state for the template component const [selectedPaymentMenu, setSelectedPaymentMenu] = useState("14-day"); const [user, setUser] = useState(null); const router = useRouter(); @@ -25,6 +26,22 @@ 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]); + const handleContinueForFree = () => { if (!user) { router.push("/login"); @@ -41,11 +58,16 @@ export default function FinishYourResume() {

Upgrade now for Unlimited Access to all pro features!

-
-
+
+
-
+
{/* Render Preview Of Resume With User Info */} + {TemplateComponent ? ( + + ) : ( +
Loading...
+ )}
@@ -113,7 +135,7 @@ export default function FinishYourResume() { {data && ( diff --git a/app/resume-builder/app/how-to-start/[template]/finish/page.js b/app/resume-builder/app/how-to-start/[template]/finish/page.js index 005b485..3f5a3d2 100644 --- a/app/resume-builder/app/how-to-start/[template]/finish/page.js +++ b/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 ; -} + return ; +} \ No newline at end of file From a85c10b62fabcca4dd7132baf8a721de7f06688f Mon Sep 17 00:00:00 2001 From: Leanstix Date: Fri, 6 Sep 2024 18:47:57 +0100 Subject: [PATCH 2/2] resume preview added in imag format --- .../[template]/finish/components/Finish.js | 27 ++++++++-- package-lock.json | 50 +++++++++++++++++++ package.json | 1 + 3 files changed, 73 insertions(+), 5 deletions(-) diff --git a/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js b/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js index d433dbd..bdc6d93 100644 --- a/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js +++ b/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js @@ -1,19 +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); // Add this state for the template component + 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"); @@ -42,6 +45,18 @@ export default function FinishYourResume() { } }, [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"); @@ -63,10 +78,12 @@ export default function FinishYourResume() {
{/* Render Preview Of Resume With User Info */} - {TemplateComponent ? ( - + {TemplateComponent && !imageSrc ? ( +
+ +
) : ( -
Loading...
+ imageSrc ? Resume Preview :
Loading...
)}
diff --git a/package-lock.json b/package-lock.json index 848950e..86cdab3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,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", @@ -1975,6 +1976,15 @@ "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz", "integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==" }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -2269,6 +2279,15 @@ "node": "*" } }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "license": "MIT", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -3489,6 +3508,19 @@ "node": ">= 0.4" } }, + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "license": "MIT", + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/humanize-ms": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", @@ -5703,6 +5735,15 @@ "node": ">=6" } }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "license": "MIT", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -6007,6 +6048,15 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "license": "MIT", + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/w3c-keyname": { "version": "2.2.8", "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", diff --git a/package.json b/package.json index 46ec5df..2feaf8d 100644 --- a/package.json +++ b/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",