merge: OptionalTerms 250613

com.twin.app.shoptime/src/components/Optional/OptionalTermsConfirm.jsx

@@ -0,0 +1,106 @@
+// src/components/Optional/OptionalTermsConfirm.jsx
+
+import React, { useEffect, useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import classNames from "classnames";
+
+import TPopUp from "../TPopUp/TPopUp";
+import TCheckBoxSquare from "../TCheckBox/TCheckBoxSquare";
+import TButton from "../TButton/TButton";
+import { $L } from "../../utils/helperMethods";
+import css from "./OptionalTermsConfirm.module.less";
+
+export default function OptionalTermsConfirm({
+  className,
+  open = false,
+  onAgree,
+  onNotNow,
+  onToggleOptionalTerms,
+  optionalTermsSelected = false,
+  spotlightId = "optional-terms-confirm",
+  onClose,
+  ...rest
+}) {
+
+  useEffect(() => {
+    console.log("OptionalTermsConfirm", optionalTermsSelected);
+  }, [optionalTermsSelected]);
+
+  const handleAgree = useCallback(() => {
+    if (onAgree) {
+      onAgree();
+    }
+  }, [onAgree]);
+
+  const handleNotNow = useCallback(() => {
+    if (onNotNow) {
+      onNotNow();
+    }
+  }, [onNotNow]);
+
+  const handleTermsToggle = useCallback(({ selected }) => {
+    if (onToggleOptionalTerms) {
+      onToggleOptionalTerms(selected);
+    }
+  }, [onToggleOptionalTerms]);
+  return (
+    <TPopUp
+      kind="optionalTermsConfirmPopup"
+      open={open}
+      onClose={onClose}
+      className={classNames(css.optionalTermsPopup, className)}
+      spotlightId={spotlightId}
+      hasButton={false}
+      hasOnClose={false}
+      type="normal"
+      {...rest}
+    >
+      <div className={css.popupContent}>
+        <div className={css.description}>
+          {$L("Get recommendations, special offers, and ads tailored just for you.")}
+        </div>
+        
+        <div className={css.rightSection}>
+          <div className={css.termsSection}>
+            <div className={css.termsButton}>
+              <TCheckBoxSquare
+                className={css.checkbox}
+                selected={optionalTermsSelected}
+                onToggle={handleTermsToggle}
+                spotlightId="optional-terms-checkbox"
+                ariaLabel={$L("Optional Terms")}
+              />
+              <div className={css.termsText}>
+                {$L("Optional Terms")}
+              </div>
+            </div>
+          </div>
+
+          <div className={css.buttonSection}>
+            <TButton
+              className={css.agreeButton}
+              onClick={handleAgree}
+              spotlightId="agree-button"
+              type="agree"
+              disabled={!optionalTermsSelected}
+              ariaLabel={$L("Agree")}
+            >
+              {$L("Agree")}
+            </TButton>
+            
+            <TButton
+              className={css.notNowButton}
+              onClick={handleNotNow}
+              spotlightId="not-now-button"
+              type="normal"
+              color="gray"
+              ariaLabel={$L("Not Now")}
+            >
+              {$L("Not Now")}
+            </TButton>
+          </div>
+        </div>
+      </div>
+    </TPopUp>
+  );
+}