\n \n {blogData?.blogs?.title} \n \n \n \n \n \n \n \n \n \n \n
\n \n );\n};\n\nexport default BlogDetails;\n","import React, { useState, useEffect, Suspense } from \"react\";\nimport axios from \"axios\";\nimport \"./Blogs.css\";\nimport { Link } from \"react-router-dom\";\nimport { FaCalendarDay } from \"react-icons/fa\";\nimport { Helmet } from \"react-helmet\";\n\nconst Blogs = () => {\n const [latestBlogs, setLatestBlogs] = useState([]);\n const [blogs, setBlogs] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const getDate = (dateString) => {\n const options = { year: \"numeric\", month: \"short\", day: \"numeric\" };\n return new Date(dateString).toLocaleDateString(\"en-US\", options);\n };\n\n useEffect(() => {\n fetchBlogs();\n }, []);\n\n useEffect(() => {\n const animateBlogs = () => {\n const blogItems = document.querySelectorAll(\".blog-item\");\n\n blogItems.forEach((item, index) => {\n setTimeout(() => {\n item.classList.add(\"visible\");\n }, index * 100); // Adjust the delay as needed\n });\n };\n // Call animateBlogs after the blogs have been set\n animateBlogs();\n }, [blogs]);\n\n const AWS_S3_BUCKET_URL = process.env.REACT_APP_AWS_S3_BUCKET_URL;\n const fetchBlogs = async () => {\n const categories = [];\n const blogsArray = [];\n // Fetch blogs from the API when the component mounts\n const response = await axios.get(\n `${process.env.REACT_APP_BASE_URL}/v1/api/public-api/category-with-blogs`\n );\n const getLatesBlogs = response.data.getLatestBlogs;\n const categoryWithBlogs = response.data.categoryWithBlogs;\n categoryWithBlogs.forEach((blog) => {\n if (blog.Blogs?.length > 0) categories.push(blog.id);\n });\n setLatestBlogs(getLatesBlogs);\n setIsLoading(false);\n\n for (const category of categories) {\n const response = await axios.get(\n `${process.env.REACT_APP_BASE_URL}/v1/api/public-api/category-with-blogs-by-id/${category}`\n );\n const categoryWithBlogs = response.data.categoryWithBlogs;\n blogsArray.push(categoryWithBlogs);\n setIsLoading(false);\n }\n setBlogs(blogsArray);\n return;\n };\n\n if (isLoading) {\n return {blogData?.blogs?.title}
\n\n \n {capitalizeFirstLetter(blogData?.blogs?.Category?.name)}\n {\" \"}\n \n {capitalizeFirstLetter(blogData?.blogs?.Subcategory?.name)}\n \n
\n\n \n
\n \n {getDate(blogData?.blogs?.createdAt)}\n
\n \n \n navigator.clipboard.writeText(currentLocation)}\n >\n \n \n \n \n \n \n \n
\n Loading...
;\n }\n function capitalizeFirstLetter(string) {\n if (!string) {\n return \"\"; // Handle cases where the string is empty or undefined\n }\n return string.charAt(0).toUpperCase() + string.slice(1);\n }\n\n return (\n\n \n \n Networking & Event Marketing Blog. Expert Tips & Strategies!\n \n \n \n \n \n \n \n \n \n \n \n
\n \n );\n};\n\nexport default Blogs;\n","import React from 'react';\n\nconst Compatible = () => {\n return (\n \n \n
\n
\n\n \n \n
\n \n
{latestBlogs[0].title}
\n\n
\n \n {getDate(latestBlogs[0].createdAt)}\n
\n {latestBlogs[0].metaDesc}
\n \n \n {capitalizeFirstLetter(latestBlogs[0].Category.name)}\n {\" \"}\n \n {capitalizeFirstLetter(latestBlogs[0]?.Subcategory?.name)}\n \n
\n \n\n \n {latestBlogs?.map(\n (latestBlog, index) =>\n index > 0 && (\n \n
\n
\n \n \n
\n \n
\n
\n \n )\n )}\n {latestBlog.title}
\n\n
\n \n {getDate(latestBlog.createdAt)}{\" \"}\n {/* Use createdAt instead of updatedAt */}\n
\n {latestBlog.metaDesc}
\n \n \n {latestBlog.Category.name}\n {\" \"}\n \n {latestBlog?.Subcategory?.name}\n \n
\n \n {blogs.map((category) =>\n category.Blogs.map((blog, blogIndex) => (\n Loading...}>\n \n \n \n
\n
\n \n ))\n )}\n \n
{blog.title}
\n\n
\n \n {getDate(blog.updatedAt)}\n
\n {blog.metaDesc}
\n \n \n {category.name.charAt(0).toUpperCase() +\n category.name.slice(1)}\n {\" \"}\n \n {blog?.Subcategory?.name\n ? blog.Subcategory.name.charAt(0).toUpperCase() +\n blog.Subcategory.name.slice(1)\n : \"\"}\n \n
\n \n \n
\n
\n
\n \n
\n
\n
\n
iOS Devices
\n\n
\n
\n Apple
\niphone 7
\n iphone 7 plus
\n iphone 8
\n iphone 8 plus
\n iphone X
\n iphone XS
\n iphone XS Max
\n iphone XR
\n iphone SE (2020)
\n iphone 11
\n iphone 11 pro
\n iphone 12
\n iphone 12 mini
\n iphone 12 pro
\n iphone 12 pro Max
\n iphone 13
\n iphone 13 mini
\n iphone 13 pro
\n iphone 13 pro Max
\n \n
\n
\n
\n {/* Add more card sections for other device categories */}\n {/* Example: LG, Vivo, HTC, Honor, Essential, Oppo, Poco, etc. */}\n Android
\n\n
\n
\n \n Samsung
\nGalaxy SIII
\n Galaxy S4
\n Galaxy S5
\n Galaxy S6
\n Galaxy S6 Edge
\n Galaxy S6 Edge+
\n Galaxy S7
\n Galaxy S7 Edge
\n Galaxy S8
\n Galaxy S8+
\n Galaxy S9
\n Galaxy S9+
\n Galaxy S9 Plus
\n Galaxy S10
\n Galaxy S10 Plus
\n Galaxy S21 Plus
\n Galaxy S20 Plus
\n Galaxy S20 Ultra
\n Galaxy S21 Ultra
\n Galaxy S20 FE
\n Galaxy Note 3
\n Galaxy Note 3 NEO
\n Note 5
\n Note 5
\n Galaxy Note 10 Lite
\n Galaxy Note 10 Plus
\n Galaxy Alpha
\n Galaxy A32
\n Galaxy A30s
\n Galaxy A5
\n Galaxy A50s
\n Galaxy A51
\n Galaxy A52s
\n Galaxy A52
\n Galaxy A70
\n Galaxy A70s
\n Galaxy A72
\n Galaxy A80
\n Galaxy M32
\n Galaxy M40
\n Galaxy A50s 6GB RAM
\n Galaxy M51
\n Galaxy F62
\n Galaxy On8
\n Galaxy S3 Neo
\n Galaxy Z Flip 3
\n Galaxy Z Fold 3
\n Galaxy M42
\n \n
\n \n
\n OnePlus
\nOnePlus 3\n
\n OnePlus 3T\n
\n OnePlus 5\n
\n OnePlus 5T\n
\n OnePlus 6\n
\n OnePlus 7\n
\n OnePlus 7T\n
\n OnePlus 7 Pro\n
\n 7T Pro McLaren Edition\n
\n OnePlus 8 Pro\n
\n OnePlus 8\n
\n OnePlus Nord\n
\n OnePlus 8T\n
\n OnePlus 6T\n
\n OnePlus 9\n
\n OnePlus 9 Pro\n
\n OnePlus 9 R
\n \n
\n \n
\n Nokia
\nNokia 3\n
\n Nokia 3.1\n
\n Nokia 4.2\n
\n Nokia 5\n
\n Nokia 5.1\n
\n Nokia 6\n
\n Nokia 6.1\n
\n Nokia 7\n
\n Nokia 7 Plus\n
\n Nokia 8 Sirocco\n
\n Nokia 8\n
\n Nokia 8.1\n
\n Nokia 9\n
\n Nokia Lumia 920\n
\n Nokia Lumia 930
\n \n
\n \n
\n Motorola
\n\n
\n Motorola One\n
\n Motorola One Vision\n
\n Motorola One Action\n
\n Motorola One Vision Plus\n
\n Moto Z3 Play\n
\n Moto E4 Plus\n
\n Moto X4\n
\n Moto E5/Plus\n
\n Moto E5 Play/Go\n
\n Moto G5/G5S Plus\n
\n Moto G6/Plus/Play\n
\n Motorola Razr\n
\n Motorola Moto Turbo\n
\n Motorola Moto X Force\n
\n Motorola Moto X Play\n
\n Motorola Edge S\n
\n Motorola Edge 20\n
\n Motorola Edge 20 Fusion\n
\n Motorola Edge S Pro\n
\n Motorola Edge 20 Pro\n
\n Motorola Edge 20 Lite\n
\n Motorola Edge Plus\n
\n Motorola Edge\n
\n Motorola Defy\n
\n Motorola Moto X
\n\n \n
\n \n
\n LG
\nLG G3\n
\n LG G4\n
\n LG G5\n
\n LG Nexus 5X\n
\n\n LG V10\n
\n LG V20\n
\n LG V30\n
\n LG V30 ThinQ\n
\n LG V35 ThinQ\n
\n LG V40 ThinQ\n
\n LG G6\n
\n LG Q6\n
\n LG Q6 Plus\n
\n LG Q Styus\n
\n LG Q Stylus 4\n
\n LG Q7\n
\n LG G7 ThinQ\n
\n LG Q8\n
\n LG G8 ThinQ\n
\n LG Q92\n
\n LG K10\n
\n LG K62\n
\n LG K92\n
\n LG V35 ThinQ\n
\n LG Wing\n
\n LG G7 Plus ThinQ\n
\n LG G4 Dual\n
\n LG G2\n
\n LG G2\n
\n LG Stylus 2 Plus\n
\n LG F70\n
\n\n LG G Pro 2\n
\n LG Q7 Plus
\n \n
\n \n
\n Xiaomi
\n\n Xiaomi Mi 11X\n
\n Xiaomi Mi 11 Lite\n
\n Xiaomi Mi 10T Pro\n
\n Xiaomi Mi 10\n
\n Xiaomi Mi 10T\n
\n Xiaomi Mi 11X\n
\n Xiaomi Mi 11X Lite\n
\n Xiaomi Mi3\n
\n Xiaomi Redmi Note 10 Pro\n
\n Xiaomi Redmi K40\n
\n Xiaomi Mi Mix 4\n
\n Xiaomi Mi 11T Pro\n
\n Xiaomi Mi 11 Pro\n
\n Xiaomi Redmi Note 9 Pro\n
\n Xiaomi Redmi K40 Pro\n
\n Xiaomi Mi 11 Ultra\n
\n Xiaomi Mi 11 Lite NE\n
\n Xiaomi Mi 11\n
\n Xiaomi Mi5\n
\n Xiaomi Mi 10T Lite\n
\n Xiaomi Redmi K30s\n
\n Xiaomi Mi 11i\n
\n Xiaomi Redmi Note 9T\n
\n Xiaomi Mi 10 Lite\n
\n Xiaomi Redmi K40 Pro Plus\n
\n Xiaomi Mi 10S\n
\n Xiaomi Mi Mix Fold\n
\n Xiaomi Redmi K30 Ultra\n
\n Xiaomi Mi 10 Ultra\n
\n Xiaomi Mi 11 Lite\n
\n Xiaomi Mi 11 T
\n\n\n \n
\n \n Google
\n
\n Google Pixel
\n Google Pixel XL
\n Google Pixel 2
\n \n Google Pixel 2XL
\n Google Pixel 3XL
\n \n Google Pixel 3
\n Google Pixel 3A
\n Google Nexus 4\n
\n Google Pixel 4A
\n Google LG Nexus 5
\n Google Nexus 5X
\n Google Nexus 6P
\n \n \n
\n \n
\n REALme
\nRealme GT
\n Realme Narzo 30
\n Realme X7 Max
\n Realme X7 Pro
\n Realme Narzo 30
\n Realme X50 Pro
\n Realme X7 Max
\n Realme X2 Pro
\n Realme GT Neo
\n\n \n
\n \n
\n Sony
\nXA1/Ultra/Plus
\n XA2/Ultra/Plus
\n XZ1/Compact
\n XZ2/Compact/Premium
\n Sony Xperia 10
\n Sony Xperia 10 Lite
\n Sony Xperia 8 Lite
\n Sony Xperia XA1
\n Sony Xperia Z1
\n \n Sony Xperia C5
\n Sony Xperia XZ1
\n Sony Xperia XA1 Dual
\n Sony Xperia XA1 Ultra
\n Sony Xperia XZ
\n Sony Xperia T3
\n Sony Xperia XA
\n Sony Xperia ZR
\n Sony Xperia Z3+
\n Sony Xperia SP
\n \n Sony Xperia XA1 Plus
\n Sony Xperia Z2
\n Sony Xperia Z5
\n Sony Xperia T2
\n Sony Xperia E3
\n Sony Xperia Z3
\n Sony Xperia L2
\n Sony Xperia M2
\n \n\n\n \n
\n \n
\n Asus
\nAsus ROG Phone
\n \n
\n \n
\n Vivo
\nVivo X70 Pro Plus
\n Vivo X70 Pro
\n Vivo X70
\n Vivo Z6
\n Vivo S10 Pro
\n Vivo Nex 3S
\n Vivo S9 5G
\n Vivo X60T Pro Plus
\n Vivo X60T
\n Vivo Y53s
\n \n
\n \n
\n HTC
\nHTC One A9
\n HTC Desire 20 Plus
\n HTC U Ultra
\n \n HTC 10 Evo
\n HTC U11 Plus
\n HTC Desire 10 Pro
\n HTC One E8
\n HTC Desire Eye
\n HTC 10 Lifestyle
\n HTC One ME
\n HTC One E9+
\n HTC One M9 Plus
\n\n \n
\n \n
\n Honor
\nHonor 8
\n Honor View 20
\n Honor V10
\n Honor 8 Pro
\n\n \n
\n \n
\n Essential
\nEssential PH-1
\n\n \n
\n \n
\n Oppo
\nOPPO Reno6
\n \n OPPO Reno6 Pro
\n OPPO Reno 4
\n OPPO Reno 2
\n OPPO Find X2
\n \n OPPO R17 Pro
\n \n OPPO Find X2
\n \n OPPO R17 Pro
\n OPPO Reno 6 Pro Plus
\n OPPO Reno 3
\n OPPO Find X3 Pro
\n OPPO Reno 6 Pro Plus
\n OPPO K9
\n OPPO A95
\n OPPO Find X3
\n OPPO K9 Pro
\n OPPO Reno 5 Pro
\n OPPO Reno 10x
\n \n OPPO N1
\n OPPO Reno 5A
\n OPPO A16s
\n OPPO A94
\n OPPO Find X3 Neo
\n OPPO Reno 5 Lite
\n OPPO Reno 3A
\n OPPO N1 Mini
\n\n\n \n
\n \n
\n Poco
\nPoco F2 Pro
\n \n Poco F3
\n Poco X3 GT
\n \n
\n
\n \n\n \n \n \n
\n \n );\n};\n\nexport default ConfirmPassword;\n","import React, { useState } from \"react\";\nimport { useEffect } from \"react\";\nimport AOS from \"aos\";\nimport \"aos/dist/aos.css\";\nimport \"./Contact.css\";\nimport { toast } from \"react-toastify\";\nimport \"react-toastify/dist/ReactToastify.css\";\nimport { Helmet } from 'react-helmet';\n\nconst Contact = () => {\n const [emailError, setEmailError] = useState(\"\");\n const [messageError, setMessageError] = useState(\"\");\n const [contactForm, setContactForm] = useState({\n email: \"\",\n topic: \"\",\n message: \"\",\n });\n\n const handleInputChange = (event) => {\n const { name, value } = event.target;\n setContactForm((prevState) => ({\n ...prevState,\n [name]: value,\n }));\n\n // Clear email error when user enters a valid email\n if (name === \"email\" && value) {\n setEmailError(\"\");\n }\n\n // Clear message error when user enters a message\n if (name === \"message\" && value) {\n setMessageError(\"\");\n }\n };\n\n const handleSubmit = (event) => {\n event.preventDefault();\n\n // Check for email and message errors\n let hasErrors = false;\n\n if (!contactForm.email) {\n setEmailError(\"Email address is required\");\n hasErrors = true;\n } else {\n setEmailError(\"\");\n }\n\n if (!contactForm.message) {\n setMessageError(\"Please write a message\");\n hasErrors = true;\n } else {\n setMessageError(\"\");\n }\n\n // If there are errors, do not proceed with the form submission\n if (hasErrors) {\n return;\n }\n\n // Prepare the data for the API request\n const requestData = {\n email: contactForm.email,\n topic: contactForm.topic,\n message: contactForm.message,\n };\n\n // Make the API request\n fetch(`${process.env.REACT_APP_BASE_URL}/v1/api/public-api/feedback`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(requestData),\n })\n .then((response) => {\n if (!response.ok) {\n throw new Error(\"Network response was not ok\");\n }\n return response.json();\n })\n .then((data) => {\n // Handle the API response data as needed\n console.log(\"API response:\", data);\n\n // Display a success message using react-toastify\n toast.success(\n \"Success! Thank you for getting in touch with us One of our colleague will get back and touch with you soon ! Thank You\"\n );\n\n // You can also reset the form or take other actions here\n // Reset the form values\n setContactForm({\n email: \"\",\n topic: \"\",\n message: \"\",\n });\n })\n .catch((error) => {\n console.error(\"API error:\", error);\n // Handle the error (e.g., show an error message to the user)\n });\n };\n\n useEffect(() => {\n AOS.init();\n }, []);\n\n return (\n \n
\n \n
\n\n \n
\n \n \n
\n Reset Password
\n\n \n\n \n Contact the Best Digital Business Card Provider | Connct \n \n \n \n \n \n \n
\n
\n
\n
\n \n )\n}\n\nexport default Contact","import React, { useState, useEffect } from \"react\";\nimport { Modal } from \"react-bootstrap\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\n// import \"./Modal.css\";\nimport html2canvas from \"html2canvas\";\nimport { Resizable } from \"re-resizable\";\nimport Draggable from \"react-draggable\";\nimport \"./CustomizeCard.css\";\nimport qrCode from \"../assets/images/cardQRCode.jpeg\";\nimport mattBlack from \"../assets/images/matt_black_card.png\";\nimport glossBlack from \"../assets/images/gloss_black_card.png\";\nimport minimalWhite from \"../assets/images/minimal_white_card.png\";\nimport goldCard from \"../assets/images/Gold.png\";\nimport silverCard from \"../assets/images/silver.png\";\nimport ColorCard from \"../assets/images/Color.png\";\nimport customizeLogo from \"../assets/images/customisation-logo.jpeg\";\nimport { IoCartOutline } from \"react-icons/io5\";\nimport { toast } from \"react-toastify\";\n\nconst CustomizeCard = (props) => {\n const [cardSide, setCardSide] = useState(\"front\");\n const [activePage, setActivePage] = useState(\"text\");\n const [printOption, setPrintOption] = useState(\"silver-lining\");\n\n const [frontSelectorImages, setFrontSelectorImages] = useState([]);\n\n const [backSelectorImages, setBackSelectorImages] = useState([]);\n\n const [frontImages, setFrontImages] = useState([]);\n const [backImages, setBackImages] = useState([]);\n const [fontStyleList, setFontStyleList] = useState([\n \"EB Garamond\",\n \"Lato\",\n \"Libre Caslon Text\",\n \"Merriweather\",\n \"Noto Sans Georgian\",\n \"Open Sans\",\n \"Roboto\",\n \"Ubuntu\",\n ]);\n\n const [cardStyle, setCardStyle] = useState(\"\");\n\n const [cardFrontRef, setCardFrontRef] = useState(\"\");\n const [cardBackRef, setCardBackRef] = useState(\"\");\n\n const [frontCardElement, setFrontCardElement] = useState(\"\");\n const [backCardElement, setBackCardElement] = useState(\"\");\n\n const [imageTouched, setImageTouched] = useState({\n touched: false,\n index: 0,\n });\n\n const [qrCodeStyleData, setQrCodeStyleData] = useState({\n position: { x: 250, y: 75 },\n size: { width: 100, height: 100 },\n });\n\n useEffect(() => {\n const updateDimensions = () => {\n const cardBackElement = document.getElementById(\"card-display-back\");\n\n if (cardBackElement) {\n const width = cardBackElement.offsetWidth;\n const height = cardBackElement.offsetHeight;\n if (props.isBasicCard) {\n setQrCodeStyleData({\n size:\n width < 250\n ? { width: 50, height: 50 }\n : { width: 100, height: 100 },\n position:\n width < 250\n ? { x: (width - 50) / 2, y: (height - 50) / 2 }\n : { x: (width - 100) / 2, y: (height - 100) / 2 },\n });\n } else {\n setQrCodeStyleData({\n size:\n width < 250\n ? { width: 50, height: 50 }\n : { width: 100, height: 100 },\n position:\n width < 250\n ? { x: width - 60, y: (height - 50) / 2 }\n : { x: width - 120, y: (height - 100) / 2 },\n });\n }\n }\n };\n\n updateDimensions();\n\n window.addEventListener(\"resize\", updateDimensions);\n\n return () => {\n window.removeEventListener(\"resize\", updateDimensions);\n };\n }, [cardSide]);\n\n useEffect(() => {\n if (cardFrontRef !== null && cardFrontRef !== undefined)\n setFrontCardElement(cardFrontRef);\n if (cardBackRef !== null && cardBackRef !== undefined)\n setBackCardElement(cardBackRef);\n }, [cardFrontRef, cardBackRef]);\n\n const initialValue = [\n {\n id: 1,\n color: \"#808080\",\n fontSize: 16,\n text: \"\",\n position: { x: 0, y: 0 },\n font: \"EB Garamond\",\n fontWeight: 500,\n },\n {\n id: 2,\n color: \"#808080\",\n fontSize: 16,\n text: \"\",\n position: { x: 0, y: 0 },\n font: \"EB Garamond\",\n fontWeight: 500,\n },\n ];\n\n const [frontText, setFrontText] = useState(initialValue);\n const [backText, setBackText] = useState(initialValue);\n\n useEffect(() => {\n props.designAssistanceChecked === true && props.onHide();\n }, [props]);\n\n useEffect(() => {\n const cardId = props?.data?.id;\n if (cardId === 4) setCardStyle(\"matte-black\");\n else if (cardId === 5) setCardStyle(\"white\");\n else if (cardId === 6) setCardStyle(\"glass-black\");\n }, [props]);\n\n const handleDataChange = (index, key, val) => {\n if (cardSide === \"front\") {\n const data = [...frontText];\n data[index] = { ...data[index], [key]: val };\n setFrontText(data);\n } else if (cardSide === \"back\") {\n const data = [...backText];\n data[index] = { ...data[index], [key]: val };\n setBackText(data);\n }\n };\n\n const cardData = () => {\n if (cardSide === \"front\") return frontText;\n else if (cardSide === \"back\") return backText;\n };\n\n const displayImageCard = (images) => {\n const imageArray = [];\n for (let i = 0; i < 4; i++) {\n if (images[i]) imageArray.push(images[i]);\n else imageArray.push(null);\n }\n return imageArray;\n };\n\n const cardImageData = () => {\n if (cardSide === \"front\") return displayImageCard(frontSelectorImages);\n else if (cardSide === \"back\") return displayImageCard(backSelectorImages);\n };\n\n const addCardText = () => {\n if (cardSide === \"front\") {\n setFrontText([\n ...frontText,\n { ...initialValue[0], id: frontText.length + 1 },\n ]);\n } else if (cardSide === \"back\") {\n setBackText([\n ...backText,\n { ...initialValue[0], id: frontText.length + 1 },\n ]);\n }\n };\n\n const handleDeleteText = (index) => {\n if (cardSide === \"front\") {\n const data = [...frontText];\n data.splice(index, 1);\n setFrontText(data);\n } else if (cardSide === \"back\") {\n const data = [...backText];\n data.splice(index, 1);\n setBackText(data);\n }\n };\n\n const handleDeleteSelectorImage = (index) => {\n if (cardSide === \"front\") {\n const data = [...frontSelectorImages];\n data.splice(index, 1);\n setFrontSelectorImages(data);\n } else if (cardSide === \"back\") {\n const data = [...backSelectorImages];\n data.splice(index, 1);\n setBackSelectorImages(data);\n }\n };\n\n const handleImageUpload = async (event) => {\n const file = event.target.files[0];\n let fileReader = new FileReader();\n fileReader.onload = function (e) {\n if (cardSide === \"front\") {\n setFrontSelectorImages([...frontSelectorImages, e.target.result]);\n } else if (cardSide === \"back\") {\n setBackSelectorImages([...backSelectorImages, e.target.result]);\n }\n };\n fileReader.readAsDataURL(file);\n };\n\n const cardBackImage = {\n \"matte-black\": mattBlack,\n white: minimalWhite,\n \"glass-black\": glossBlack,\n };\n\n const handleDownloadCard = async () => {\n async function downloadElement(cardElement, name) {\n const card = await cardElement?.cloneNode(true);\n if (card) {\n const tempCard = document.body.appendChild(card);\n const canvas = await html2canvas(tempCard);\n const cardImageURL = canvas.toDataURL(\"image/png\");\n const a = document.createElement(\"a\");\n a.href = cardImageURL;\n a.download = `${name}.png`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n document.body.removeChild(tempCard);\n }\n }\n\n function downloadImage(cardImagePath, name) {\n const a = document.createElement(\"a\");\n a.href = cardImagePath;\n a.download = `${name}.png`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n }\n\n await downloadElement(frontCardElement, \"cardImage-front\");\n backCardElement\n ? await downloadElement(backCardElement, \"cardImage-back\")\n : downloadImage(cardBackImage[cardStyle], \"cardImage-back\");\n };\n\n const addImageToCard = (index) => {\n if (cardSide === \"front\") {\n setFrontImages([\n ...frontImages,\n {\n image: frontSelectorImages[index],\n position: { x: 0, y: 0 },\n size: { width: 60, height: 40 },\n },\n ]);\n }\n if (cardSide === \"back\") {\n setBackImages([\n ...backImages,\n {\n image: backSelectorImages[index],\n position: { x: 0, y: 0 },\n size: { width: 60, height: 40 },\n },\n ]);\n }\n };\n\n const readCard = async (cardElement) => {\n const card = await cardElement?.cloneNode(true);\n if (card) {\n document.body.appendChild(card);\n const canvas = await html2canvas(card);\n const cardImageURL = canvas.toDataURL(\"image/png\");\n document.body.removeChild(card);\n return cardImageURL;\n }\n };\n\n const readCardImage = async (image = minimalWhite) => {\n const data = await fetch(image);\n const response = await data.arrayBuffer();\n const file = new Blob([response], { type: \"image/png\" });\n return new Promise((resolve, reject) => {\n let fileReader = new FileReader();\n fileReader.onload = function (e) {\n resolve(e.target.result);\n };\n fileReader.readAsDataURL(file);\n });\n };\n\n const handleSave = async () => {\n let valid = false;\n const filteredFrontText = frontText.filter((data) => {\n if (data.text) valid = true;\n return data.text;\n });\n\n const filteredBackText = backText.filter((data) => {\n if (data.text) valid = true;\n return data.text;\n });\n\n if (frontImages.length > 0 || backImages.length > 0) {\n valid = true;\n }\n\n const customData = {\n printOption,\n frontTextAndStyle: filteredFrontText,\n backTextAndStyle: filteredBackText,\n frontImage: await readCard(frontCardElement),\n backImage: backCardElement\n ? await readCard(backCardElement)\n : await readCardImage(cardBackImage[cardStyle]),\n frontImageComponents: frontImages,\n backImageComponents: backImages,\n };\n\n if (!valid) {\n toast.error(\"Please add some data\", {\n position: toast.POSITION.TOP_RIGHT,\n autoClose: 3000,\n });\n } else {\n await props.addToCart({ ...props.data, ...customData }, true);\n props.onHide();\n }\n };\n\n return (\n \n \n \n
\n \n \n \n
\n \n
{\" \"}\n
\n
\n\n We are known for our lightning-fast ⚡ support.
\n\n Fill the form below or send us a message anywhere. We’ll get back\n ASAP!\n
\n{\" \"}\n
\n
\n
\n\n \n \n\n
\n \n \n
\n \n
\n\n \n
\n Contact Info
\nEmail : info@connct.ai
\nPhone : +91 725 995 7875
\n\n
\n Address
\n\n #206, 1st floor, Oxford towers, Kodihallii Bangalore\n -560008\n
\n\n
\n \n
\n
\n
Customization
\n \n
\n \n {cardSide === \"front\" ? (\n \n setCardSide(\"back\")}\n >\n
\n \n
\n\n \n setCardSide(\"front\")}\n >\n
\n Front Side
\n Back Side
\n \n
\n \n ) : (\n \n setCardFrontRef(ref)}\n className={`card-display`}\n style={{ backgroundColor: props?.data?.cardColor }}\n onDragStart={(e) => {\n e.preventDefault();\n }}\n onDragOver={(e) => {\n e.preventDefault();\n }}\n onDrop={(e) => {\n const dropImageIndex =\n e.dataTransfer.getData(\"imageIndex\");\n setFrontImages([\n ...frontImages,\n {\n image: frontSelectorImages[dropImageIndex],\n position: { x: 0, y: 0 },\n size: { width: 60, height: 40 },\n },\n ]);\n }}\n >\n {frontImages?.length > 0 &&\n frontImages?.map((frontImage, index) => (\n {\n const data = [...frontImages];\n data[index].position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setFrontImages(data);\n }}\n position={frontImage?.position}\n >\n {\n const data = [...frontImages];\n data[index].size = {\n width: ref.style.width,\n height: ref.style.height,\n };\n setFrontImages(data);\n }}\n style={\n imageTouched?.index === index &&\n imageTouched?.touched === true\n ? {\n cursor: \"pointer\",\n position: \"absolute\",\n border: \"2px solid blue\",\n }\n : {\n cursor: \"pointer\",\n position: \"absolute\",\n }\n }\n className={\"draggable-image\"}\n onTouchStart={(e) => {\n setImageTouched({\n touched: true,\n index,\n });\n }}\n >\n \n setFrontImages([\n ...frontImages.filter(\n (frontImage, imgIndex) =>\n imgIndex !== index\n ),\n ])\n }\n onTouchStart={() =>\n setFrontImages([\n ...frontImages.filter(\n (frontImage, imgIndex) =>\n imgIndex !== index\n ),\n ])\n }\n style={\n imageTouched?.index === index &&\n imageTouched?.touched === true\n ? {\n color: \"red\",\n visibility: \"visible\",\n }\n : {\n color: \"red\",\n }\n }\n >\n \n \n ))}\n {frontText?.map((textData, index) => (\n {\n const data = [...frontText];\n data[index].position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setFrontText(data);\n }}\n position={textData?.position}\n >\n \n {textData.text}\n \n \n ))}\n
\n \n
\n \n )}\n\n \n {\n setCardBackRef(ref);\n }}\n id=\"card-display-back\"\n className={`card-display`}\n style={{ backgroundColor: props?.data?.cardColor }}\n onDragStart={(e) => {\n e.preventDefault();\n }}\n onDragOver={(e) => {\n e.preventDefault();\n }}\n onDrop={(e) => {\n const dropImageIndex =\n e.dataTransfer.getData(\"imageIndex\");\n setBackImages([\n ...backImages,\n {\n image: backSelectorImages[dropImageIndex],\n position: { x: 0, y: 0 },\n size: { width: 60, height: 40 },\n },\n ]);\n }}\n >\n {backImages?.length > 0 &&\n backImages?.map((backImage, index) => (\n {\n const data = [...backImages];\n data[index].position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setBackImages(data);\n }}\n position={backImage?.position}\n >\n {\n const data = [...backImages];\n data[index].size = {\n width: ref.style.width,\n height: ref.style.height,\n };\n setBackImages(data);\n }}\n style={\n imageTouched?.index === index &&\n imageTouched?.touched === true\n ? {\n cursor: \"pointer\",\n position: \"absolute\",\n border: \"2px solid blue\",\n }\n : {\n cursor: \"pointer\",\n position: \"absolute\",\n }\n }\n className={\"draggable-image\"}\n onTouchStart={(e) => {\n setImageTouched({\n touched: true,\n index,\n });\n }}\n >\n \n setBackImages([\n ...backImages.filter(\n (backImage, imgIndex) =>\n imgIndex !== index\n ),\n ])\n }\n onTouchStart={() =>\n setBackImages([\n ...backImages.filter(\n (backImage, imgIndex) =>\n imgIndex !== index\n ),\n ])\n }\n >\n \n \n ))}\n {backText?.map((textData, index) => (\n {\n const data = [...backText];\n data[index].position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setBackText(data);\n }}\n position={textData?.position}\n >\n \n {textData.text}\n \n \n ))}\n {\n const data = { ...qrCodeStyleData };\n data.position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setQrCodeStyleData(data);\n }}\n position={qrCodeStyleData?.position}\n >\n {\n const data = { ...qrCodeStyleData };\n data.size = {\n width: ref.style.width,\n height: ref.style.height,\n };\n setQrCodeStyleData(data);\n }}\n style={{\n backgroundImage: `url(${qrCode})`,\n backgroundSize: \"contain\",\n backgroundRepeat: \"no-repeat\",\n cursor: \"pointer\",\n borderRadius: \"6px\",\n position: \"absolute\",\n }}\n lockAspectRatio={true}\n className={\"draggable-image\"}\n >\n \n
\n \n setActivePage(\"print\")}\n className={`nav-item ${activePage === \"print\" && \"active\"}`}\n >\n Print option\n
\n \n setActivePage(\"text\")}\n className={`nav-item ${activePage === \"text\" && \"active\"}`}\n >\n Text\n
\n \n {cardData()?.map((textData, index) => (\n
\n ))}\n \n \n handleDataChange(index, \"text\", e.target.value)\n }\n />\n
\n \n
\n )}\n \n \n
\n \n \n {\n handleDataChange(index, \"font\", e.target.value);\n }}\n >\n {fontStyleList?.map((style, index) => (\n \n {style}\n \n ))}\n \n
\n \n \n \n handleDataChange(\n index,\n \"fontWeight\",\n parseInt(e.target.value)\n )\n }\n >\n \n \n Normal\n \n \n \n
\n \n \n \n handleDataChange(\n index,\n \"fontSize\",\n e.target.value\n )\n }\n />\n
\n \n \n \n handleDataChange(index, \"color\", e.target.value)\n }\n />\n
\n \n
\n \n )}\n {activePage === \"print\" && (\n +
\n Add a new Text field
\n \n setPrintOption(\"gold-lining\")}\n >\n
\n\n \n setPrintOption(\"silver-lining\")}\n >\n
\n\n \n {printOption === \"gold-lining\" && (\n
\n \n )}\n {activePage === \"upload\" && (\n \n
\n )}\n\n {printOption === \"silver-lining\" && (\n \n
\n )}\n {printOption === \"color\" && (\n \n
\n )}\n \n
\n \n )}\n \n \n \n \n \n \n {cardImageData()?.map((image, index) =>\n image ? (\n {\n if (props.isBasicCard) {\n toast.info(\" Uploading the Images for Basic Cards are Disabled.\", {\n position: \"top-right\",\n autoClose: 9000,\n hideProgressBar: false,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n });\n }\n }}\n style={\n props.isBasicCard\n ? {\n backgroundColor: \"#ddd\",\n color: \"#ddd\",\n cursor: \"not-allowed\",\n }\n : {\n backgroundColor: \"#fff\",\n color: \"#000\",\n cursor: \"pointer\",\n }\n }\n >\n \n +\n
\n \n )\n )}\n \n \n e.dataTransfer.setData(\"imageIndex\", index)\n }\n onDoubleClick={() => addImageToCard(index)}\n />\n handleDeleteSelectorImage(index)}\n >\n
\n ) : (\n \n \n Need any design assistance\n \n
\n \n \n \n
\n \n \n );\n};\n\nexport default CustomizeCard;\n","import React from 'react';\nimport './Downloadconnct.css';\n\nconst Downloadconnct = () => {\n return (\n \n
\n
\n );\n};\n\nexport default Downloadconnct;\n","import React from 'react'\nimport './Enterprise.css';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheckCircle } from '@fortawesome/free-solid-svg-icons';\nimport { Helmet } from 'react-helmet';\n\nconst Enterprise = () => {\n return (\n \n
Scan with your phone to download Connct
\n\n })
\n
\n \n \n
\n \n Digital Business Card for Enterprise | Connct \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n )\n}\n\nexport default Enterprise","import React,{useState} from 'react'\nimport './Faq.css';\nimport { Helmet } from 'react-helmet';\n\nconst Faq = () => {\n const [activeTab,setActiveTab] = useState('home'); \n return (\n \n \n
\n
\n \n
\n
\n
\n \n {/* Breadcrumb navigation commented out */}\n
Track your team's networking performance
\nEquip your team with the next-gen NFC cards and track all their networking performance in one go.
\n\n
\n
\n \n \n
\n \n
\n
\n \n Drop us an email to equip your team with Conncts' customized one-tap digital business cards in your brand's\n style & improve your team’s networking ROI.
\n
\n
\n \n \n
\n
\n Get Started\n
\n\n\n \n
\n \n
\n Download all your leads
\nDownload all your contacts directly from your connection list.
\n\n
\n \n
\n Eliminate paper wastage
\nEvery time one team member switches to connect, you take one step towards saving Trees.
\n\n
\n \n
\n Track networking efforts
\nTrack your whole team’s networking performance, calculating overall ROI.
\n\n
Set your team with the most-advanced digital visiting card and see the networking ROI jump\n in no time.
\n\n Get Started\n
\n })
\n
\n \n \n
\n \n Real-time Advanced Analytics. Brand-styled
\n
\n Real-time Advanced Analytics. Brand-styled visiting card design. Standardized employee\n profiles
\n \n
\n \n Digital Business Card FAQ: Answers to Your Burning Questions \n \n \n \n \n \n \n \n
\n )\n}\n\nexport default Faq","export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","import invariant from 'invariant';\n\nvar noop = function noop() {};\n\nfunction readOnlyPropType(handler, name) {\n return function (props, propName) {\n if (props[propName] !== undefined) {\n if (!props[handler]) {\n return new Error(\"You have provided a `\" + propName + \"` prop to `\" + name + \"` \" + (\"without an `\" + handler + \"` handler prop. This will render a read-only field. \") + (\"If the field should be mutable use `\" + defaultKey(propName) + \"`. \") + (\"Otherwise, set `\" + handler + \"`.\"));\n }\n }\n };\n}\n\nexport function uncontrolledPropTypes(controlledValues, displayName) {\n var propTypes = {};\n Object.keys(controlledValues).forEach(function (prop) {\n // add default propTypes for folks that use runtime checks\n propTypes[defaultKey(prop)] = noop;\n\n if (process.env.NODE_ENV !== 'production') {\n var handler = controlledValues[prop];\n !(typeof handler === 'string' && handler.trim().length) ? process.env.NODE_ENV !== \"production\" ? invariant(false, 'Uncontrollable - [%s]: the prop `%s` needs a valid handler key name in order to make it uncontrollable', displayName, prop) : invariant(false) : void 0;\n propTypes[prop] = readOnlyPropType(handler, displayName);\n }\n });\n return propTypes;\n}\nexport function isProp(props, prop) {\n return props[prop] !== undefined;\n}\nexport function defaultKey(key) {\n return 'default' + key.charAt(0).toUpperCase() + key.substr(1);\n}\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\nexport function canAcceptRef(component) {\n return !!component && (typeof component !== 'function' || component.prototype && component.prototype.isReactComponent);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\n\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return typeof key === \"symbol\" ? key : String(key); }\n\nfunction _toPrimitive(input, hint) { if (typeof input !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (typeof res !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\n\nimport { useCallback, useRef, useState } from 'react';\nimport * as Utils from './utils';\n\nfunction useUncontrolledProp(propValue, defaultValue, handler) {\n var wasPropRef = useRef(propValue !== undefined);\n\n var _useState = useState(defaultValue),\n stateValue = _useState[0],\n setState = _useState[1];\n\n var isProp = propValue !== undefined;\n var wasProp = wasPropRef.current;\n wasPropRef.current = isProp;\n /**\n * If a prop switches from controlled to Uncontrolled\n * reset its value to the defaultValue\n */\n\n if (!isProp && wasProp && stateValue !== defaultValue) {\n setState(defaultValue);\n }\n\n return [isProp ? propValue : stateValue, useCallback(function (value) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n if (handler) handler.apply(void 0, [value].concat(args));\n setState(value);\n }, [handler])];\n}\n\nexport { useUncontrolledProp };\nexport default function useUncontrolled(props, config) {\n return Object.keys(config).reduce(function (result, fieldName) {\n var _extends2;\n\n var _ref = result,\n defaultValue = _ref[Utils.defaultKey(fieldName)],\n propsValue = _ref[fieldName],\n rest = _objectWithoutPropertiesLoose(_ref, [Utils.defaultKey(fieldName), fieldName].map(_toPropertyKey));\n\n var handlerName = config[fieldName];\n\n var _useUncontrolledProp = useUncontrolledProp(propsValue, defaultValue, props[handlerName]),\n value = _useUncontrolledProp[0],\n handler = _useUncontrolledProp[1];\n\n return _extends({}, rest, (_extends2 = {}, _extends2[fieldName] = value, _extends2[handlerName] = handler, _extends2));\n }, props);\n}","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nfunction componentWillMount() {\n // Call this.constructor.gDSFP to support sub-classes.\n var state = this.constructor.getDerivedStateFromProps(this.props, this.state);\n if (state !== null && state !== undefined) {\n this.setState(state);\n }\n}\n\nfunction componentWillReceiveProps(nextProps) {\n // Call this.constructor.gDSFP to support sub-classes.\n // Use the setState() updater to ensure state isn't stale in certain edge cases.\n function updater(prevState) {\n var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);\n return state !== null && state !== undefined ? state : null;\n }\n // Binding \"this\" is important for shallow renderer support.\n this.setState(updater.bind(this));\n}\n\nfunction componentWillUpdate(nextProps, nextState) {\n try {\n var prevProps = this.props;\n var prevState = this.state;\n this.props = nextProps;\n this.state = nextState;\n this.__reactInternalSnapshotFlag = true;\n this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(\n prevProps,\n prevState\n );\n } finally {\n this.props = prevProps;\n this.state = prevState;\n }\n}\n\n// React may warn about cWM/cWRP/cWU methods being deprecated.\n// Add a flag to suppress these warnings for this special case.\ncomponentWillMount.__suppressDeprecationWarning = true;\ncomponentWillReceiveProps.__suppressDeprecationWarning = true;\ncomponentWillUpdate.__suppressDeprecationWarning = true;\n\nfunction polyfill(Component) {\n var prototype = Component.prototype;\n\n if (!prototype || !prototype.isReactComponent) {\n throw new Error('Can only polyfill class components');\n }\n\n if (\n typeof Component.getDerivedStateFromProps !== 'function' &&\n typeof prototype.getSnapshotBeforeUpdate !== 'function'\n ) {\n return Component;\n }\n\n // If new component APIs are defined, \"unsafe\" lifecycles won't be called.\n // Error if any of these lifecycles are present,\n // Because they would work differently between older and newer (16.3+) versions of React.\n var foundWillMountName = null;\n var foundWillReceivePropsName = null;\n var foundWillUpdateName = null;\n if (typeof prototype.componentWillMount === 'function') {\n foundWillMountName = 'componentWillMount';\n } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {\n foundWillMountName = 'UNSAFE_componentWillMount';\n }\n if (typeof prototype.componentWillReceiveProps === 'function') {\n foundWillReceivePropsName = 'componentWillReceiveProps';\n } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {\n foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';\n }\n if (typeof prototype.componentWillUpdate === 'function') {\n foundWillUpdateName = 'componentWillUpdate';\n } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {\n foundWillUpdateName = 'UNSAFE_componentWillUpdate';\n }\n if (\n foundWillMountName !== null ||\n foundWillReceivePropsName !== null ||\n foundWillUpdateName !== null\n ) {\n var componentName = Component.displayName || Component.name;\n var newApiName =\n typeof Component.getDerivedStateFromProps === 'function'\n ? 'getDerivedStateFromProps()'\n : 'getSnapshotBeforeUpdate()';\n\n throw Error(\n 'Unsafe legacy lifecycles will not be called for components using new component APIs.\\n\\n' +\n componentName +\n ' uses ' +\n newApiName +\n ' but also contains the following legacy lifecycles:' +\n (foundWillMountName !== null ? '\\n ' + foundWillMountName : '') +\n (foundWillReceivePropsName !== null\n ? '\\n ' + foundWillReceivePropsName\n : '') +\n (foundWillUpdateName !== null ? '\\n ' + foundWillUpdateName : '') +\n '\\n\\nThe above lifecycles should be removed. Learn more about this warning here:\\n' +\n 'https://fb.me/react-async-component-lifecycle-hooks'\n );\n }\n\n // React <= 16.2 does not support static getDerivedStateFromProps.\n // As a workaround, use cWM and cWRP to invoke the new static lifecycle.\n // Newer versions of React will ignore these lifecycles if gDSFP exists.\n if (typeof Component.getDerivedStateFromProps === 'function') {\n prototype.componentWillMount = componentWillMount;\n prototype.componentWillReceiveProps = componentWillReceiveProps;\n }\n\n // React <= 16.2 does not support getSnapshotBeforeUpdate.\n // As a workaround, use cWU to invoke the new lifecycle.\n // Newer versions of React will ignore that lifecycle if gSBU exists.\n if (typeof prototype.getSnapshotBeforeUpdate === 'function') {\n if (typeof prototype.componentDidUpdate !== 'function') {\n throw new Error(\n 'Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype'\n );\n }\n\n prototype.componentWillUpdate = componentWillUpdate;\n\n var componentDidUpdate = prototype.componentDidUpdate;\n\n prototype.componentDidUpdate = function componentDidUpdatePolyfill(\n prevProps,\n prevState,\n maybeSnapshot\n ) {\n // 16.3+ will not execute our will-update method;\n // It will pass a snapshot value to did-update though.\n // Older versions will require our polyfilled will-update value.\n // We need to handle both cases, but can't just check for the presence of \"maybeSnapshot\",\n // Because for <= 15.x versions this might be a \"prevContext\" object.\n // We also can't just check \"__reactInternalSnapshot\",\n // Because get-snapshot might return a falsy value.\n // So check for the explicit __reactInternalSnapshotFlag flag to determine behavior.\n var snapshot = this.__reactInternalSnapshotFlag\n ? this.__reactInternalSnapshot\n : maybeSnapshot;\n\n componentDidUpdate.call(this, prevProps, prevState, snapshot);\n };\n }\n\n return Component;\n}\n\nexport { polyfill };\n","\"use client\";\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport divWithClassName from './divWithClassName';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DivStyledAsH4 = divWithClassName('h4');\nDivStyledAsH4.displayName = 'DivStyledAsH4';\nconst AlertHeading = /*#__PURE__*/React.forwardRef(({\n className,\n bsPrefix,\n as: Component = DivStyledAsH4,\n ...props\n}, ref) => {\n bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-heading');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(className, bsPrefix),\n ...props\n });\n});\nAlertHeading.displayName = 'AlertHeading';\nexport default AlertHeading;","import { useState } from 'react';\nimport useEffect from './useIsomorphicEffect';\nconst targetMap = new WeakMap();\nlet resizeObserver;\nfunction getResizeObserver() {\n // eslint-disable-next-line no-return-assign\n return resizeObserver = resizeObserver || new window.ResizeObserver(entries => {\n entries.forEach(entry => {\n const handler = targetMap.get(entry.target);\n if (handler) handler(entry.contentRect);\n });\n });\n}\n\n/**\n * Efficiently observe size changes on an element. Depends on the `ResizeObserver` api,\n * and polyfills are needed in older browsers.\n *\n * ```ts\n * const [ref, attachRef] = useCallbackRef(null);\n *\n * const rect = useResizeObserver(ref);\n *\n * return (\n * \n \n
\n
\n \n
\n\n \n
\n \n
Frequently Asked Questions
\n\n\n
\n
\n \n \n
\n - \n
- \n \n \n
- \n \n \n
- \n \n \n
\n
\n\n \n
\n\n \n\n
\n \n \n
\n \n \n
\n\n
\n \n
\n The Connct card has an NFC chip inside that wirelessly sends your\n information. If you tap the card on compatible phones, a link will\n open up with all your information. Ready to be saved to the phone.\n For older phones that don't have NFC, there is a QR code on the back\n of your digital card.
\n\n\n
\n \n \n
\n\n
\n \n
\n You do not require a monthly fee. Just a one-time payment for the\n digital business card.\n\n However, the upgrade to advanced features requires a subscription\n fee which is completely optional.\n\n You can check prices for all the NFC cards here
\n\n\n
\n \n \n
\n\n
\n \n
\n It will take 3-5 business days after the order is placed.
\n\n\n
\n \n\n
\n \n
\n \n \n
\n\n
\n \n
\n No, The other person doesn’t have to have the card or the app. They\n just need a phone compatible with Connct, which most phones usually\n are. But in the rare case they don’t, just share your QR code to\n send all your important info via your Connct profile.
\n\n\n
\n \n \n
\n\n
\n \n
\n Almost all the latest android phones & iPhones after 7 are compatible\n with Connct. But you can check the list of devices here,\n just to be sure.\n
\n\n\n
\n \n \n
\n\n
\n \n
\n Absolutely ! We have an in-house designer that will take care of all\n the customization for your Connct card as per your brand guidelines.\n You can check our range of custom cards here.\n
\n\n
\n \n \n
\n\n
\n \n\n
\n - \n
- Go to Settings. \n
- Click on “Activate account”. \n
- Enter the activation key [ You will receive it in your email /\n you will get the activation key with your Connct Card]. \n
- Now to go “Link card” , Click on “Link Now” , Place your Connct\n card behind the phone till you get the success message. \n
\n
\n \n\n
\n \n
\n \n \n
\n\n
\n \n
\n With the pro version, you unlock premium features in addition to the\n standard features like –
\n- \n
- Switching between different profiles \n
- Varied profile themes \n
- Custom Icons & Titles \n
- Multiple social media profiles \n
- Media Gallery \n
- Advanced Analytics \n
\n
\n \n \n
\n\n
\n \n
\n My Contact is the list of all your connections who have shared their\n information with you on your Connct profile. You can download all\n the contacts and integrate it with your CRM for better conversion.\n
\n\n\n
\n \n \n
\n\n
\n \n
\n You can share your contact information by scanning the QR code\n printed on your digital visiting card or opening the QR code from\n the app installed on your phone.
\n Alternatively, you can share your profile via text, email, or any\n social media with a link.\n\n
\n
\n \n \n
\n\n
\n \n\n
\n Yes, you can change your details in real-time to fit every\n Interaction. You can also enable and disable any details that you\n want to share.
\n\n\n\n
\n \n \n
\n\n
\n \n\n
\n Built on advanced tech frameworks, Connct prioritizes data security\n ensuring no unauthorized access to your data. The NFC card only\n works when you tap it on a compatible device and shares only what\n you allow.
\n\n\n\n {/* ----------faqs sidebar------- */}\n
\n \n \n
\n \n }\n)
\n
Phone : +91 725 995 7875\n
\n \n \n Contact Info
\n Email : info@connct.aiPhone : +91 725 995 7875\n
\n }\n)
\n
\n \n Address
\n #206, 1st floor , Oxford towers , Kodihalli\n Bangalore-560008. \n\n
\n * {JSON.stringify(rect)}\n *
\n * )\n * ```\n *\n * @param element The DOM element to observe\n */\nexport default function useResizeObserver(element) {\n const [rect, setRect] = useState(null);\n useEffect(() => {\n if (!element) return;\n getResizeObserver().observe(element);\n setRect(element.getBoundingClientRect());\n targetMap.set(element, rect => {\n setRect(rect);\n });\n return () => {\n targetMap.delete(element);\n };\n }, [element]);\n return rect;\n}","const _excluded = [\"onKeyDown\"];\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/anchor-has-content */\n\nimport * as React from 'react';\nimport { useEventCallback } from '@restart/hooks';\nimport { useButtonProps } from './Button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function isTrivialHref(href) {\n return !href || href.trim() === '#';\n}\n/**\n * An generic `` component that covers a few A11y cases, ensuring that\n * cases where the `href` is missing or trivial like \"#\" are treated like buttons.\n */\nconst Anchor = /*#__PURE__*/React.forwardRef((_ref, ref) => {\n let {\n onKeyDown\n } = _ref,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n const [buttonProps] = useButtonProps(Object.assign({\n tagName: 'a'\n }, props));\n const handleKeyDown = useEventCallback(e => {\n buttonProps.onKeyDown(e);\n onKeyDown == null ? void 0 : onKeyDown(e);\n });\n if (isTrivialHref(props.href) || props.role === 'button') {\n return /*#__PURE__*/_jsx(\"a\", Object.assign({\n ref: ref\n }, props, buttonProps, {\n onKeyDown: handleKeyDown\n }));\n }\n return /*#__PURE__*/_jsx(\"a\", Object.assign({\n ref: ref\n }, props, {\n onKeyDown: onKeyDown\n }));\n});\nAnchor.displayName = 'Anchor';\nexport default Anchor;","\"use client\";\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport Anchor from '@restart/ui/Anchor';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst AlertLink = /*#__PURE__*/React.forwardRef(({\n className,\n bsPrefix,\n as: Component = Anchor,\n ...props\n}, ref) => {\n bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-link');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(className, bsPrefix),\n ...props\n });\n});\nAlertLink.displayName = 'AlertLink';\nexport default AlertLink;","\"use client\";\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport AlertHeading from './AlertHeading';\nimport AlertLink from './AlertLink';\nimport Fade from './Fade';\nimport CloseButton from './CloseButton';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst Alert = /*#__PURE__*/React.forwardRef((uncontrolledProps, ref) => {\n const {\n bsPrefix,\n show = true,\n closeLabel = 'Close alert',\n closeVariant,\n className,\n children,\n variant = 'primary',\n onClose,\n dismissible,\n transition = Fade,\n ...props\n } = useUncontrolled(uncontrolledProps, {\n show: 'onClose'\n });\n const prefix = useBootstrapPrefix(bsPrefix, 'alert');\n const handleClose = useEventCallback(e => {\n if (onClose) {\n onClose(false, e);\n }\n });\n const Transition = transition === true ? Fade : transition;\n const alert = /*#__PURE__*/_jsxs(\"div\", {\n role: \"alert\",\n ...(!Transition ? props : undefined),\n ref: ref,\n className: classNames(className, prefix, variant && `${prefix}-${variant}`, dismissible && `${prefix}-dismissible`),\n children: [dismissible && /*#__PURE__*/_jsx(CloseButton, {\n onClick: handleClose,\n \"aria-label\": closeLabel,\n variant: closeVariant\n }), children]\n });\n if (!Transition) return show ? alert : null;\n return /*#__PURE__*/_jsx(Transition, {\n unmountOnExit: true,\n ...props,\n ref: undefined,\n in: show,\n children: alert\n });\n});\nAlert.displayName = 'Alert';\nexport default Object.assign(Alert, {\n Link: AlertLink,\n Heading: AlertHeading\n});","import React, { useState } from \"react\";\nimport \"./Footer.css\";\nimport axios from \"axios\";\nimport { useForm } from \"react-hook-form\";\nimport { Form, Button, Alert } from \"react-bootstrap\";\nimport { FaArrowRight } from \"react-icons/fa\";\n\nconst Footer = () => {\n const {\n register,\n handleSubmit,\n formState: { errors, isSubmitting },\n } = useForm();\n const [loading, setLoading] = useState(false);\n const [successMessage, setSuccessMessage] = useState(\"\");\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [emailValue, setEmailValue] = useState(\"\"); // State for email input value\n\n const onSubmit = async (data) => {\n try {\n setLoading(true);\n await axios.post(\n `${process.env.REACT_APP_BASE_URL}/v1/api/public-api/subscribe-newsletter`,\n data\n );\n setSuccessMessage(\n \"Congratulations You are now Subscribed for our Newsletter\"\n );\n setErrorMessage(\"\");\n setEmailValue(\"\");\n\n setTimeout(() => {\n setSuccessMessage(\"\");\n }, 3000);\n } catch (error) {\n setErrorMessage(error.response?.data?.message || \"An error occurred\");\n setSuccessMessage(\"\");\n setEmailValue(\"\");\n\n setTimeout(() => {\n setErrorMessage(\"\");\n }, 3000);\n } finally {\n setLoading(false);\n }\n };\n\n const handleEmailChange = (e) => {\n setEmailValue(e.target.value); // Update email input value in state\n };\n return (\n \n );\n};\n\nexport default Footer;\n","import React, { useState } from \"react\";\nimport axios from \"axios\";\nimport \"./Login.css\";\nimport { toast } from \"react-toastify\";\nimport \"react-toastify/dist/ReactToastify.css\";\n\nconst Forgotpassword = () => {\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const toggleMenu = () => {\n setIsMenuOpen((prevState) => !prevState);\n };\n\n const verticalLineStyle = {\n borderLeft: \"2px solid lightgray\",\n height: \"80%\",\n position: \"absolute\",\n left: \"-10px\",\n };\n\n let notifyStatus;\n\n const handleSendMail = async (e) => {\n e.preventDefault();\n\n const emailInput = document.getElementById(\"email\");\n const email = emailInput.value;\n\n // Check if the email is empty\n if (!email) {\n // Show an error toast message\n toast.update(notifyStatus, {\n render: \"Error! Please enter your email address.\",\n type: \"error\",\n closeButton: true,\n isLoading: false,\n autoClose: 1000,\n });\n toast.update(\"Error! Please enter your email address.\", {\n position: toast.POSITION.TOP_CENTER,\n });\n return; // Don't proceed with the API call if email is empty\n }\n\n try {\n const response = await axios.post(\n `${process.env.REACT_APP_BASE_URL}/v1/api/auth/forgot-password`,\n { email }\n );\n\n if (response.status === 200) {\n // Show a success toast message\n toast.update(notifyStatus, {\n render:\n \"Success! Reset password email sent to your email successfully\",\n type: \"success\",\n closeButton: true,\n isLoading: false,\n autoClose: 1000,\n });\n toast.success(\n \"Success! Reset password email sent to your email successfully\",\n {\n position: toast.POSITION.TOP_CENTER,\n }\n );\n }\n\n emailInput.value = \"\"; // Clear the input field value after successful submission\n } catch (error) {\n // Handle any errors, e.g., display an error message to the user\n toast.update(notifyStatus, {\n render:\n \"Error! There was an issue sending the reset link. Please try again later.\",\n type: \"error\",\n closeButton: true,\n isLoading: false,\n autoClose: 1000,\n });\n // toast.error(\n // \"Error! There was an issue sending the reset link. Please try again later.\",\n // {\n // position: toast.POSITION.TOP_CENTER,\n // }\n // );\n }\n };\n\n return (\n \n
\n \n\n \n \n \n
\n \n );\n};\n\nexport default Forgotpassword;\n","\"use client\";\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CardBody = /*#__PURE__*/React.forwardRef(({\n className,\n bsPrefix,\n as: Component = 'div',\n ...props\n}, ref) => {\n bsPrefix = useBootstrapPrefix(bsPrefix, 'card-body');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(className, bsPrefix),\n ...props\n });\n});\nCardBody.displayName = 'CardBody';\nexport default CardBody;","\"use client\";\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CardFooter = /*#__PURE__*/React.forwardRef(({\n className,\n bsPrefix,\n as: Component = 'div',\n ...props\n}, ref) => {\n bsPrefix = useBootstrapPrefix(bsPrefix, 'card-footer');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(className, bsPrefix),\n ...props\n });\n});\nCardFooter.displayName = 'CardFooter';\nexport default CardFooter;","\"use client\";\n\nimport * as React from 'react';\nconst context = /*#__PURE__*/React.createContext(null);\ncontext.displayName = 'CardHeaderContext';\nexport default context;","\"use client\";\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport { useMemo } from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport CardHeaderContext from './CardHeaderContext';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CardHeader = /*#__PURE__*/React.forwardRef(({\n bsPrefix,\n className,\n // Need to define the default \"as\" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595\n as: Component = 'div',\n ...props\n}, ref) => {\n const prefix = useBootstrapPrefix(bsPrefix, 'card-header');\n const contextValue = useMemo(() => ({\n cardHeaderBsPrefix: prefix\n }), [prefix]);\n return /*#__PURE__*/_jsx(CardHeaderContext.Provider, {\n value: contextValue,\n children: /*#__PURE__*/_jsx(Component, {\n ref: ref,\n ...props,\n className: classNames(className, prefix)\n })\n });\n});\nCardHeader.displayName = 'CardHeader';\nexport default CardHeader;","\"use client\";\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CardImg = /*#__PURE__*/React.forwardRef(\n// Need to define the default \"as\" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595\n({\n bsPrefix,\n className,\n variant,\n as: Component = 'img',\n ...props\n}, ref) => {\n const prefix = useBootstrapPrefix(bsPrefix, 'card-img');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(variant ? `${prefix}-${variant}` : prefix, className),\n ...props\n });\n});\nCardImg.displayName = 'CardImg';\nexport default CardImg;","\"use client\";\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CardImgOverlay = /*#__PURE__*/React.forwardRef(({\n className,\n bsPrefix,\n as: Component = 'div',\n ...props\n}, ref) => {\n bsPrefix = useBootstrapPrefix(bsPrefix, 'card-img-overlay');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(className, bsPrefix),\n ...props\n });\n});\nCardImgOverlay.displayName = 'CardImgOverlay';\nexport default CardImgOverlay;","\"use client\";\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CardLink = /*#__PURE__*/React.forwardRef(({\n className,\n bsPrefix,\n as: Component = 'a',\n ...props\n}, ref) => {\n bsPrefix = useBootstrapPrefix(bsPrefix, 'card-link');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(className, bsPrefix),\n ...props\n });\n});\nCardLink.displayName = 'CardLink';\nexport default CardLink;","\"use client\";\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport divWithClassName from './divWithClassName';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DivStyledAsH6 = divWithClassName('h6');\nconst CardSubtitle = /*#__PURE__*/React.forwardRef(({\n className,\n bsPrefix,\n as: Component = DivStyledAsH6,\n ...props\n}, ref) => {\n bsPrefix = useBootstrapPrefix(bsPrefix, 'card-subtitle');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(className, bsPrefix),\n ...props\n });\n});\nCardSubtitle.displayName = 'CardSubtitle';\nexport default CardSubtitle;","\"use client\";\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CardText = /*#__PURE__*/React.forwardRef(({\n className,\n bsPrefix,\n as: Component = 'p',\n ...props\n}, ref) => {\n bsPrefix = useBootstrapPrefix(bsPrefix, 'card-text');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(className, bsPrefix),\n ...props\n });\n});\nCardText.displayName = 'CardText';\nexport default CardText;","\"use client\";\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport divWithClassName from './divWithClassName';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DivStyledAsH5 = divWithClassName('h5');\nconst CardTitle = /*#__PURE__*/React.forwardRef(({\n className,\n bsPrefix,\n as: Component = DivStyledAsH5,\n ...props\n}, ref) => {\n bsPrefix = useBootstrapPrefix(bsPrefix, 'card-title');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n className: classNames(className, bsPrefix),\n ...props\n });\n});\nCardTitle.displayName = 'CardTitle';\nexport default CardTitle;","\"use client\";\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport CardBody from './CardBody';\nimport CardFooter from './CardFooter';\nimport CardHeader from './CardHeader';\nimport CardImg from './CardImg';\nimport CardImgOverlay from './CardImgOverlay';\nimport CardLink from './CardLink';\nimport CardSubtitle from './CardSubtitle';\nimport CardText from './CardText';\nimport CardTitle from './CardTitle';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst Card = /*#__PURE__*/React.forwardRef(({\n bsPrefix,\n className,\n bg,\n text,\n border,\n body = false,\n children,\n // Need to define the default \"as\" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595\n as: Component = 'div',\n ...props\n}, ref) => {\n const prefix = useBootstrapPrefix(bsPrefix, 'card');\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n ...props,\n className: classNames(className, prefix, bg && `bg-${bg}`, text && `text-${text}`, border && `border-${border}`),\n children: body ? /*#__PURE__*/_jsx(CardBody, {\n children: children\n }) : children\n });\n});\nCard.displayName = 'Card';\nexport default Object.assign(Card, {\n Img: CardImg,\n Title: CardTitle,\n Subtitle: CardSubtitle,\n Body: CardBody,\n Link: CardLink,\n Text: CardText,\n Header: CardHeader,\n Footer: CardFooter,\n ImgOverlay: CardImgOverlay\n});","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport Card from \"react-bootstrap/Card\";\nimport Button from \"react-bootstrap/Button\";\nimport Container from \"react-bootstrap/Container\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport { Row, Col } from \"react-bootstrap\";\nimport AOS from \"aos\";\nimport \"aos/dist/aos.css\";\nimport \"line-awesome/dist/line-awesome/css/line-awesome.min.css\";\nimport { Helmet } from \"react-helmet\";\nimport \"./Herosection.css\";\nimport { Link } from \"react-router-dom\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheckCircle } from \"@fortawesome/free-solid-svg-icons\";\nimport { useLocationContext } from \"./LocationInterface\";\n\nconst Herosection = () => {\n const [products, setProducts] = useState([]);\n const [selectedProduct, setSelectedProduct] = useState(null);\n\n const { currencySymbol, priceType } = useLocationContext();\n\n useEffect(() => {\n axios\n .get(`${process.env.REACT_APP_BASE_URL}/v1/api/public-api/list-products`)\n .then((response) => {\n setProducts(response.data.cards);\n // Set the default selected product here\n if (response.data.cards.length > 0) {\n setSelectedProduct(response.data.cards[0]);\n }\n })\n .catch((error) => {\n console.error(\"Error fetching products:\", error);\n });\n AOS.init();\n }, []);\n\n if (!Array.isArray(products)) {\n console.error(\n \"Products data is not in the expected array format:\",\n products\n );\n return \n
\n \n
\n\n \n \n
\n Products data is not in the expected format.
;\n }\n\n const displayedProducts = products.slice(0, 3);\n\n const handleProductClick = (product) => {\n setSelectedProduct(product);\n };\n\n const handleCardClick = () => {\n if (selectedProduct) {\n // Redirect to the product details page for the selected product\n window.location.href = `/product-detail/${selectedProduct.slug}`;\n }\n };\n\n // Construct the complete image URL\n const getImageUrl = (imagePath) => {\n return `https://${process.env.REACT_APP_AWS_S3_BUCKET_URL}.s3.ap-south-1.amazonaws.com/${imagePath}`;\n };\n return (\n \n \n \n Connct.ai Digital NFC Business Cards. Revolutionize Networking\n \n \n \n \n \n \n\n \n \n \n \n Share all your contact details & more\n
in three easy steps:\n \n
\n
\n \n \n \n
\n\n \n
\n \n
\n \n
\n \n \n The most powerful business card you will ever own!\n \n
\n \n \n Paperless.\n \n \n \n Seamless.\n \n \n \n Timeless.\n \n
\n \n \n Click to Connect\n 👋\n \n
\n in three easy steps:\n \n
\n \n
\n \n
\n \n \n \n Android, ios, we are everywhere!\n \n
\n
\n \n {\" \"}\n {/* Mobile Icon */}\n
\n Download the app
\n\n
\n \n \n
\n \n
\n
\n \n \n
\n \n {\" \"}\n {/* Profile Icon */}\n
\n \n Create your profile\n
\n\n Showcase your business by adding your contact details,{\" \"}\n
\n social media & other important business info.\n
\n
\n
\n \n \n \n \n \n \n
\n \n {\" \"}\n {/* Link Icon */}\n
\n \n Link your profile to the digital business card\n
\n\n Connect your profile with the ultimate digital\n business card
& be one-tap ready\n
\n
\n \n \n Add{\" \"}\n \n Unlimited\n {\" \"}\n Information. {\" \"}\n \n No apps\n {\" \"}\n required to receive. {\" \"}\n \n Secured\n {\" \"}\n data sharing.\n \n
\n \n\n
\n \n {selectedProduct && (\n \n \n
\n\n {`${selectedProduct.name\n .split(\" \")\n .map(\n (word) => word.charAt(0).toUpperCase() + word.slice(1)\n )\n .join(\" \")}'s styled card with a smooth elegant finish.\n The PVC business card comes with connct’s advanced NFC chip\n technology for one-tap wireless sharing and embedded QR\n code for instant sharing.`}\n \n\n
\n \n )}\n \n \n\n \n
\n \n \n {selectedProduct.name\n .split(\" \")\n .map(\n (word) => word.charAt(0).toUpperCase() + word.slice(1)\n )\n .join(\" \")}\n \n {selectedProduct.name === \"Connct - gloss black\" && (\n \n Most Popular\n \n )}\n
\n\n \n
\n \n {currencySymbol} {selectedProduct[priceType]}\n \n \n
\n \n
\n handleProductClick(displayedProducts[0])}>\n
\n handleProductClick(displayedProducts[1])}>\n
\n handleProductClick(displayedProducts[2])}>\n
\n \n {/* Use Link to create a link to the product list */}\n \n \n See All Products\n \n \n
\n\n \n
\n \n \n
\n \n {\" \"}\n {/* Use col-md-8 to set a maximum width */}\n \n Upgrade to the pro version for\n the ultimate experience with Connct pro.\n \n
\n \n \n
\n\n \n Share-Ready Profile within seconds\n
\n\n\n \n Track your connections in real-time\n \n \n Real-time auto-saving ensures you never lose anyone you\n connect with.\n \n
\n \n
\n \n \n
\n \n Track your customers\n
\n\n
\n
\n \n
\n \n Connect with prospects anytime\n
\n\n
\n
\n \n \n \n
\n \n Download & Integrate to CRM for conversion\n
\n\n
\n \n \n Say goodbye to{\" \"}\n \n bulk business\n {\" \"}\n cards. One tree worth paper{\" \"}\n \n saved every time\n {\" \"}\n you connect. Cards prospects can't lose.\n \n
\n \n \n \n
\n Share your profile with a Link
\n- \n
- \n Update your email signature with your custom URL\n \n
- Share with anyone as a text \n
- Add to your website \n
\n
\n \n \n \n\n \n
\n
\n
\n
\n\n
\n \n \n
\n Share your profile with QR code
\n- \n
- \n For older phones without NFC share your profile with QR{\" \"}\n \n
- Add in zoom meeting background \n
- Download & Display anywhere \n
\n
\n \n \n \n\n \n \n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n The modern professional’s choice of sharing\n information\n
\n \n .Professionals\n
\n\n \n
\n \n Share your portfolio, social links & more with your\n potential clients\n
\n \n .Freelancer\n
\n \n\n \n
\n \n \n Extract the full potential of networking at your event\n with the ultimate digital visiting card.\n
\n \n .Events\n
\n \n\n \n
\n \n \n Share all your business information with your\n potential clients, investors & all the stakeholders.\n
\n \n .Founders\n
\n \n\n \n
\n \n \n Showcase your social links & your proof of work and\n score potential brand deals.{\" \"}\n
\n \n .Content Creators\n
\n \n\n \n
\n \n \n Share your business info with all your walk-ins with\n Connct NFC card.\n
\n \n .Retail\n
\n \n \n \n \n \n \n\n\n \n \n Easy to use and the best way to share your information with\n your potential client. It has worked great when I had to share\n information with them\n \n
\n \n \n \n
\n\n Let’s hear what people say
\n\n \n
\n \n Great Design & Solution!\n
\n\n
\n \n
\n \n
\n Emad
\nEntrepreneur
\n\n
\n \n\n \n \n \n
\n \n );\n};\n\nconst GoogleProvider = () => {\n return (\n \n
\n \n
\n\n \n \n
\n \n
\n \n ) : (\n \n \n
\n \n \n 
\n \n \n
\n \n 
\n
\n \n
\n \n \n )}\n \n setShowDropDown(false)}>\n 
\n \n \n setShowDropDown(false)}>\n 
\n \n
\n setShowDropDown(false)}>\n \n \n \n setShowDropDown(false)}\n >\n 
\n \n setShowDropDown(false)}>\n 
\n \n setShowDropDown(false)}>\n 
\n \n setShowDropDown(false)}>\n 
\n \n setShowDropDown(false)}>\n 
\n \n setShowDropDown(false)}>\n 
\n \n
\n \n {isLoggedIn ? (\n <>\n \n
\n \n \n \n \n Sign Out\n\n
\n setShowDropDown(false)}\n >\n Forgot Password\n \n
\n \n
{authUser}
\n \n \n ) : (\n \n setShowDropDown(false)}\n >\n Login\n \n
\n )}\n - \n
- \n setShowDropDown(false)}>\n
![\"Cart\"]({require(\"../assets/images/cart.png\")})
\n {cartItemLength > 0 && (\n {cartItemLength}\n )}\n \n \n\n - \n
- \n \n\n \n
\n Forgot Password\n{authUser}\n \n \n ) : (\n - \n \n Login\n \n \n )}\n
}){kind=icon}
\n \n \n \n
\n );\n}\n\nexport default Privacy;\n","// Pro.jsx\nimport React, { useEffect } from \"react\";\nimport AOS from \"aos\";\nimport \"aos/dist/aos.css\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport { Link } from \"react-router-dom\";\nimport { Helmet } from \"react-helmet\";\nimport \"./Pro.css\";\nimport \"aos/dist/aos.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheckCircle } from \"@fortawesome/free-solid-svg-icons\";\nimport { useLocationContext } from \"./LocationInterface\";\n\nconst Pro = () => {\n const { currencySymbol, isIndia } = useLocationContext();\n\n useEffect(() => {\n AOS.init();\n }, []);\n return (\n \n
\n
\n \n
\n
\n\n Privacy Policy
\n Last updated: April 11, 2022\n\n
\n This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information\n when You use the Service and tells You about Your privacy rights and how the law protects You.\n
\nWe use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy.
\nInterpretation and Definitions
\nInterpretation
\nThe words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
\nDefinitions
\nFor the purposes of this Privacy Policy:
\n- \n
- \n
Account means a unique account created for You to access our Service or parts of our Service.
\n \n - \n
Affiliate means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.
\n \n - \n
Application means the software program provided by the Company downloaded by You on any electronic device, named Connct
\n \n - \n
Company (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to Connct, India.
\n \n - \n
Country refers to: Karnataka, India
\n \n - \n
Device means any device that can access the Service such as a computer, a cellphone or a digital tablet.
\n \n - \n
Personal Data is any information that relates to an identified or identifiable individual.
\n \n - \n
Service refers to the Application.
\n \n - \n
Service Provider means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used.
\n \n - \n
Third-party Social Media Service refers to any website or any social network website through which a User can log in or create an account to use the Service.
\n \n - \n
Usage Data refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).
\n \n - \n
You means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
\n \n
Collecting and Using Your Personal Data
\nTypes of Data Collected
\nPersonal Data
\nWhile using Our Service, We may ask You to provide Us with certain personally identifiable information that can be used to contact or identify You. Personally identifiable information may include, but is not limited to:
\n- \n
- \n
Email address
\n \n - \n
First name and last name
\n \n - \n
Phone number
\n \n - \n
Address, State, Province, ZIP/Postal code, City
\n \n - \n
Usage Data
\n \n
Usage Data
\nUsage Data is collected automatically when using the Service.
\nUsage Data may include information such as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
\nWhen You access the Service by or through a mobile device, We may collect certain information automatically, including, but not limited to, the type of mobile device You use, Your mobile device unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic data.
\nWe may also collect information that Your browser sends whenever You visit our Service or when You access the Service by or through a mobile device.
\nInformation from Third-Party Social Media Services
\nThe Company allows You to create an account and log in to use the Service through the following Third-party Social Media Services:
\n- \n
If You decide to register through or otherwise grant us access to a Third-Party Social Media Service, We may collect Personal data that is already associated with Your Third-Party Social Media Service's account, such as Your name, Your email address, Your activities or Your contact list associated with that account.
\nYou may also have the option of sharing additional information with the Company through Your Third-Party Social Media Service's account. If You choose to provide such information and Personal Data, during registration or otherwise, You are giving the Company permission to use, share, and store it in a manner consistent with this Privacy Policy.
\nInformation Collected while Using the Application
\nWhile using Our Application, in order to provide features of Our Application, We may collect, with Your prior permission:
\n- \n
- Information regarding your location \n
- Information from your Device's phone book (contacts list) \n
- Pictures and other information from your Device's camera and photo library \n
We use this information to provide features of Our Service, to improve and customize Our Service. The information may be uploaded to the Company's servers and/or a Service Provider's server or it may be simply stored on Your device.
\nYou can enable or disable access to this information at any time, through Your Device settings.
\nUse of Your Personal Data
\nThe Company may use Personal Data for the following purposes:
\n- \n
- \n
To provide and maintain our Service, including to monitor the usage of our Service.
\n \n - \n
To manage Your Account: to manage Your registration as a user of the Service. The Personal Data You provide can give You access to different functionalities of the Service that are available to You as a registered user.
\n \n - \n
For the performance of a contract: the development, compliance and undertaking of the purchase contract for the products, items or services You have purchased or of any other contract with Us through the Service.
\n \n - \n
To contact You: To contact You by email, telephone calls, SMS, or other equivalent forms of electronic communication, such as a mobile application's push notifications regarding updates or informative communications related to the functionalities, products or contracted services, including the security updates, when necessary or reasonable for their implementation.
\n \n - \n
To provide You with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless You have opted not to receive such information.
\n \n - \n
To manage Your requests: To attend and manage Your requests to Us.
\n \n - \n
For business transfers: We may use Your information to evaluate or conduct a merger, divestiture, restructuring, reorganization, dissolution, or other sale or transfer of some or all of Our assets, whether as a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which Personal Data held by Us about our Service users is among the assets transferred.
\n \n - \n
For other purposes: We may use Your information for other purposes, such as data analysis, identifying usage trends, determining the effectiveness of our promotional campaigns and to evaluate and improve our Service, products, services, marketing and your experience.
\n \n
We may share Your personal information in the following situations:
\n- \n
- With Service Providers: We may share Your personal information with Service Providers to monitor and analyze the use of our Service, to contact You. \n
- For business transfers: We may share or transfer Your personal information in connection with, or during negotiations of, any merger, sale of Company assets, financing, or acquisition of all or a portion of Our business to another company. \n
- With Affiliates: We may share Your information with Our affiliates, in which case we will require those affiliates to honor this Privacy Policy. Affiliates include Our parent company and any other subsidiaries, joint venture partners or other companies that We control or that are under common control with Us. \n
- With business partners: We may share Your information with Our business partners to offer You certain products, services or promotions. \n
- With other users: when You share personal information or otherwise interact in the public areas with other users, such information may be viewed by all users and may be publicly distributed outside. If You interact with other users or register through a Third-Party Social Media Service, Your contacts on the Third-Party Social Media Service may see Your name, profile, pictures and description of Your activity. Similarly, other users will be able to view descriptions of Your activity, communicate with You and view Your profile. \n
- With Your consent: We may disclose Your personal information for any other purpose with Your consent. \n
Retention of Your Personal Data
\nThe Company will retain Your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use Your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
\nThe Company will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period of time, except when this data is used to strengthen the security or to improve the functionality of Our Service, or We are legally obligated to retain this data for longer time periods.
\nTransfer of Your Personal Data
\nYour information, including Personal Data, is processed at the Company's operating offices and in any other places where the parties involved in the processing are located. It means that this information may be transferred to — and maintained on — computers located outside of Your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from Your jurisdiction.
\nYour consent to this Privacy Policy followed by Your submission of such information represents Your agreement to that transfer.
\nThe Company will take all steps reasonably necessary to ensure that Your data is treated securely and in accordance with this Privacy Policy and no transfer of Your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of Your data and other personal information.
\nDisclosure of Your Personal Data
\nBusiness Transactions
\nIf the Company is involved in a merger, acquisition or asset sale, Your Personal Data may be transferred. We will provide notice before Your Personal Data is transferred and becomes subject to a different Privacy Policy.
\nLaw enforcement
\nUnder certain circumstances, the Company may be required to disclose Your Personal Data if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency).
\nOther legal requirements
\nThe Company may disclose Your Personal Data in the good faith belief that such action is necessary to:
\n- \n
- Comply with a legal obligation \n
- Protect and defend the rights or property of the Company \n
- Prevent or investigate possible wrongdoing in connection with the Service \n
- Protect the personal safety of Users of the Service or the public \n
- Protect against legal liability \n
Security of Your Personal Data
\nThe security of Your Personal Data is important to Us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While We strive to use commercially acceptable means to protect Your Personal Data, We cannot guarantee its absolute security.
\nChildren's Privacy
\nOur Service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the age of 13 without verification of parental consent, We take steps to remove that information from Our servers.
\nIf We need to rely on consent as a legal basis for processing Your information and Your country requires consent from a parent, We may require Your parent's consent before We collect and use that information.
\nLinks to Other Websites
\nOur Service may contain links to other websites that are not operated by Us. If You click on a third party link, You will be directed to that third party's site. We strongly advise You to review the Privacy Policy of every site You visit.
\nWe have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
\nChanges to this Privacy Policy
\nWe may update Our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page.
\nWe will let You know via email and/or a prominent notice on Our Service, prior to the change becoming effective and update the "Last updated" date at the top of this Privacy Policy.
\nYou are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
\nContact Us
\nIf you have any questions about this Privacy Policy, You can contact us:
\n- \n
- By email: info@connct.ai \n
\n
\n \n \n Unlock Pro Features with your Connct NFC Smart Business cards\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n {/* */}\n \n \n \n
\n\n \n
\n \n \n
\n
\n
\n \n
\n
\n Switch to Business Profile to unlock advanced features\n
\n\n
*/}\n {/* \n {/*
\n {/* */}\n \n \n \n Choose Plan\n \n
\n \n \n \n Standard
\n Plan\n \n
\n\n \n \n Plan\n \n
- \n \n \n
- \n Add Contact Details\n \n
- \n Social Media Links\n \n
- \n One-click contact\n button\n \n
- \n Contact form\n \n
- \n Add any Link\n \n
- \n Advanced Analytics\n \n
*/}\n \n \n Most Popular\n
\n \n \n
\n
\n \n \n \n \n \n Pro\n {\" \"}\n
\n \n \n {currencySymbol}\n \n \n {isIndia ? \"999\" : \"11.97\"}\n \n \n \n /Year\n \n
\n \n \n
- \n
- \n Add Contact Details\n \n
- \n Social Media Links\n \n
- \n One-click contact\n button\n \n
- \n Contact form\n \n
- \n Other links\n \n
- \n Custom Icons & Title\n \n
- \n Advanced Analytics\n \n
- \n Multiple Profiles\n \n
- \n Photos, Videos & Pdfs\n \n
- \n Personalized Icons\n \n
- \n Add Custom Links\n \n \n \n \n
\n
\n \n
\n \n \n \n );\n};\n\nexport default Pro;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport axios from \"axios\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport \"./Productdetail.css\";\nimport { toast } from \"react-toastify\";\nimport \"react-toastify/dist/ReactToastify.css\";\nimport CustomizeCard from \"./CustomizeCard\";\nimport { connctDB } from \"../ConnctDB\";\nimport { useLiveQuery } from \"dexie-react-hooks\";\nimport { v4 as uuid } from \"uuid\";\nimport { IoIosArrowUp, IoIosArrowDown } from \"react-icons/io\";\nimport { useLocationContext } from \"./LocationInterface\";\n\nconst Productdetail = () => {\n const { slug } = useParams();\n // const navigate = useNavigate();\n const [data, setData] = useState(null);\n const [cart, setCart] = useState([]); // Shopping cart state\n const [quantity, setQuantity] = useState(1);\n const [selectedMedia, setSelectedMedia] = useState(null);\n const [isVideo, setIsVideo] = useState(false);\n const [customizeModalShow, setCustomizeModalShow] = useState(false);\n const [designAssistanceChecked, setDesignAssistanceChecked] = useState(false);\n const [activeTab, setActiveTab] = useState(\"home\");\n\n const [isBasicCard, setIsBasicCard] = useState(false);\n\n const [imageHeight, setImageHeight] = useState(0);\n\n const imgRef = useRef(null);\n\n const { currencySymbol, priceType } = useLocationContext();\n\n useEffect(() => {\n const elementHeight = imgRef?.current?.offsetHeight;\n window.addEventListener(\"resize\", () =>\n setImageHeight(imgRef?.current?.offsetHeight)\n );\n return () => {\n window.removeEventListener(\"resize\", setImageHeight(elementHeight));\n };\n }, []);\n\n const cardsData = useLiveQuery(\n () =>\n connctDB.cart\n .where(\"cid\")\n .equals(data?.id || 0)\n .toArray(),\n [data]\n );\n\n const addToCart = async (data, customized = false) => {\n const cardData = cardsData.find(\n (data) => data.designAssistanceChecked === !customized\n );\n const tempCardData = { ...cardData };\n if (Object.keys(tempCardData).length !== 0 && customized === false) {\n tempCardData.addedQuantity += quantity;\n tempCardData.designAssistanceChecked = !customized;\n await connctDB.cart.put(tempCardData);\n } else {\n // Change id to cid, and create unique id to separate customized and un-customized data\n await connctDB.cart.put({\n ...data,\n cid: data.id,\n id: uuid(),\n addedQuantity: +quantity,\n designAssistanceChecked: !customized,\n });\n }\n\n toast.success(\"Success! Product added to cart\", {\n position: toast.POSITION.TOP_RIGHT,\n autoClose: 3000, // 3000 milliseconds (3 seconds)\n });\n\n // **********\n // const existingCartItems = JSON.parse(localStorage.getItem(\"cart\")) || [];\n // let itemExist = false;\n\n // for (const items of existingCartItems) {\n // if (items.id === data.id) {\n // items.addedQuantity += quantity;\n // itemExist = true;\n // }\n // }\n // if (itemExist === false)\n // existingCartItems.push({ ...data, addedQuantity: quantity });\n // const cartItem = existingCartItems.find((item) => item.id === data.id);\n if (tempCardData) {\n tempCardData.designAssistanceChecked = designAssistanceChecked;\n }\n // localStorage.setItem(\"cart\", JSON.stringify(existingCartItems));\n // window.dispatchEvent(new Event(\"storage\"));\n\n // toast.success(\"Success! Product added to cart\", {\n // position: toast.POSITION.TOP_RIGHT,\n // autoClose: 3000, // 3000 milliseconds (3 seconds)\n // });\n // **********\n\n // Find the item in the cart by its ID\n const existingItem = cart.find((item) => item.slug === slug);\n\n const quantityToAdd = parseInt(\n document.querySelector('input[name=\"addedQuantity\"]').value,\n 10\n );\n\n if (existingItem) {\n // If the item is already in the cart, update its quantity\n existingItem.quantity += quantityToAdd;\n setCart([...cart]); // Update the cart state\n } else {\n // If the item is not in the cart, add it as a new item\n const newItem = {\n id: parseInt(data?.id, 10),\n name: data.name,\n price: data[priceType],\n quantity: quantityToAdd || 1, // Use the input quantity or default to 1\n };\n setCart([...cart, newItem]); // Add the new item to the cart state\n }\n };\n const handleDesignAssistanceCheckbox = () => {\n const newDesignAssistanceChecked = !designAssistanceChecked;\n setDesignAssistanceChecked(newDesignAssistanceChecked);\n\n // Update local storage\n localStorage.setItem(\"DesignAssistance\", newDesignAssistanceChecked);\n\n // If you have a backend API, you can make an API call here\n // updateDesignAssistance(newDesignAssistanceChecked);\n };\n\n useEffect(() => {\n const fetchProduct = () => {\n axios\n .get(\n `${process.env.REACT_APP_BASE_URL}/v1/api/public-api/list-products`\n )\n .then((res) => {\n const selectedCard = res.data.cards.find(\n (card) => card.slug === slug\n );\n if (selectedCard) {\n setData(selectedCard);\n if (selectedCard?.price <= 1000) setIsBasicCard(true);\n else setIsBasicCard(false);\n } else {\n console.error(\"Product not found\");\n }\n })\n .catch((err) => {\n console.error(\"Error fetching product details:\", err);\n });\n };\n\n fetchProduct();\n }, [slug]);\n\n if (data === null) {\n return \n
\n\n \n
\n \n
\n \n
\n Advanced Analytics
\n\n Track all the activity your potential customer performs with\n Connct’s advanced analytics.{\" \"}\n
\n\n You can measure ROI by calculating\n
\n- \n
- \n
- \n
- \n
- \n
- \n
\n
\n \n \n
\n \n \n Choose between an array of attractive themes to stand out in the\n crowd.\n \n
\n \n Unlimited Themes\n
\nLoading...
;\n }\n\n const descriptionParagraphs = data?.description\n ?.split(\"\\n\")\n ?.map((paragraph, index) => {paragraph}
);\n\n const imageSources = [\n `https://${process.env.REACT_APP_AWS_S3_BUCKET_URL}.s3.ap-south-1.amazonaws.com/${data.image}`,\n \"URL_OF_GLOSSY_BLACK_CIRCLE_IMAGE\", // Replace with the actual URL\n \"URL_OF_GLOSSY_BLACK_CIRCLE_IMAGE\", // Replace with the actual URL\n ];\n\n const sortImages = () => {\n const imgList = [];\n if (data?.image) imgList.push(data?.image);\n data?.images?.forEach((image) => {\n const imgSplitArray = image.split(\".\");\n if (imgSplitArray[1] === \"gif\") imgList.unshift(image);\n else imgList.push(image);\n });\n return imgList;\n };\n\n return (\n\n {isVideo === false ? (\n
\n \n \n
\n \n {data.name\n .split(\" \")\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(\" \")}\n
\n\n A Classic Matte Finish Black Card\n
\n\n \n Shipping calculated at checkout.*\n \n
\n \n \n {`${currencySymbol} ${data[priceType]}`}\n \n \n 35% off\n \n
\n \n \n Reviews (128)\n \n \n
\n {/* \n {\n setSelectedMedia(null);\n navigate(\"/product-detail/minimalistic-white\");\n }}\n >\n \n Minimalistic White\n \n
\n\n \n <>\n
\n \n \n \n
\n\n \n {\n setQuantity(parseInt(e.target.value));\n }}\n style={{ textAlign: \"center\" }}\n />\n
\n {/* \n \n quantity > 1 && setQuantity((prev) => prev - 1)\n }\n >\n -\n \n
\n \n setQuantity((prev) => prev + 1)}\n >\n +\n \n
\n \n setQuantity(parseInt(e.target.value))}\n style={{ marginLeft: \"0\", width: \"20px\" }}\n />\n
\n \n \n -\n \n
\n \n \n +\n \n
*/}\n \n {/* setModalShow(true)}\n style={{ backgroundColor: \"#f5db7d\" }}\n disabled={designAssistanceChecked} // Disable the button if checkbox is checked\n >\n Customize\n \n setModalShow(false)}\n data={data}\n // addCustomCardData={addCustomCardData}\n addToCart={addToCart}\n designAssistanceChecked={designAssistanceChecked}\n handleDesignAssistanceCheckbox={\n handleDesignAssistanceCheckbox\n }\n /> */}\n setCustomizeModalShow(true)}\n style={{ backgroundColor: \"#f5db7d\" }}\n disabled={designAssistanceChecked} // Disable the button if checkbox is checked\n >\n Customize\n \n setCustomizeModalShow(false)}\n data={data}\n // addCustomCardData={addCustomCardData}\n addToCart={addToCart}\n designAssistanceChecked={designAssistanceChecked}\n handleDesignAssistanceCheckbox={\n handleDesignAssistanceCheckbox\n }\n isBasicCard={isBasicCard}\n />\n
\n \n addToCart(data)}\n style={{ fontSize: \"15px\", borderRadius: \"7px\" }}\n >\n Add To Cart\n \n
\n \n \n
\n
\n
\n
\n \n \n \n \n \n \n \n Description\n \n \n \n \n FAQ\n \n \n \n \n Design Process\n \n \n \n \n
\n \n \n
\n \n
\n {descriptionParagraphs}\n
\n \n {descriptionParagraphs}\n
\n
\n \n
\n \n \n
\n \n
\n \n \n DOES THE OTHER PERSON NEED THE CARD OR AN APP FOR\n YOU TO SHARE INFORMATION?\n \n
\n \n
\n \n No, The other person doesn’t have to have the card\n or the app. They just need a phone compatible with\n Connct, which most phones usually are. But in the\n rare case they don’t, just share your QR code to\n send all your important info via your Connct\n profile.{\" \"}\n
\n\n \n
\n \n
\n \n \n WHAT PHONES ARE COMPATIBLE WITH THE ELECTRONIC\n BUSINESS CARD?\n \n
\n \n
\n \n Almost all the latest android phones & iPhones\n after 7 are compatible with Connct. But you can\n check the list of devices{\" \"}\n here, just to\n be sure.\n
\n\n \n
\n \n
\n \n \n CAN I GET A CUSTOM BUSINESS CARD DESIGN FOR MY\n COMPANY?\n \n
\n \n
\n \n Absolutely ! We have an in-house designer that\n will take care of all the customization for your\n Connct card as per your brand guidelines. You can\n check our range of custom cards{\" \"}\n here.\n
\n\n \n
\n \n
\n \n \n HOW DO I ACTIVATE MY DIGITAL CARD?\n \n
\n \n
\n - \n
- \n Go to Settings.{\" \"}\n \n
- \n Click on “Activate account”.\n \n
- \n Enter the activation key [ You will receive it\n in your email / you will get the activation key\n with your Connct Card].{\" \"}\n \n
- \n Now to go “Link card” , Click on “Link Now” ,\n Place your Connct card behind the phone till you\n get the success message.\n \n
\n
\n {slug.startsWith(\"basic\") ? (\n
\n \n \n \n \n \n {slug.startsWith(\"basic\") ? (\n
\n The Basic option allows you to include text-only\n information on your physical card. Follow these simple\n steps to design your Standard card:\n
\n
\n 1. Select your preferred card type.\n
\n
\n 2. Click on \"Customize\" to begin personalizing.\n
\n
\n 3. Enter your desired text into the designated field.\n
\n
\n 4. Choose your preferred font style, weight, and size,\n then click \"Save.\"\n
\n
\n 5. Please note that while the physical business card has\n text-only capabilities, our digital business card offers\n full customization through our app.\n
\n Our fully customized cards offer unparalleled\n flexibility, allowing you to tailor every aspect of your\n card to your unique brand identity. Here's how to design\n your fully customized card:\n
\n
\n 1. Select your preferred card type.\n
\n
\n 2. Click on \"Customize\" to begin personalizing.\n
\n
\n 3. Customize Text and Graphics: Easily add your company\n logo, name, title, and other details using our intuitive\n tools. Adjust font style, size, color, and positioning\n to your preference.\n
\n
\n 4. Incorporate Brand Colors: Stand out by using your\n brand's colors. Choose from a variety of options to\n maintain consistency with your brand's visual identity.\n
\n
\n 5. Add Images or Graphics: Enhance your card with\n relevant images, graphics, or icons. Upload your own or\n select from our library of high-quality graphics.\n
\n
\n 6. Review and Finalize: Take a moment to review your\n design for accuracy and completeness. Make any necessary\n adjustments before finalizing your card.\n
\n
\n 7. Save and Order: Save your design and proceed to order\n your fully customized cards.\n
\n
\n 8. If you need assistance with the design, click on the\n check box in the product or customization panel and\n place the order. Our Design executive will reach out to\n you, design the card, and print it upon your approval\n
\n Our Professional card offers various templates to choose\n from and customize it with text-only information.\n
\n
\n Here's how to design your Professional card:\n
\n
\n 1. Choose Your Design Template: Start by selecting a\n design template that best reflects your brand's\n aesthetic and personality.\n
\n
\n 2. Customize Text and Graphics: Add your company logo,\n name, title, and any other relevant information using\n our intuitive customization tools. You can adjust the\n font style, size, color, and positioning to your liking.\n
\n
\n 3. Review and Finalize: Take a moment to review your\n design for accuracy and completeness. Make any necessary\n adjustments before finalizing your card.\n
\n
\n 4. Save and Place your order.\n
\n
\n 5. If you want to further customize the card with your\n logo and Graphics, please choose the Customized card\n option\n
Default Design Process
\n )}\n\n \n
\n \n ))\n ) : (\n Basic Cards
\n\n {props?.basicCards?.length > 0 ? (\n props?.basicCards?.map((product, index) => (\n \n handleMouseEnter(index)}\n onMouseLeave={handleMouseLeave}\n style={{\n border: \"1px solid #ccc\",\n padding: \"10px\",\n maxWidth: \"290px\",\n alignSelf: \"flex-start\",\n borderRadius: \"8px\",\n width: \"100%\",\n height: \"100%\",\n }}\n className=\"cardy\"\n >\n {((index % 2 === 0 && hoveredImageIndex !== index) ||\n (index % 2 !== 0 && hoveredImageIndex === index)) &&\n product.images &&\n product.images.length >= 4 ? (\n \n {product.name}\n \n \n \n Price: {currencySymbol} {product[priceType]}\n \n\n handleAddToCart(product)}\n style={{\n background:\n \"linear-gradient(90deg, #04459D 1.87%, #449BFA 95.1%, #348FF2 100%)\",\n borderRadius: \"30px\",\n color: \"white\",\n padding: \"8px 35px\",\n border: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n }}\n >\n Buy Now\n \n
\n No products available
\n )}\n \n \n \n );\n});\n\nexport default Basiccards;\n","import React, { forwardRef, useState } from \"react\";\nimport \"./Productlist.css\";\nimport { Link } from \"react-router-dom\";\nimport { Container } from \"react-bootstrap\";\nimport { useLocationContext } from \"./LocationInterface\";\n\nconst Customcards = forwardRef((props, ref) => {\n const [hoveredImageIndex, setHoveredImageIndex] = useState(-1);\n\n const { currencySymbol, priceType } = useLocationContext();\n\n const handleMouseEnter = (index) => {\n setHoveredImageIndex(index);\n };\n\n const handleMouseLeave = () => {\n setHoveredImageIndex(-1);\n };\n\n const handleAddToCart = (product) => {\n // Implement your logic for adding the product to cart\n };\n\n return (\n\n \n
\n \n ))\n ) : (\n Custom Cards
\n\n {props?.customCards?.length > 0 ? (\n props?.customCards?.map((product, index) => (\n \n handleMouseEnter(index)}\n onMouseLeave={handleMouseLeave}\n style={{\n border: \"1px solid #ccc\",\n padding: \"10px\",\n maxWidth: \"290px\",\n alignSelf: \"flex-start\",\n borderRadius: \"8px\",\n width: \"100%\",\n height: \"100%\",\n }}\n className=\"cardy\"\n >\n {((index % 2 === 0 && hoveredImageIndex !== index) ||\n (index % 2 !== 0 && hoveredImageIndex === index)) &&\n product.images &&\n product.images.length >= 4 ? (\n \n {product.name}\n \n \n \n Price: {currencySymbol} {product[priceType]}\n \n\n handleAddToCart(product)}\n style={{\n background:\n \"linear-gradient(90deg, #04459D 1.87%, #449BFA 95.1%, #348FF2 100%)\",\n borderRadius: \"30px\",\n color: \"white\",\n padding: \"8px 35px\",\n border: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n }}\n >\n Buy Now\n \n
\n No products available
\n )}\n \n \n \n );\n});\n\nexport default Customcards;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { useLocation } from \"react-router-dom\";\nimport Basiccards from \"./Basiccards\";\nimport Customcards from \"./Customcards\";\n\nconst Productlist = () => {\n const { state } = useLocation();\n const [basicCards, setBasicCards] = useState([]);\n const [customCards, setCustomCards] = useState([]);\n\n useEffect(() => {\n fetch(`${process.env.REACT_APP_BASE_URL}/v1/api/public-api/list-products`)\n .then((response) => response.json())\n .then((data) => {\n console.log(\"API Response:\", data);\n if (data && data.cards && Array.isArray(data.cards)) {\n const basicCards = data?.cards?.filter((card, index) => {\n const cardType = card?.slug?.split(\"-\")[0];\n return cardType === \"basic\";\n });\n const customCards = data?.cards?.filter((card, index) => {\n const cardType = card?.slug?.split(\"-\")[0];\n return cardType === \"custom\";\n });\n setBasicCards(basicCards);\n setCustomCards(customCards);\n } else {\n console.error(\"Invalid data format:\", data);\n setBasicCards([]);\n setCustomCards([]);\n }\n })\n .catch((error) => {\n console.error(\"Error fetching data:\", error);\n setBasicCards([]);\n setCustomCards([]);\n });\n }, []);\n\n const basicCardRef = useRef();\n const customCardRef = useRef();\n\n useEffect(() => {\n const timer = setTimeout(() => {\n if (state?.dest === \"basicCards\") {\n basicCardRef.current.scrollIntoView({\n behavior: \"smooth\",\n });\n } else if (state?.dest === \"customCards\") {\n customCardRef.current.scrollIntoView({ behavior: \"smooth\" });\n }\n }, 100);\n\n return () => {\n clearTimeout(timer);\n };\n }, [state]);\n\n return (\n\n
\n
\n
\n );\n};\n\nexport default Productlist;\n","import React, { useState, useEffect } from \"react\";\nimport { Form, Row, Col } from \"react-bootstrap\";\nimport axios from \"axios\";\nimport { Country, State } from \"country-state-city\";\nimport { useNavigate } from \"react-router-dom\";\nimport { toast } from \"react-toastify\";\nimport { connctDB } from \"../ConnctDB\";\nimport { useLocationContext } from \"./LocationInterface\";\nimport { useForm, Controller } from \"react-hook-form\";\n\nconst textDataReducer = (data) => {\n return {\n id: data.id,\n color: data.color,\n fontSize: data.fontSize,\n text: data.text,\n fontWeight: data.fontWeight,\n font: data.font,\n };\n};\n\nconst RazorpayForm = ({\n total,\n cartItems,\n subtotal,\n shippingHandling,\n gst,\n}) => {\n const navigate = useNavigate();\n\n const [countryList, setCountryList] = useState([]);\n const [stateList, setStateList] = useState([]);\n\n const {\n register,\n handleSubmit,\n formState: { errors },\n control,\n watch,\n } = useForm({ mode: \"onChange\" });\n\n const [cardsData, setCardsData] = useState([]);\n\n const { currencySymbol, isIndia, priceType } = useLocationContext();\n\n useEffect(() => {\n if (cartItems && cartItems.length > 0) {\n let backTextAndStyle,\n frontTextAndStyle,\n frontImageComponents,\n backImageComponents;\n\n const filteredCartData = [];\n\n for (let i = 0; i < cartItems.length; i++) {\n const { cid, ...cartItem } = cartItems[i]; //change back cid to id and remove uuid\n if (!cartItem?.designAssistanceChecked) {\n backTextAndStyle = cartItem?.backTextAndStyle?.map(textDataReducer);\n frontTextAndStyle = cartItem?.frontTextAndStyle?.map(textDataReducer);\n frontImageComponents = cartItem?.frontImageComponents?.map(\n (data) => data.image\n );\n backImageComponents = cartItem?.backImageComponents?.map(\n (data) => data.image\n );\n filteredCartData.push({\n ...cartItem,\n id: cid,\n backTextAndStyle,\n frontTextAndStyle,\n frontImageComponents,\n backImageComponents,\n });\n } else {\n filteredCartData.push({\n ...cartItem,\n id: cid,\n });\n }\n }\n\n setCardsData(filteredCartData);\n }\n }, [cartItems]);\n\n useEffect(() => {\n setCountryList(\n Country.getAllCountries()?.map((c) => ({\n isoCode: c.isoCode,\n name: c.name,\n }))\n );\n }, []);\n\n useEffect(() => {\n const subscription = watch((value, { name, type }) => {\n if (name === \"country\" && type === \"change\") {\n const countryCode = Country.getAllCountries().find(\n (data) => data.name === value.country\n )?.isoCode;\n setStateList(\n State.getStatesOfCountry(countryCode)?.map((c) => ({\n isoCode: c.isoCode,\n name: c.name,\n }))\n );\n }\n });\n\n return () => subscription.unsubscribe();\n }, [watch]);\n\n let notifyStatus;\n\n const fetchData = async (data) => {\n const authToken = localStorage.getItem(\"authToken\");\n if (!authToken) navigate(\"/login\");\n\n try {\n // Fetch order details\n const currency = priceType === \"iprice\" ? \"USD\" : \"INR\";\n const orderResponse = await axios.post(\n `${process.env.REACT_APP_BASE_URL}/v1/api/user/initiate-payment`,\n {\n total: parseInt(total),\n currency: currency,\n products: cardsData,\n referenceId: \"\",\n address: {\n ...data,\n currency: currency,\n },\n },\n {\n headers: {\n Authorization: `Bearer ${authToken}`,\n },\n }\n );\n\n return orderResponse;\n } catch (error) {\n console.error(\"Error fetching Razorpay order details:\", error);\n }\n };\n\n const onSubmit = async (data) => {\n const authToken = localStorage.getItem(\"authToken\");\n if (!authToken) navigate(\"/login\");\n // e.preventDefault();\n // const form = e.currentTarget;\n // if (form.checkValidity() === false) {\n // e.stopPropagation();\n // } else {\n try {\n const res = await fetchData(data);\n const orderDetails = res.data;\n if (!orderDetails) {\n console.error(\"Order details not available.\");\n return;\n }\n const {\n id: orderId,\n amount,\n currency: orderCurrency,\n notes,\n } = orderDetails;\n\n // Initialize Razorpay\n const paymentCurrency = priceType === \"iprice\" ? \"USD\" : \"INR\";\n const options = {\n key: process.env.REACT_APP_RAZORPAY_KEY,\n amount: Math.round(amount * 100),\n currency: paymentCurrency,\n order_id: orderDetails.order_id,\n name: \"Connct\",\n description: \"Purchase Description\",\n image: \"path_to_logo.png\",\n handler: async function (response) {\n const res = await axios.post(\n `${process.env.REACT_APP_BASE_URL}/v1/api/user/confirm-payment`,\n {\n payment_id: response.razorpay_payment_id,\n order_id: response.razorpay_order_id,\n razorpay_signature: response.razorpay_signature,\n total: parseInt(total),\n currency: paymentCurrency,\n products: cardsData,\n referenceId: \"\",\n address: {\n ...data,\n currency: paymentCurrency,\n },\n },\n {\n headers: {\n Authorization: `Bearer ${authToken}`,\n },\n }\n );\n\n handleServerResponse(res, data);\n },\n // payment_method: {\n // netbanking: true,\n // upi: true,\n // wallet: true,\n // },\n config: {\n display: {\n blocks: {\n banks: {\n name: \"10% Offer\",\n instruments: [\n {\n method: \"upi\",\n },\n {\n method: \"card\",\n },\n {\n method: \"wallet\",\n },\n {\n method: \"netbanking\",\n },\n ],\n },\n },\n sequence: [\"block.banks\"],\n preferences: {\n show_default_blocks: true,\n },\n },\n },\n };\n console.log(orderDetails.order_id);\n const razorpay = new window.Razorpay(options);\n razorpay.open();\n } catch (error) {\n console.error(\"Error creating Razorpay order:\", error);\n }\n };\n\n const handleServerResponse = async (response, data) => {\n const authToken = localStorage.getItem(\"authToken\");\n if (!authToken) navigate(\"/login\");\n\n if (response.error) {\n // Show error from server on payment form\n toast.error(\"Payment failed. Please try again.\");\n } else if (response.requires_action) {\n // Handle additional action if required\n } else {\n // Show success message\n bulkPurchase(response, data);\n }\n };\n\n const bulkPurchase = async (response, data) => {\n console.log('Bulk Purchase Data',data)\n notifyStatus = toast.loading(\"Processing\");\n const authToken = localStorage.getItem(\"authToken\");\n if (!authToken) navigate(\"/login\");\n\n // let country;\n // for (const countryData of countryList) {\n // if (countryData.isoCode === data.country) country = countryData.name;\n // }\n const currency = priceType === \"iprice\" ? \"USD\" : \"INR\";\n\n const res = await axios\n .post(\n `${process.env.REACT_APP_BASE_URL}/v1/api/user/bulk-purchase-card`,\n {\n ...data,\n country:data.country,\n products: cardsData,\n referenceId: response.id,\n total: parseInt(total),\n currency: currency,\n },\n {\n headers: {\n Authorization: `Bearer ${authToken}`,\n },\n }\n )\n .catch(() => window.alert(\"There was an error!\"));\n\n if (res.status === 200) {\n toast.update(notifyStatus, {\n render: \"Completed\",\n type: \"success\",\n closeButton: true,\n isLoading: false,\n autoClose: 1000,\n });\n connctDB.cart.clear();\n navigate(\"/thank-you\");\n }\n };\n\n return (\n \n
\n
\n \n {/* left billing */}\n \n Place your order\n \n
\n
\n );\n};\n\nexport default RazorpayForm;\n","import React from 'react';\nimport './Privacy.css';\n\nconst Refund = () => {\n return (\n \n
\n \n \n Your Order\n
\n\n {cartItems?.map((item, index) => (\n \n
\n ))}\n
\n {item.name}
\n Quantity: {item.addedQuantity}
\n \n\n \n
\n Sub Total
\n\n {currencySymbol} {subtotal?.toFixed(2)}\n
\n\n
\n Shipping and Handling
\n\n {currencySymbol} {shippingHandling?.toFixed(2)}\n
\n\n
\n {isIndia ? \"GST\" : \"VAT\"}
\n\n {currencySymbol} {gst?.toFixed(2)}\n
\n\n
\n Total
\n\n {currencySymbol} {total?.toFixed(2)}\n
\n\n
\n \n )}\n \n \n
\n \n
\n \n All your data are safe. We are using the most advanced\n security to provide you the best experience ever.\n
\n\n \n \n
\n );\n}\n\nexport default Refund;\n","import React from 'react';\nimport './Privacy.css';\n\nconst ShippingPolicy = () => {\n return (\n \n
\n
\n \n
\n
\n\n Refund Policy
\n\n
\n This Refund Policy describes how we manage refunds.\n
\nReturns
\nWe do not take returns. To be eligible for a refund, we require a receipt or proof of purchase in the form of an order number and your order must have not been fulfilled, shipped or delivered per carrier tracking information
\nRefunds (if applicable)
\nIf your Connct product is scratched or damaged, you may be eligible for a replacement. We offer replacements for damaged Connct products with photo proof within 48 hours of delivery.
\n
If you are having trouble activating your Connct product or connecting to compatible phones and you would like to request a refund or replacement, please contact our team at support@connct.ai. Typically, all issues can be resolved with some helpful tips from the team!
If you have successfully activated your Connct product and are experiencing issues connecting to a compatible device after you’ve contacted support@connct.ai, you may be eligible for a refund. Once approved for a refund, we will send you an email notifying you that we have refunded your purchase. Your refund will then be processed, and a credit will automatically be applied to your credit card or original method of payment, within 2-4 days.
Late or missing refunds (if applicable)
\nIf you haven’t received a refund yet, first check your bank account again. Next, contact your bank. There is often some processing time before a refund is posted. If you’ve done all of this and you still have not received your refund yet, please contact us at support@connct.ai.
\nSale items
\nOnly regular priced items may be refunded (if applicable); unfortunately, sale items cannot be refunded.
\nExchanges
\nWe do not accept exchanges.
\nShipping
\nWe do not accept returns, so no shipping information is required.
\n \nContact us
\nFor more information about our privacy practices, if you have questions, or if you would like to make a complaint, please contact us by email at support@connct.ai
\n\n
\n \n \n
\n );\n}\n\nexport default ShippingPolicy;\n","import React, { useState } from \"react\";\n// import { useLocation } from \"react-router-dom\";\nimport { Container, Row, Col, Button } from \"react-bootstrap\";\nimport { IoMdRemoveCircleOutline } from \"react-icons/io\";\nimport \"./Shoppingcart.css\";\nimport { useNavigate } from \"react-router-dom\";\nimport { connctDB } from \"../ConnctDB\";\nimport { useLiveQuery } from \"dexie-react-hooks\";\nimport UpdateCustomization from \"./UpdateCustomization\";\nimport { IoIosArrowDown, IoIosArrowUp } from \"react-icons/io\";\nimport { AiFillEdit } from \"react-icons/ai\";\nimport { useLocationContext } from \"./LocationInterface\";\n\nconst ShoppingCart = () => {\n const navigate = useNavigate();\n const [cartCardShow, setCartCardShow] = useState({ state: false, index: 0 });\n const [customizeModalShow, setCustomizeModalShow] = useState(false);\n\n const cartItems = useLiveQuery(() => connctDB.cart.orderBy(\"cid\").toArray());\n const [data, setData] = useState({});\n\n const { currencySymbol, priceType, isIndia } = useLocationContext();\n\n // Calculate subtotal, shipping, GST, and total\n const subtotal = cartItems?.reduce((acc, item) => {\n return acc + item[priceType] * item.addedQuantity;\n }, 0);\n\n const shippingHandling = 0; // Set the shipping and handling fee to 0\n const gstPerProduct = isIndia ? 359.82 : 4.31; // Fixed GST amount for a single product\n const totalQty = cartItems?.reduce(\n (acc, item) => acc + item.addedQuantity,\n 0\n ); // Total quantity of all products in the cart\n const gst = gstPerProduct * totalQty; // Calculate GST based on the total quantity\n const total = subtotal + shippingHandling + gst;\n\n return (\n \n
\n
\n \n
\n
\n\n Shipping Policy
\n\n
\n This Refund Policy describes how we manage refunds.\n
\nThank you for choosing Connct! We are committed to delivering your order\n promptly and efficiently. Please review our shipping policy below for details:
\nShipping Methods:
\nWe offer standard shipping for all orders, which\n typically takes 3-5 business days for delivery across India. Expedited\n shipping options may be available for an additional fee.\n International shipment will take 10 business days for delivery from the date\n of Purchase
\n\nOrder Processing Time:
\nOrders are processed within 1-2 business days\n from the date of purchase. Please note that orders placed on weekends or\n holidays will be processed on the next business day.
\nShipping Rates:
\nShipping rates are calculated based on the total weight of\n the order and the shipping destination. Shipping costs will be displayed\n during the checkout process before payment is made.
\nOrder Tracking:
\nOnce your order has been shipped, you will receive a\n shipping confirmation email containing tracking information. You can use this\n tracking number to monitor the status of your shipment.
\nDelivery Issues:
\nIf you encounter any issues with your delivery, such as\n delays or damaged items, please contact us immediately. We will work\n diligently to resolve any problems and ensure that you receive your order\n promptly.
\n \nQuestions or Concerns:
\nIf you have any questions or concerns about our\n shipping policy, please don't hesitate to contact us. Our customer service\n team is available to assist you and address any inquiries you may have.\n Thank you for choosing Connct!
\n\n
\n
\n )}\n \n \n
\n \n
\n \n
\n {item.name}
\n Quantity: {item.addedQuantity}
\n {item?.slug?.split(\"-\")[0] === \"custom\" &&\n (item?.designAssistanceChecked ? (\n Need Design Assistance
\n ) : (\n Don't Need Design Assistance
\n ))}\n {cartCardShow.state && cartCardShow.index === index && (\n \n
\n )}\n \n {cartCardShow.state && cartCardShow.index === index ? (\n \n Primary Text: \n \n {item?.frontTextAndStyle &&\n item?.frontTextAndStyle[0].text}\n \n
\n \n Secondary Text: \n \n {item?.frontTextAndStyle &&\n item?.frontTextAndStyle[1]?.text}\n \n
\n \n Delivery Estimation:\n 5-7 days\n
\n \n
\n \n )}\n \n \n
\n Cart
\n\n
\n Sub Total
\n\n {currencySymbol} {subtotal?.toFixed(2)}\n
\n\n
\n Shipping and Handling
\n\n {currencySymbol} {shippingHandling?.toFixed(2)}\n
\n\n
\n {isIndia ? \"GST\" : \"VAT\"}
\n\n {currencySymbol} {gst?.toFixed(2)}\n
\n\n
\n Total
\n\n {currencySymbol} {total?.toFixed(2)}\n
\n\n {\n console.log(\"checkout\");\n const auth = localStorage.getItem(\"authToken\") || null;\n if (!auth)\n navigate(\"/login\", { state: { fromCart: true } });\n else navigate(\"/billing\");\n }}\n >\n Checkout\n \n
\n \n
\n \n\n \n \n \n
\n \n
\n \n
\n\n \n
\n \n \n
\n Welcome
\nCreate a new account
\n {/* Uncomment this section if you want to include the error alert */}\n {/*\n Fields cannot be empty.\n
*/}\n \n \n
\n \n );\n};\n\nexport default Signup;\n","import { forwardRef, useEffect, useImperativeHandle } from \"react\";\nvar propTypes = { exports: {} };\nvar ReactPropTypesSecret$1 = \"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED\";\nvar ReactPropTypesSecret_1 = ReactPropTypesSecret$1;\nvar ReactPropTypesSecret = ReactPropTypesSecret_1;\nfunction emptyFunction() {\n}\nfunction emptyFunctionWithReset() {\n}\nemptyFunctionWithReset.resetWarningCache = emptyFunction;\nvar factoryWithThrowingShims = function() {\n function shim(props, propName, componentName, location, propFullName, secret) {\n if (secret === ReactPropTypesSecret) {\n return;\n }\n var err = new Error(\n \"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types\"\n );\n err.name = \"Invariant Violation\";\n throw err;\n }\n shim.isRequired = shim;\n function getShim() {\n return shim;\n }\n var ReactPropTypes = {\n array: shim,\n bigint: shim,\n bool: shim,\n func: shim,\n number: shim,\n object: shim,\n string: shim,\n symbol: shim,\n any: shim,\n arrayOf: getShim,\n element: shim,\n elementType: shim,\n instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim,\n checkPropTypes: emptyFunctionWithReset,\n resetWarningCache: emptyFunction\n };\n ReactPropTypes.PropTypes = ReactPropTypes;\n return ReactPropTypes;\n};\n{\n propTypes.exports = factoryWithThrowingShims();\n}\nvar PropTypes = propTypes.exports;\nconst isValidString = (value) => {\n if (!value || value.length === 0) {\n return false;\n }\n return value !== null && value !== void 0 && typeof value === \"string\";\n};\nconst loadScript = ({ propertyId = \"\", widgetId = \"\", embedId = \"\", basePath = \"tawk.to\" }) => {\n if (embedId.length) {\n if (!document.getElementById(embedId)) {\n const element = document.createElement(\"div\");\n element.id = embedId;\n document.body.appendChild(element);\n }\n window.Tawk_API.embedded = embedId;\n }\n const script = document.createElement(\"script\");\n script.async = true;\n script.src = `https://embed.${basePath}/${propertyId}/${widgetId}`;\n script.charset = \"UTF-8\";\n script.setAttribute(\"crossorigin\", \"*\");\n const firstScript = document.getElementsByTagName(\"script\")[0];\n firstScript.parentNode.insertBefore(script, firstScript);\n};\nconst TawkMessenger = forwardRef((props, ref) => {\n useEffect(() => {\n load();\n }, []);\n const load = () => {\n if (!isValidString(props.propertyId)) {\n console.error(\"[Tawk-messenger-react warn]: You didn't specified 'propertyId' property in the plugin.\");\n return;\n }\n if (!isValidString(props.widgetId)) {\n console.error(\"[Tawk-messenger-react warn]: You didn't specified 'widgetId' property in the plugin.\");\n return;\n }\n if (!window || !document) {\n return;\n }\n init();\n };\n const init = () => {\n window.Tawk_API = window.Tawk_API || {};\n window.Tawk_LoadStart = new Date();\n loadScript({\n propertyId: props.propertyId,\n widgetId: props.widgetId,\n embedId: props.embedId,\n basePath: props.basePath\n });\n if (props.customStyle && typeof props.customStyle === \"object\") {\n window.Tawk_API.customStyle = props.customStyle;\n }\n mapCallbacks();\n };\n useImperativeHandle(ref, () => ({\n maximize: () => {\n return window.Tawk_API.maximize();\n },\n minimize: () => {\n return window.Tawk_API.minimize();\n },\n toggle: () => {\n return window.Tawk_API.toggle();\n },\n popup: () => {\n return window.Tawk_API.popup();\n },\n showWidget: () => {\n return window.Tawk_API.showWidget();\n },\n hideWidget: () => {\n return window.Tawk_API.hideWidget();\n },\n toggleVisibility: () => {\n return window.Tawk_API.toggleVisibility();\n },\n endChat: () => {\n return window.Tawk_API.endChat();\n },\n getWindowType: () => {\n return window.Tawk_API.getWindowType();\n },\n getStatus: () => {\n return window.Tawk_API.getStatus();\n },\n isChatMaximized: () => {\n return window.Tawk_API.isChatMaximized();\n },\n isChatMinimized: () => {\n return window.Tawk_API.isChatMinimized();\n },\n isChatHidden: () => {\n return window.Tawk_API.isChatHidden();\n },\n isChatOngoing: () => {\n return window.Tawk_API.isChatOngoing();\n },\n isVisitorEngaged: () => {\n return window.Tawk_API.isVisitorEngaged();\n },\n onLoaded: () => {\n return window.Tawk_API.onLoaded;\n },\n onBeforeLoaded: () => {\n return window.Tawk_API.onBeforeLoaded;\n },\n widgetPosition: () => {\n return window.Tawk_API.widgetPosition();\n },\n visitor: (data) => {\n window.Tawk_API.visitor = data;\n },\n setAttributes: (attribute, callback) => {\n window.Tawk_API.setAttributes(attribute, callback);\n },\n addEvent: (event, metadata, callback) => {\n window.Tawk_API.addEvent(event, metadata, callback);\n },\n addTags: (tags, callback) => {\n window.Tawk_API.addTags(tags, callback);\n },\n removeTags: (tags, callback) => {\n window.Tawk_API.removeTags(tags, callback);\n }\n }));\n const mapCallbacks = () => {\n window.addEventListener(\"tawkLoad\", () => {\n props.onLoad();\n });\n window.addEventListener(\"tawkStatusChange\", (status) => {\n props.onStatusChange(status.detail);\n });\n window.addEventListener(\"tawkBeforeLoad\", () => {\n props.onBeforeLoad();\n });\n window.addEventListener(\"tawkChatMaximized\", () => {\n props.onChatMaximized();\n });\n window.addEventListener(\"tawkChatMinimized\", () => {\n props.onChatMinimized();\n });\n window.addEventListener(\"tawkChatHidden\", () => {\n props.onChatHidden();\n });\n window.addEventListener(\"tawkChatStarted\", () => {\n props.onChatStarted();\n });\n window.addEventListener(\"tawkChatEnded\", () => {\n props.onChatEnded();\n });\n window.addEventListener(\"tawkPrechatSubmit\", (data) => {\n props.onPrechatSubmit(data.detail);\n });\n window.addEventListener(\"tawkOfflineSubmit\", (data) => {\n props.onOfflineSubmit(data.detail);\n });\n window.addEventListener(\"tawkChatMessageVisitor\", (message) => {\n props.onChatMessageVisitor(message.detail);\n });\n window.addEventListener(\"tawkChatMessageAgent\", (message) => {\n props.onChatMessageAgent(message.detail);\n });\n window.addEventListener(\"tawkChatMessageSystem\", (message) => {\n props.onChatMessageSystem(message.detail);\n });\n window.addEventListener(\"tawkAgentJoinChat\", (data) => {\n props.onAgentJoinChat(data.detail);\n });\n window.addEventListener(\"tawkAgentLeaveChat\", (data) => {\n props.onAgentLeaveChat(data.detail);\n });\n window.addEventListener(\"tawkChatSatisfaction\", (satisfaction) => {\n props.onChatSatisfaction(satisfaction.detail);\n });\n window.addEventListener(\"tawkVisitorNameChanged\", (visitorName) => {\n props.onVisitorNameChanged(visitorName.detail);\n });\n window.addEventListener(\"tawkFileUpload\", (link) => {\n props.onFileUpload(link.detail);\n });\n window.addEventListener(\"tawkTagsUpdated\", (data) => {\n props.onTagsUpdated(data.detail);\n });\n window.addEventListener(\"tawkUnreadCountChanged\", (data) => {\n props.onUnreadCountChanged(data.detail);\n });\n };\n return null;\n});\nTawkMessenger.displayName = \"TawkMessenger\";\nTawkMessenger.defaultProps = {\n customStyle: null,\n embedId: \"\",\n basePath: \"tawk.to\",\n onLoad: () => {\n },\n onStatusChange: () => {\n },\n onBeforeLoad: () => {\n },\n onChatMaximized: () => {\n },\n onChatMinimized: () => {\n },\n onChatHidden: () => {\n },\n onChatStarted: () => {\n },\n onChatEnded: () => {\n },\n onPrechatSubmit: () => {\n },\n onOfflineSubmit: () => {\n },\n onChatMessageVisitor: () => {\n },\n onChatMessageAgent: () => {\n },\n onChatMessageSystem: () => {\n },\n onAgentJoinChat: () => {\n },\n onAgentLeaveChat: () => {\n },\n onChatSatisfaction: () => {\n },\n onVisitorNameChanged: () => {\n },\n onFileUpload: () => {\n },\n onTagsUpdated: () => {\n },\n onUnreadCountChanged: () => {\n }\n};\nTawkMessenger.propTypes = {\n propertyId: PropTypes.string.isRequired,\n widgetId: PropTypes.string.isRequired,\n customStyle: PropTypes.object,\n embedId: PropTypes.string,\n basePath: PropTypes.string,\n onLoad: PropTypes.func,\n onStatusChange: PropTypes.func,\n onBeforeLoad: PropTypes.func,\n onChatMaximized: PropTypes.func,\n onChatMinimized: PropTypes.func,\n onChatHidden: PropTypes.func,\n onChatStarted: PropTypes.func,\n onChatEnded: PropTypes.func,\n onPrechatSubmit: PropTypes.func,\n onOfflineSubmit: PropTypes.func,\n onChatMessageVisitor: PropTypes.func,\n onChatMessageAgent: PropTypes.func,\n onChatMessageSystem: PropTypes.func,\n onAgentJoinChat: PropTypes.func,\n onAgentLeaveChat: PropTypes.func,\n onChatSatisfaction: PropTypes.func,\n onVisitorNameChanged: PropTypes.func,\n onFileUpload: PropTypes.func,\n onTagsUpdated: PropTypes.func,\n onUnreadCountChanged: PropTypes.func\n};\nexport { TawkMessenger as default };\n","import React from \"react\";\nimport TawkMessengerReact from \"@tawk.to/tawk-messenger-react\";\n\nconst TawkChat = () => {\n return (\n
\n
\n );\n};\n\nexport default TawkChat;\n","import React from 'react';\nimport './Term.css';\n\nconst Term = () => {\n return (\n \n
\n Terms and Conditions
\nWelcome to Connct!
\nThese terms and conditions outline the rules and regulations for the use of Connct's Website, located at\n http://www.connct.ai/ .
\nBy accessing this website we assume you accept these terms and conditions. Do not continue to use Connct if\n you do not agree to take all of the terms and conditions stated on this page.
\nThe following terminology applies to these Terms and Conditions, Privacy Statement and Disclaimer Notice and\n all Agreements: \"Client\", \"You\" and \"Your\" refers to you, the person log on this website and compliant to\n the Company’s terms and conditions. \"The Company\", \"Ourselves\", \"We\", \"Our\" and \"Us\", refers to our Company.\n \"Party\", \"Parties\", or \"Us\", refers to both the Client and ourselves. All terms refer to the offer,\n acceptance and consideration of payment necessary to undertake the process of our assistance to the Client\n in the most appropriate manner for the express purpose of meeting the Client’s needs in respect of provision\n of the Company’s stated services, in accordance with and subject to, prevailing law of Netherlands. Any use\n of the above terminology or other words in the singular, plural, capitalization and/or he/she or they, are\n taken as interchangeable and therefore as referring to same.
\nCookies
\nWe employ the use of cookies. By accessing Connct, you agreed to use cookies in agreement with the Connct's\n Privacy Policy.
\nMost interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used\n by our website to enable the functionality of certain areas to make it easier for people visiting our\n website. Some of our affiliate/advertising partners may also use cookies.
\nLicense
\nUnless otherwise stated, Connct and/or its licensors own the intellectual property rights for all material on\n Connct. All intellectual property rights are reserved. You may access this from Connct for your own personal\n use subjected to restrictions set in these terms and conditions.
\nYou must not:
\n- \n
- Republish material from Connct \n
- Sell, rent or sub-license material from Connct \n
- Reproduce, duplicate or copy material from Connct \n
- Redistribute content from Connct \n
Parts of this website offer an opportunity for users to post and exchange opinions and information in certain\n areas of the website. Connct does not filter, edit, publish or review Comments prior to their presence on\n the website. Comments do not reflect the views and opinions of Connct,its agents and/or affiliates. Comments\n reflect the views and opinions of the person who post their views and opinions. To the extent permitted by\n applicable laws, Connct shall not be liable for the Comments or for any liability, damages or expenses\n caused and/or suffered as a result of any use of and/or posting of and/or appearance of the Comments on this\n website.
\nConnct reserves the right to monitor all Comments and to remove any Comments which can be considered\n inappropriate, offensive or causes breach of these Terms and Conditions.
\nYou warrant and represent that:
\n- \n
- You are entitled to post the Comments on our website and have all necessary licenses and consents to do\n so; \n
- The Comments do not invade any intellectual property right, including without limitation copyright,\n patent or trademark of any third party; \n
- The Comments do not contain any defamatory, libelous, offensive, indecent or otherwise unlawful material\n which is an invasion of privacy \n
- The Comments will not be used to solicit or promote business or custom or present commercial activities\n or unlawful activity. \n
You hereby grant Connct a non-exclusive license to use, reproduce, edit and authorize others to use,\n reproduce and edit any of your Comments in any and all forms, formats or media.
\nHyperlinking to our Content
\nThe following organizations may link to our Website without prior written approval:
\n- \n
- Government agencies; \n
- Search engines; \n
- News organizations; \n
- Online directory distributors may link to our Website in the same manner as they hyperlink to the\n Websites of other listed businesses; and \n
- System wide Accredited Businesses except soliciting non-profit organizations, charity shopping malls,\n and charity fundraising groups which may not hyperlink to our Web site. \n
These organizations may link to our home page, to publications or to other Website information so long as the\n link: (a) is not in any way deceptive; (b) does not falsely imply sponsorship, endorsement or approval of\n the linking party and its products and/or services; and (c) fits within the context of the linking party’s\n site.
\nWe may consider and approve other link requests from the following types of organizations:
\n- \n
- commonly-known consumer and/or business information sources; \n
- dot.com community sites; \n
- associations or other groups representing charities; \n
- online directory distributors; \n
- internet portals; \n
- accounting, law and consulting firms; and \n
- educational institutions and trade associations. \n
We will approve link requests from these organizations if we decide that: (a) the link would not make us look\n unfavorably to ourselves or to our accredited businesses; (b) the organization does not have any negative\n records with us; (c) the benefit to us from the visibility of the hyperlink compensates the absence of\n Connct; and (d) the link is in the context of general resource information.
\nThese organizations may link to our home page so long as the link: (a) is not in any way deceptive; (b) does\n not falsely imply sponsorship, endorsement or approval of the linking party and its products or services;\n and (c) fits within the context of the linking party’s site.
\nIf you are one of the organizations listed in paragraph 2 above and are interested in linking to our website,\n you must inform us by sending an e-mail to Connct. Please include your name, your organization name, contact\n information as well as the URL of your site, a list of any URLs from which you intend to link to our\n Website, and a list of the URLs on our site to which you would like to link. Wait 2-3 weeks for a response.\n
\nApproved organizations may hyperlink to our Website as follows:
\n- \n
- By use of our corporate name; or \n
- By use of the uniform resource locator being linked to; or \n
- By use of any other description of our Website being linked to that makes sense within the context and\n format of content on the linking party’s site. \n
No use of Connct's logo or other artwork will be allowed for linking absent a trademark license agreement.\n
\niFrames
\nWithout prior approval and written permission, you may not create frames around our Webpages that alter in\n any way the visual presentation or appearance of our Website.
\nContent Liability
\nWe shall not be hold responsible for any content that appears on your Website. You agree to protect and\n defend us against all claims that is rising on your Website. No link(s) should appear on any Website that\n may be interpreted as libelous, obscene or criminal, or which infringes, otherwise violates, or advocates\n the infringement or other violation of, any third party rights.
\nYour Privacy
\nPlease read Privacy Policy
\nReservation of Rights
\nWe reserve the right to request that you remove all links or any particular link to our Website. You approve\n to immediately remove all links to our Website upon request. We also reserve the right to amen these terms\n and conditions and it’s linking policy at any time. By continuously linking to our Website, you agree to be\n bound to and follow these linking terms and conditions.
\nRemoval of links from our website
\nIf you find any link on our Website that is offensive for any reason, you are free to contact and inform us\n any moment. We will consider requests to remove links but we are not obligated to or so or to respond to you\n directly.
\nWe do not ensure that the information on this website is correct, we do not warrant its completeness or\n accuracy; nor do we promise to ensure that the website remains available or that the material on the website\n is kept up to date.
\nDisclaimer
\nTo the maximum extent permitted by applicable law, we exclude all representations, warranties and conditions\n relating to our website and the use of this website. Nothing in this disclaimer will:
\n- \n
- limit or exclude our or your liability for death or personal injury; \n
- limit or exclude our or your liability for fraud or fraudulent misrepresentation; \n
- limit any of our or your liabilities in any way that is not permitted under applicable law; or \n
- exclude any of our or your liabilities that may not be excluded under applicable law. \n
The limitations and prohibitions of liability set in this Section and elsewhere in this disclaimer: (a) are\n subject to the preceding paragraph; and (b) govern all liabilities arising under the disclaimer, including\n liabilities arising in contract, in tort and for breach of statutory duty.
\nAs long as the website and the information and services on the website are provided free of charge, we will\n not be liable for any loss or damage of any nature.
\n\n\n
\n \n 
\n
\n \n Thank you for your order.\n
\n\n Your order is complete. Please check your email for the details.\n
\n \n \n \nCustomization
\n \n
\n \n {cardSide === \"front\" ? (\n \n setCardSide(\"back\")}\n >\n
\n \n
\n\n \n setCardSide(\"front\")}\n >\n
\n Front Side
\n Back Side
\n \n
\n \n ) : (\n \n setCardFrontRef(ref)}\n className={`card-display`}\n style={{ backgroundColor: props?.data?.cardColor }}\n onDragStart={(e) => {\n e.preventDefault();\n }}\n onDragOver={(e) => {\n e.preventDefault();\n }}\n onDrop={(e) => {\n const dropImageIndex =\n e.dataTransfer.getData(\"imageIndex\");\n setFrontImages([\n ...frontImages,\n {\n image: frontSelectorImages[dropImageIndex],\n position: { x: 0, y: 0 },\n size: { width: 60, height: 40 },\n },\n ]);\n }}\n >\n {frontImages?.length > 0 &&\n frontImages?.map((frontImage, index) => (\n {\n const data = [...frontImages];\n data[index].position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setFrontImages(data);\n }}\n position={frontImage?.position}\n >\n {\n const data = [...frontImages];\n data[index].size = {\n width: ref.style.width,\n height: ref.style.height,\n };\n setFrontImages(data);\n }}\n style={\n imageTouched?.index === index &&\n imageTouched?.touched === true\n ? {\n cursor: \"pointer\",\n position: \"absolute\",\n border: \"2px solid blue\",\n }\n : {\n cursor: \"pointer\",\n position: \"absolute\",\n }\n }\n className={\"draggable-image\"}\n onTouchStart={(e) => {\n setImageTouched({\n touched: true,\n index,\n });\n }}\n >\n \n setFrontImages([\n ...frontImages.filter(\n (frontImage, imgIndex) =>\n imgIndex !== index\n ),\n ])\n }\n onTouchStart={() =>\n setFrontImages([\n ...frontImages.filter(\n (frontImage, imgIndex) =>\n imgIndex !== index\n ),\n ])\n }\n style={\n imageTouched?.index === index &&\n imageTouched?.touched === true\n ? {\n color: \"red\",\n visibility: \"visible\",\n }\n : {\n color: \"red\",\n }\n }\n >\n \n \n ))}\n {frontText?.map((textData, index) => (\n {\n const data = [...frontText];\n data[index].position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setFrontText(data);\n }}\n position={textData?.position}\n >\n \n {textData.text}\n \n \n ))}\n
\n \n
\n \n )}\n\n \n {\n setCardBackRef(ref);\n }}\n id=\"card-display-back\"\n className={` card-display`}\n style={{ backgroundColor: props?.data?.cardColor }}\n onDragStart={(e) => {\n e.preventDefault();\n }}\n onDragOver={(e) => {\n e.preventDefault();\n }}\n onDrop={(e) => {\n const dropImageIndex =\n e.dataTransfer.getData(\"imageIndex\");\n setBackImages([\n ...backImages,\n {\n image: backSelectorImages[dropImageIndex],\n position: { x: 0, y: 0 },\n size: { width: 60, height: 40 },\n },\n ]);\n }}\n >\n {backImages?.length > 0 &&\n backImages?.map((backImage, index) => (\n {\n const data = [...backImages];\n data[index].position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setBackImages(data);\n }}\n position={backImage?.position}\n >\n {\n const data = [...backImages];\n data[index].size = {\n width: ref.style.width,\n height: ref.style.height,\n };\n setBackImages(data);\n }}\n style={\n imageTouched?.index === index &&\n imageTouched?.touched === true\n ? {\n cursor: \"pointer\",\n position: \"absolute\",\n border: \"2px solid blue\",\n }\n : {\n cursor: \"pointer\",\n position: \"absolute\",\n }\n }\n className={\"draggable-image\"}\n onTouchStart={(e) => {\n setImageTouched({\n touched: true,\n index,\n });\n }}\n >\n \n setBackImages([\n ...backImages.filter(\n (backImage, imgIndex) =>\n imgIndex !== index\n ),\n ])\n }\n onTouchStart={() =>\n setBackImages([\n ...backImages.filter(\n (backImage, imgIndex) =>\n imgIndex !== index\n ),\n ])\n }\n >\n \n \n ))}\n {backText?.map((textData, index) => (\n {\n const data = [...backText];\n data[index].position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setBackText(data);\n }}\n position={textData?.position}\n >\n \n {textData.text}\n \n \n ))}\n {\n const data = { ...qrCodeStyleData };\n data.position = {\n x: dragElement.x,\n y: dragElement.y,\n };\n setQrCodeStyleData(data);\n }}\n position={qrCodeStyleData?.position}\n >\n {\n const data = { ...qrCodeStyleData };\n data.size = {\n width: ref.style.width,\n height: ref.style.height,\n };\n setQrCodeStyleData(data);\n }}\n style={{\n backgroundImage: `url(${qrCode})`,\n backgroundSize: \"contain\",\n backgroundRepeat: \"no-repeat\",\n cursor: \"pointer\",\n borderRadius: \"6px\",\n position: \"absolute\",\n }}\n lockAspectRatio={true}\n className={\"draggable-image\"}\n >\n \n
\n \n setActivePage(\"print\")}\n className={`nav-item ${activePage === \"print\" && \"active\"}`}\n >\n Print option\n
\n \n setActivePage(\"text\")}\n className={`nav-item ${activePage === \"text\" && \"active\"}`}\n >\n Text\n
\n \n {cardData()?.map((textData, index) => (\n
\n ))}\n \n \n handleDataChange(index, \"text\", e.target.value)\n }\n />\n
\n \n
\n )}\n \n \n
\n \n \n {\n handleDataChange(index, \"font\", e.target.value);\n }}\n >\n {fontStyleList?.map((style, index) => (\n \n {style}\n \n ))}\n \n
\n \n \n \n handleDataChange(\n index,\n \"fontWeight\",\n parseInt(e.target.value)\n )\n }\n >\n \n \n Normal\n \n \n \n
\n \n \n \n handleDataChange(\n index,\n \"fontSize\",\n e.target.value\n )\n }\n />\n
\n \n \n \n handleDataChange(index, \"color\", e.target.value)\n }\n />\n
\n \n
\n \n )}\n {activePage === \"print\" && (\n +
\n Add a new Text field
\n \n setPrintOption(\"gold-lining\")}\n >\n
\n\n \n setPrintOption(\"silver-lining\")}\n >\n
\n\n \n {printOption === \"gold-lining\" && (\n
\n \n )}\n {activePage === \"upload\" && (\n \n
\n )}\n\n {printOption === \"silver-lining\" && (\n \n
\n )}\n {printOption === \"color\" && (\n \n
\n )}\n \n
\n \n )}\n \n \n \n \n \n \n {cardImageData()?.map((image, index) =>\n image ? (\n \n {\n if (isBasicCard) {\n toast.info(\n \" Uploading the Images for Basic Cards are Disabled.\",\n {\n position: \"top-right\",\n autoClose: 9000,\n hideProgressBar: false,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n }\n );\n }\n }}\n >\n +\n
\n )\n )}\n \n \n e.dataTransfer.setData(\"imageIndex\", index)\n }\n onDoubleClick={() => addImageToCard(index)}\n />\n handleDeleteSelectorImage(index)}\n >\n
\n ) : (\n \n \n \n
\n