Merge pull request #2067 from CAFECA-IO/feature/beta_login_rwd

Feature/beta login rwd

.gitignore

@@ -17,6 +17,8 @@ package-lock.json
 # production
 /build
 
+/private
+
 # misc
 .DS_Store
 *.pem

src/components/avater_svg/avater_svg.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const AvatarSVG = ({ size }: { size: 'large' | 'small' }) => {
+  const width = size === 'large' ? 201 : 100;
+  const height = width;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      viewBox="0 0 201 200"
+    >
+      <path
+        fill="#CDD1D9"
+        d="M.5 100C.5 44.772 45.272 0 100.5 0s100 44.772 100 100-44.772 100-100 100S.5 155.228.5 100z"
+      ></path>
+      <g clipPath="url(#clip0_13_13411)">
+        <path
+          fill="#7F8A9D"
+          fillRule="evenodd"
+          d="M100.5 68.013c-11.942 0-21.623 9.68-21.623 21.622 0 8.151 4.51 15.249 11.17 18.934a31.953 31.953 0 00-19.976 20.439 2.286 2.286 0 002.177 2.984h56.503a2.284 2.284 0 002.176-2.984 31.956 31.956 0 00-19.975-20.439c6.661-3.685 11.171-10.782 11.171-18.934 0-11.942-9.681-21.622-21.623-21.622z"
+          clipRule="evenodd"
+        ></path>
+      </g>
+      <defs>
+        <clipPath id="clip0_13_13411">
+          <path fill="#fff" d="M0 0H64V64H0z" transform="translate(68.5 68)"></path>
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default AvatarSVG;

src/components/login_confirm_modal/information_statement.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+
+const InformationStatement: React.FC = () => {
+  return (
+    <div className="p-6 space-y-4 text-navyBlue">
+      <p className="font-semibold">Dear User,</p>
+      <p>
+        Thank you for choosing to use our accounting software. During your use
+        of this software, we may collect and process some of your personal
+        information. This statement aims to inform you about the information we
+        collect, how it is used, and how we protect your privacy.
+      </p>
+
+      <p className="font-semibold">1. Types of Information Collected</p>
+      <p>
+        During your use of the accounting software, we may collect the following
+        information:
+      </p>
+      <ul className="list-disc pl-6 space-y-2">
+        <li>
+          <strong>Personal Identification Information:</strong> Including but
+          not limited to your name, email address, phone number, company name,
+          etc.
+        </li>
+        <li>
+          <strong>Usage Data:</strong> Such as your operation records within the
+          software, usage duration, access frequency, etc.
+        </li>
+        <li>
+          <strong>Technical Information:</strong> Such as IP address, device
+          information, operating system, browser type, etc.
+        </li>
+      </ul>
+
+      <p className="font-semibold">2. Use of Information</p>
+      <p>The information we collect will primarily be used for the following purposes:</p>
+      <ul className="list-disc pl-6 space-y-2">
+        <li>
+          <strong>Providing and Maintaining Services:</strong> Ensuring the
+          normal operation of the accounting software and improving the user
+          experience.
+        </li>
+        <li>
+          <strong>Personalized Services:</strong> Providing customized features
+          and recommendations based on your needs and preferences.
+        </li>
+        <li>
+          <strong>Customer Support:</strong> Addressing your questions, handling
+          your requests and complaints.
+        </li>
+        <li>
+          <strong>Security Assurance:</strong> Detecting and preventing
+          potential security threats, protecting your data security.
+        </li>
+        <li>
+          <strong>Data Analysis:</strong> Conducting statistical analysis to
+          improve our products and services.
+        </li>
+      </ul>
+
+      <p className="font-semibold">3. Protection of Information</p>
+      <p>
+        We commit to taking reasonable technical and organizational measures to
+        protect your personal information from unauthorized access, disclosure,
+        alteration, or destruction. These measures include but are not limited to:
+      </p>
+      <ul className="list-disc pl-6 space-y-2">
+        <li>
+          <strong>Data Encryption:</strong> Encrypting sensitive data.
+        </li>
+        <li>
+          <strong>Access Control:</strong> Restricting data access rights to
+          employees and third parties.
+        </li>
+        <li>
+          <strong>Regular Audits:</strong> Regularly reviewing our security
+          measures and policies.
+        </li>
+      </ul>
+
+      <p className="font-semibold">4. Sharing of Information</p>
+      <p>
+        We will not sell, rent, or trade your personal information to any third
+        party without your consent. However, we may share your information in the
+        following circumstances:
+      </p>
+      <ul className="list-disc pl-6 space-y-2">
+        <li>
+          <strong>Legal Requirements:</strong> When required by law or requested
+          by government authorities.
+        </li>
+        <li>
+          <strong>Service Providers:</strong> With third-party service providers
+          who work with us, provided they only use your information to perform
+          our instructions and comply with appropriate confidentiality and
+          security measures.
+        </li>
+        <li>
+          <strong>Business Transfers:</strong> In the event of a company merger,
+          acquisition, or asset sale, we may transfer your information.
+        </li>
+      </ul>
+
+      <p className="font-semibold">5. Your Rights</p>
+      <p>
+        You have the right to access, correct, or delete your personal
+        information at any time. If you wish to exercise these rights or have
+        any questions, please contact us via:
+      </p>
+      <p>Email: [email protected]</p>
+      <p>Phone: +123-456-7890</p>
+      <p>
+        We will strive to respond to your request within a reasonable time frame.
+      </p>
+
+      <p className="font-semibold">6. Changes to the Statement</p>
+      <p>
+        We may update this statement from time to time to reflect changes in our
+        information handling practices. When we make significant changes to this
+        statement, we will notify you through in-software notifications or via
+        email.
+      </p>
+
+      <p>Thank you for your trust and support in our accounting software!</p>
+      <p className="font-semibold">iSunFA  August 6, 2024</p>
+    </div>
+  );
+};
+
+export default InformationStatement;

src/components/login_confirm_modal/login_confirm_modal.beta.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import { RxCross2 } from 'react-icons/rx';
 import { useTranslation } from 'react-i18next';
+import InformationStatement from '@/components/login_confirm_modal/information_statement';
+import TermsOfServiceAndPrivacyPolicy from '@/components/login_confirm_modal/term_n_privacy';
 
 interface ILoginConfirmProps {
   isModalVisible: boolean;
@@ -19,32 +22,40 @@ const LoginConfirmModal: React.FC<ILoginConfirmProps> = ({
   onCancel,
 }) => {
   const { t } = useTranslation('common');
-  return (
-    isModalVisible && (
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-        <div className="w-full max-w-lg rounded-lg bg-white p-6 shadow-lg">
-          <h2 className="mb-4 text-2xl font-bold">{modalData.title}</h2>
-          <p className="mb-6">{modalData.content}</p>
-          <div className="flex justify-end space-x-4">
-            <button
-              type="button"
-              onClick={onCancel}
-              className="rounded-lg bg-gray-200 px-4 py-2 text-gray-700"
-            >
-              {t('COMMON.CANCEL')}
-            </button>
-            <button
-              type="button"
-              onClick={onAgree}
-              className="rounded-lg bg-blue-600 px-4 py-2 text-white"
-            >
-              {modalData.buttonText}
-            </button>
-          </div>
+  const displayModal = isModalVisible ? (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="absolute max-h-80vh w-full max-w-xl rounded-xs bg-white p-4 pt-0 shadow-lg">
+        <div className="my-4 mb-8 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-navyBlue">{modalData.title}</h2>
+          <button type="button" onClick={onCancel} className="text-navyBlue">
+            <RxCross2 size={20} />
+          </button>
+        </div>
+        <hr className="absolute left-0 top-60px w-full max-w-xl border-lightGray6" />
+        <div className="h-50vh m-4 overflow-y-auto rounded-xs border border-navyBlue bg-lightGray7 lg:p-4">
+          {modalData.content === 'info_collection_statement' && <InformationStatement />}
+          {modalData.content === 'term_n_privacy' && <TermsOfServiceAndPrivacyPolicy />}
+        </div>
+        <div className="mx-4 flex justify-end space-x-4">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="mr-2 rounded-xs border border-navyBlue px-4 py-2 text-sm text-navyBlue hover:bg-gray-100 lg:text-lg"
+          >
+            {t('COMMON.CANCEL')}
+          </button>
+          <button
+            type="button"
+            onClick={onAgree}
+            className="rounded-xs bg-navyBlue px-4 py-2 text-sm text-white hover:bg-navyBlue2 lg:text-lg"
+          >
+            {modalData.buttonText}
+          </button>
         </div>
       </div>
-    )
-  );
+    </div>
+  ) : null;
+  return displayModal;
 };
 
 export default LoginConfirmModal;

src/components/login_confirm_modal/term_n_privacy.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+
+const TermsOfServiceAndPrivacyPolicy: React.FC = () => {
+  return (
+    <div className="p-6 space-y-4 text-navyBlue">
+      <p className="font-semibold">Dear User,</p>
+      <p>
+        Welcome to our accounting software. To ensure you fully understand our
+        services and how we protect your personal information, please carefully
+        read the following Terms of Service and Privacy Policy.
+      </p>
+
+      <p className="font-semibold">I. Terms of Service</p>
+
+      <p className="font-semibold">Service Content</p>
+      <p>
+        Our accounting software includes features such as bookkeeping, report
+        generation, invoice management, and financial analysis. We reserve the
+        right to update or modify the service content at any time and will
+        notify you of such changes through appropriate means.
+      </p>
+
+      <p className="font-semibold">Eligibility</p>
+      <p>
+        You must be at least 18 years old or meet the legal age requirements of
+        your country, and have full legal capacity to use our services. You
+        agree to use our services in accordance with relevant laws and
+        regulations and not engage in any illegal or improper activities.
+      </p>
+
+      <p className="font-semibold">Account Management</p>
+      <p>
+        You need to provide accurate and complete registration information and
+        are responsible for maintaining the security of your account. If you
+        discover any unauthorized account use or security vulnerabilities,
+        please notify us immediately.
+      </p>
+
+      <p className="font-semibold">Service Fees</p>
+      <p>
+        Some features or services may require payment. Specific fees and payment
+        methods will be detailed on relevant pages or documents. Payments are
+        non-refundable once confirmed, unless otherwise required by law.
+      </p>
+
+      <p className="font-semibold">Limitation of Liability</p>
+      <p>
+        We are not liable for any indirect, incidental, special, or
+        consequential damages arising from the use of our services. We are not
+        responsible for any third-party services or links provided.
+      </p>
+
+      <p className="font-semibold">Termination of Service</p>
+      <p>
+        We reserve the right to terminate or suspend the service at any time for
+        any reason without liability. You may cancel the use of our services at
+        any time, but fees paid are non-refundable.
+      </p>
+
+      <p className="font-semibold">II. Privacy Policy</p>
+
+      <p className="font-semibold">Information Collection</p>
+      <p>
+        We collect various types of information related to your use of the
+        accounting software, including but not limited to personal
+        identification information, Usage data, and technical information. For
+        more details, please refer to the `&quot;`Information Collection Statement.`&quot;`
+      </p>
+
+      <p className="font-semibold">Use of Information</p>
+      <p>
+        The collected information will be used to provide, maintain, and improve
+        our services, ensure security, and conduct data analysis. We will not
+        use your information for any other purposes without your consent.
+      </p>
+
+      <p className="font-semibold">Information Protection</p>
+      <p>
+        We take reasonable technical and organizational measures to protect your
+        information, including data encryption, access control, and regular
+        security audits. For details, please refer to the `&quot;`Information
+        Collection Statement.`&quot;`
+      </p>
+
+      <p className="font-semibold">Information Sharing</p>
+      <p>
+        We will not sell, rent, or trade your personal information to third
+        parties without your consent, except in specific situations such as
+        legal requirements, service provider cooperation, or business transfers.
+        For more details, please refer to the `&quot;`Information Collection
+        Statement.`&quot;`
+      </p>
+
+      <p className="font-semibold">Your Rights</p>
+      <p>
+        You have the right to access, correct, or delete your personal
+        information at any time. If needed, please contact us via
+        [email protected] or +123-456-7890.
+      </p>
+
+      <p className="font-semibold">Changes to the Privacy Policy</p>
+      <p>
+        We may update the Privacy Policy from time to time. When significant
+        changes are made, we will notify you through appropriate means and
+        publish the changes in the updated policy.
+      </p>
+
+      <p>Thank you for your trust and support in our accounting software!</p>
+      <p className="font-semibold">iSunFA August 6, 2024</p>
+    </div>
+  );
+};
+
+export default TermsOfServiceAndPrivacyPolicy;