From 25801733bc493c7621d3d752880950904aafea9e Mon Sep 17 00:00:00 2001
From: Sadaf <137484958+SadafKausar2025@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:34:36 +0530
Subject: [PATCH] Created Deactivate and delete form for VigyBag Account

---
 package-lock.json                        |  13 ++
 package.json                             |   1 +
 src/User/components/Footer/Footer.jsx    |  10 +-
 src/User/pages/Dashboard/ProfilePage.jsx | 219 ++++++++++++++++++++++-
 src/User/pages/Dashboard/model.css       |  37 ++++
 5 files changed, 272 insertions(+), 8 deletions(-)
 create mode 100644 src/User/pages/Dashboard/model.css

diff --git a/package-lock.json b/package-lock.json
index 2cfec0bb..eeee72a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "react-slick": "^0.30.2",
         "react-spinners": "^0.14.1",
         "react-use": "^17.5.0",
+        "reactjs-popup": "^2.0.6",
         "sitemap": "^8.0.0",
         "slick-carousel": "^1.8.1",
         "styled-component": "^2.8.0",
@@ -13891,6 +13892,18 @@
         "react-dom": "*"
       }
     },
+    "node_modules/reactjs-popup": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz",
+      "integrity": "sha512-A+tt+x9wdgZiZjv0e2WzYLD3IfFwJALaRaqwrCSXGjo0iQdsry/EtBEbQXRSmQs7cHmOi5eytCiSlOm8k4C+dg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 23a73d28..80bfceb3 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "react-slick": "^0.30.2",
     "react-spinners": "^0.14.1",
     "react-use": "^17.5.0",
+    "reactjs-popup": "^2.0.6",
     "sitemap": "^8.0.0",
     "slick-carousel": "^1.8.1",
     "styled-component": "^2.8.0",
diff --git a/src/User/components/Footer/Footer.jsx b/src/User/components/Footer/Footer.jsx
index c99fb026..5789d48d 100644
--- a/src/User/components/Footer/Footer.jsx
+++ b/src/User/components/Footer/Footer.jsx
@@ -68,15 +68,15 @@ const Footer = () => {
           <Link to="/contact" onClick={scrollToTop}>
             Contact us
           </Link>
-          <Link to="/service" onClick={scrollToTop}>
-            Our Services
-          </Link>
-          <Link to="/about" onClick={scrollToTop}>
-            Meet our contributor
+          <Link to="/career" onClick={scrollToTop}>
+            Careers
           </Link>
           <Link to="/certificate" onClick={scrollToTop}>
             Certification Page
           </Link>
+          <Link to="/about" onClick={scrollToTop}>
+            Meet our contributor
+          </Link>
         </div>
         <div className="contact-info text-sm">
           <p className="font-thin text-center text-gray-400">CONSUMER POLICY</p>{" "}
diff --git a/src/User/pages/Dashboard/ProfilePage.jsx b/src/User/pages/Dashboard/ProfilePage.jsx
index 7e56a21b..ce06d073 100644
--- a/src/User/pages/Dashboard/ProfilePage.jsx
+++ b/src/User/pages/Dashboard/ProfilePage.jsx
@@ -2,7 +2,9 @@ import React, { useState } from "react";
 import Aside from "../../components/Aside/Aside";
 import copy from "../../../assets/copy.png";
 import toast from "react-hot-toast";
-
+import Popup from "reactjs-popup";
+import "reactjs-popup/dist/index.css";
+import "./model.css";
 import "./profile.css";
 
 const ProfilePage = () => {
@@ -15,6 +17,215 @@ const ProfilePage = () => {
       "https://img.freepik.com/free-psd/3d-illustration-human-avatar-profile_23-2150671142.jpg", // Sample avatar URL
   });
 
+  const DeactivateAccount = () => (
+    <Popup
+      trigger={
+        <button className="button text-blue-500 font-bold text-sm hover:cursor-pointer">
+          Deactivate Account
+        </button>
+      }
+      modal
+      nested>
+      {(close) => (
+        <div className="modal p-4">
+          <button className="close" onClick={close}>
+            &times;
+          </button>
+          <div className="content">
+            <h1 className="text-[14px] font-bold">
+              When You <b>Deactivate</b> Your VigyBag Account
+            </h1>
+            <br />
+            <ul className="text-xsm">
+              <li>You are logged out of your VigyBag account.</li>
+              <br />
+              <li>Your public profile on VigyBag is no longer visible.</li>
+              <br />
+              <li>
+                Your reviews/ratings are still visible, but your profile
+                information is shown as ‘unavailable’ due to deactivation.
+              </li>
+              <br />
+              <li>
+                Your wishlist items are no longer accessible through the
+                associated public hyperlink. The wishlist is shown as
+                ‘unavailable’ due to deactivation.
+              </li>
+              <br />
+              <li>
+                You will be unsubscribed from receiving promotional emails from
+                VigyBag.
+              </li>
+              <br />
+              <li>
+                Your account data is retained and can be restored if you choose
+                to reactivate your account.
+              </li>
+            </ul>
+            <br />
+
+            <h1 className="text-[14px] font-bold">
+              How Do I Reactivate My VigyBag Account?
+            </h1>
+            <p>Reactivation is easy.</p>
+            <br />
+            <ul>
+              <li>
+                Simply log in with your registered email ID or mobile number and
+                the password used prior to deactivation. Your account data will
+                be fully restored.
+              </li>
+              <br />
+              <li>
+                Default settings will be applied, and you will be subscribed to
+                receive promotional emails from VigyBag.
+              </li>
+              <br />
+            </ul>
+            <p>
+              VigyBag retains your account data so you can conveniently resume
+              from where you left off if you decide to reactivate your account.
+            </p>
+            <p>
+              <strong>Remember:</strong> Account reactivation can be done only
+              on the desktop version.
+            </p>
+          </div>
+          <div className="actions">
+            <button
+              className="button bg-blue-600 text-white p-4 font-bold rounded-md"
+              onClick={() => {
+                console.log("modal closed ");
+                close();
+              }}>
+              CONFIRM DEACTIVATION
+            </button>
+          </div>
+        </div>
+      )}
+    </Popup>
+  );
+
+  const DeleteAccount = () => (
+    <Popup
+      trigger={
+        <button className="button text-red-600 font-bold text-sm">
+          Delete Account
+        </button>
+      }
+      modal
+      nested>
+      {(close) => (
+        <div className="modal p-4">
+          <button className="close" onClick={close}>
+            &times;
+          </button>
+          <div className="content">
+            <p className="text-xsm">
+              Please note that once you choose to <b>delete</b> your account
+              with VigyBag (“Platform”), your account will no longer be
+              available to you and you will not be able to activate, restore, or
+              use the account again.
+            </p>
+            <p className="text-xsm">
+              In case you are not sure about deleting your account, you may
+              instead deactivate your account.
+            </p>
+            <p className="text-xsm">
+              When you deactivate your account, you are logged out of your
+              account, your public profile on the Platform is no longer visible,
+              your wishlist items are no longer accessible through the
+              associated public hyperlink, and you will be unsubscribed from
+              receiving promotional emails.
+            </p>
+
+            <h2 className="text-xsm font-bold">
+              If you wish to proceed with an account deletion request, please
+              ensure that you have read and understood the following:
+            </h2>
+            <ul className="text-xsm">
+              <li>
+                There are no pending orders, cancellations, returns, refunds, or
+                other requests (“Transactions”). If there are pending
+                Transactions, please raise your account deletion request once
+                the Transactions are completed.
+              </li>
+              <li>
+                If you hold any subscription or membership, you will lose all
+                benefits and rewards associated with it immediately upon
+                deletion of the account.
+              </li>
+              <li>
+                You have exhausted or do not intend to use SuperCoins, Gift
+                Cards, or any such reward points or balances associated with
+                your account. Please note that once your account is deleted, you
+                will not be able to access any such reward points.
+              </li>
+              <li>
+                You will not be able to access or request to access order
+                history, profile, wishlists, saved addresses, previous orders
+                and invoices, saved or preferred payment methods, content,
+                images, or use any of the products and services offered by the
+                Platform immediately on deletion and will have to create a new
+                account to use products and services offered by us.
+              </li>
+              <li>
+                The Platform may choose to refuse deletion of your account in
+                case you have any legal dispute, or grievances related to
+                pending payments to your orders, shipments or deliveries, credit
+                lines, etc.
+              </li>
+              <li>
+                The Platform may retain certain data for legitimate reasons
+                (towards enforcement of legal rights or regulatory compliance)
+                such as security, fraud prevention, future abuse, and regulatory
+                compliance including the exercise of legal rights or comply with
+                legal orders under applicable laws.
+              </li>
+              <li>
+                After your account is deleted, if you log into the Platform
+                using the same phone number or email ID, a fresh new account
+                will be created and your old account data will not be
+                accessible.
+              </li>
+              <li>
+                Please uninstall the VigyBag App after your account is deleted
+                to stop receiving any notifications from VigyBag. Notifications
+                are app-level settings and uninstalling the app is required to
+                stop the notifications.
+              </li>
+            </ul>
+            <p>
+              You acknowledge that you have read our
+              <a href="/terms">Terms of Use</a> and
+              <a href="/privacy-policy">Privacy Policy</a>.
+            </p>
+            <p>
+              <br />
+              <hr />
+              <br />
+              <input type="checkbox" id="agree" name="agree" />I have read and
+              agreed to the Terms and Conditions.
+            </p>
+
+            <h2>Please tell us why you’re leaving us</h2>
+            <textarea id="feedback" name="feedback" rows="4" cols="50" />
+          </div>
+          <div className="actions">
+            <button
+              className="button bg-red-600 p-2 text-white text-sm rounded-md"
+              onClick={() => {
+                console.log("modal closed ");
+                close();
+              }}>
+              Delete Account
+            </button>
+          </div>
+        </div>
+      )}
+    </Popup>
+  );
+
   const [couponVisibility, setCouponVisibility] = useState([false, false]); // State for coupon visibility
 
   const handleChange = (e) => {
@@ -254,9 +465,11 @@ const ProfilePage = () => {
           </div>
           <br />
           <br />
-          <p className="text-blue-500 font-bold text-sm">Deactivate Account</p>
+
+          <DeactivateAccount />
+          <br />
           <br />
-          <p className="text-red-600 font-bold text-sm">Delete Account</p>
+          <DeleteAccount />
           <br />
           <br />
           {/* <img className="w-full h-[25vh]" src={profilefooter} alt="footer" /> */}
diff --git a/src/User/pages/Dashboard/model.css b/src/User/pages/Dashboard/model.css
new file mode 100644
index 00000000..c83059f2
--- /dev/null
+++ b/src/User/pages/Dashboard/model.css
@@ -0,0 +1,37 @@
+.modal {
+    font-size: 12px;
+}
+
+.modal>.header {
+    width: 100%;
+    border-bottom: 1px solid gray;
+    font-size: 18px;
+    text-align: center;
+    padding: 5px;
+}
+
+.modal>.content {
+    width: 100%;
+    padding: 10px 5px;
+}
+
+.modal>.actions {
+    width: 100%;
+    padding: 10px 5px;
+    margin: auto;
+    text-align: center;
+}
+
+.modal>.close {
+    cursor: pointer;
+    position: absolute;
+    display: block;
+    padding: 2px 5px;
+    line-height: 20px;
+    right: -10px;
+    top: -10px;
+    font-size: 24px;
+    background: #ffffff;
+    border-radius: 18px;
+    border: 1px solid #cfcece;
+}
\ No newline at end of file