@phygitallabs/phygital-consent 1.0.1 → 1.0.3

package/src/components/CookieConsentBanner.tsx

@@ -1,40 +1,40 @@
 "use client";
 
 import { useState } from "react";
+import { COOKIE_POLICY_URL, OTHER_INFO_URL } from "../env/constant";
 import { setConsentPreferenceCookie } from "../helpers/cookie";
 import { useCreateDeviceCookieConsent } from "../hooks/useConsent";
 
+import { usePhygitalConsent } from "../provider/PhygitalConsentProvider";
+
 const PREFERENCES = ["essential", "analytics", "advertising"] as const;
 type PreferenceKey = (typeof PREFERENCES)[number];
 
 const PREFERENCE_CONFIG: Record<
   PreferenceKey,
-  { label: string; description: string; disabled?: boolean }
+  { label: string; description: string; labelVi: string; descriptionVi: string; disabled?: boolean }
 > = {
   essential: {
     label: "Essential",
     description: "Required for the site to work (e.g. security, preferences).",
-    disabled: true,
+    labelVi: "Cần thiết",
+    descriptionVi: "Cần thiết cho hoạt động của trang (bảo mật, tùy chọn).",
   },
   analytics: {
     label: "Analytics",
     description: "Help us improve by collecting anonymous usage data.",
+    labelVi: "Phân tích",
+    descriptionVi: "Giúp chúng tôi cải thiện bằng cách thu thập dữ liệu sử dụng ẩn danh.",
   },
   advertising: {
     label: "Advertising",
     description: "Used to show you relevant ads and measure campaigns.",
+    labelVi: "Quảng cáo",
+    descriptionVi: "Dùng để hiển thị quảng cáo phù hợp và đo lường chiến dịch.",
   },
 };
 
-const MOCK_CONTENT = {
-  title: "Cookie preferences",
-  description:
-    "We use cookies to improve your experience. Choose which categories to enable, then save.",
-};
-
 export interface CookieConsentBannerProps {
-  /** Device ID (consumer app must provide; will be hashed by app before API if required). */
-  deviceId: string;
   /** Called after consent is submitted successfully (Reject or Accept). */
   onSubmitted?: () => void;
   /** Called when the banner is dismissed (e.g. hide from UI). */
@@ -44,24 +44,28 @@ export interface CookieConsentBannerProps {
 }
 
 export function CookieConsentBanner({
-  deviceId,
   onSubmitted,
   onDismiss,
   className = "",
 }: CookieConsentBannerProps) {
   const [dismissed, setDismissed] = useState(false);
+  const [showCustomModal, setShowCustomModal] = useState(false);
+  const [expandedKey, setExpandedKey] = useState<PreferenceKey | null>(null);
   const [preferences, setPreferences] = useState<Record<PreferenceKey, boolean>>({
     essential: true,
-    analytics: false,
-    advertising: false,
+    analytics: true,
+    advertising: true,
   });
 
+  const { deviceId } = usePhygitalConsent();
+
   const createConsent = useCreateDeviceCookieConsent({
     onSuccess: (_data, variables) => {
       setConsentPreferenceCookie(deviceId, variables.selected_preferences ?? []);
       onSubmitted?.();
       onDismiss?.();
       setDismissed(true);
+      setShowCustomModal(false);
     },
   });
 
@@ -81,163 +85,404 @@ export function CookieConsentBanner({
     });
   };
 
-  const handleSave = () => {
+  const handleAcceptAll = () => {
+    createConsent.mutate({
+      device_id: deviceId,
+      status: "ACCEPTED",
+      selected_preferences: [...PREFERENCES],
+    });
+  };
+
+  const handleSaveCustom = () => {
     const selected = getSelectedPreferences();
     createConsent.mutate({
       device_id: deviceId,
       status: "ACCEPTED",
-      selected_preferences: selected.length > 0 ? selected : [],
+      selected_preferences: selected.length > 0 ? selected : ["essential"],
     });
   };
 
   if (dismissed) return null;
 
   return (
-    <div
-      role="dialog"
-      aria-label={MOCK_CONTENT.title}
-      className={`consent:fixed consent:bottom-0 consent:left-0 consent:right-0 consent:z-50 consent:flex consent:flex-col consent:gap-4 consent:rounded-t-xl consent:border consent:border-b-0 consent:border-gray-200 consent:bg-white consent:p-4 consent:shadow-lg consent:md:left-4 consent:md:right-auto consent:md:bottom-4 consent:md:max-w-md consent:md:rounded-xl consent:md:border consent:md:border-gray-200 ${className}`}
-      style={{
-        position: "fixed",
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: 50,
-        display: "flex",
-        flexDirection: "column",
-        gap: "1rem",
-        borderRadius: "0.75rem 0.75rem 0 0",
-        borderWidth: "1px 1px 0 1px",
-        borderColor: "#e5e7eb",
-        backgroundColor: "#fff",
-        padding: "1rem",
-        boxShadow: "0 -4px 6px -1px rgb(0 0 0 / 0.1)",
-      }}
-    >
-      <h2
-        className="consent:text-lg consent:font-semibold consent:text-gray-900"
-        style={{ fontSize: "1.125rem", fontWeight: 600, color: "#111827" }}
-      >
-        {MOCK_CONTENT.title}
-      </h2>
-      <p
-        className="consent:text-sm consent:text-gray-600"
-        style={{ fontSize: "0.875rem", color: "#4b5563" }}
+    <>
+      {/* Screen 1: Bottom banner */}
+      <div
+        role="dialog"
+        aria-label="Thông báo về cookie"
+        className={`consent:fixed consent:bottom-0 consent:left-0 consent:right-0 consent:z-50 consent:flex consent:flex-col consent:gap-4 consent:rounded-t-xl consent:border consent:border-b-0 consent:border-gray-200 consent:bg-white consent:p-4 consent:shadow-lg consent:md:left-4 consent:md:right-auto consent:md:bottom-4 consent:md:max-w-md consent:md:rounded-xl consent:md:border consent:md:border-gray-200 ${className}`}
+        style={{
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: 50,
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          borderRadius: "0.75rem 0.75rem 0 0",
+          borderWidth: "1px 1px 0 1px",
+          borderColor: "#e5e7eb",
+          backgroundColor: "#fff",
+          padding: "1rem",
+          boxShadow: "0 -4px 6px -1px rgb(0 0 0 / 0.1)",
+        }}
       >
-        {MOCK_CONTENT.description}
-      </p>
-      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        {PREFERENCES.map((key) => {
-          const config = PREFERENCE_CONFIG[key];
-          const checked = preferences[key];
-          return (
-            <div
-              key={key}
+        <h2
+          className="consent:text-lg consent:font-semibold consent:text-gray-900"
+          style={{ fontSize: "1.125rem", fontWeight: 600, color: "#111827" }}
+        >
+          Thông báo về cookie
+        </h2>
+        <div
+          className="consent:text-sm consent:text-gray-600"
+          style={{ fontSize: "0.875rem", color: "#4b5563", display: "flex", flexDirection: "column", gap: "0.5rem" }}
+        >
+          <p>
+            TapQuest sử dụng trình theo dõi (như Cookie hoặc SDK) cho:
+          </p>
+          <ul style={{ margin: 0, paddingLeft: "1.25rem" }}>
+            {PREFERENCES.map((key) => (
+              <li key={key}>{PREFERENCE_CONFIG[key].labelVi}</li>
+            ))}
+          </ul>
+          <p>
+            Trước khi bạn đồng ý, chỉ những trình theo dõi hoàn toàn cần thiết mới được triển khai.
+          </p>
+          <p>
+            Nếu bạn chọn Chấp nhận tất cả, bạn đồng ý sử dụng tất cả trình theo dõi của chúng tôi.
+          </p>
+          <p>
+            Nếu bạn chọn Từ chối tất cả, bạn từ chối những trình theo dõi yêu cầu sự đồng ý của bạn và sẽ không có quyền truy cập vào các đề nghị hoặc nội dung được cá nhân hóa.
+          </p>
+          <p>
+            Nếu bạn chọn Tùy chọn, bạn có thể chọn xem bạn có đồng ý sử dụng trình theo dõi trên ứng dụng của chúng tôi hay không và ở mức độ nào.
+          </p>
+          <p>
+            Bạn có thể rút lại sự đồng ý của mình bất kỳ lúc nào bằng cách nhấp vào liên kết trong{" "}
+            {COOKIE_POLICY_URL ? (
+              <a
+                href={COOKIE_POLICY_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="consent:text-blue-600 consent:underline"
+                style={{ color: "#2563eb", textDecoration: "underline" }}
+              >
+                Chính sách cookie
+              </a>
+            ) : (
+              "Chính sách cookie"
+            )}{" "}
+            của chúng tôi.
+          </p>
+          <p>
+            <button
+              type="button"
+              onClick={() => setShowCustomModal(true)}
+              className="consent:text-blue-600 consent:underline consent:bg-transparent consent:border-0 consent:p-0 consent:cursor-pointer consent:font-inherit"
               style={{
-                display: "flex",
-                alignItems: "flex-start",
-                justifyContent: "space-between",
-                gap: "0.75rem",
+                color: "#2563eb",
+                textDecoration: "underline",
+                background: "none",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                font: "inherit",
               }}
             >
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <strong
-                  className="consent:text-sm consent:text-gray-900"
-                  style={{ fontSize: "0.875rem", color: "#111827" }}
-                >
-                  {config.label}
-                </strong>
-                <p
-                  className="consent:text-xs consent:text-gray-500"
-                  style={{ fontSize: "0.75rem", color: "#6b7280", margin: "0.25rem 0 0" }}
-                >
-                  {config.description}
-                </p>
-              </div>
-              <button
-                type="button"
-                role="switch"
-                aria-checked={checked}
-                aria-label={`${config.label} cookies ${checked ? "on" : "off"}`}
-                disabled={config.disabled}
-                onClick={() => togglePreference(key)}
-                style={{
-                  flexShrink: 0,
-                  width: 44,
-                  height: 24,
-                  borderRadius: 12,
-                  border: "none",
-                  padding: 0,
-                  cursor: config.disabled ? "default" : "pointer",
-                  backgroundColor: config.disabled ? "#e5e7eb" : checked ? "#111827" : "#d1d5db",
-                  opacity: config.disabled ? 0.7 : 1,
-                  transition: "background-color 0.2s",
-                }}
-              >
-                <span
-                  style={{
-                    display: "block",
-                    width: 20,
-                    height: 20,
-                    borderRadius: "50%",
-                    backgroundColor: "#fff",
-                    marginLeft: checked ? 22 : 2,
-                    marginTop: 2,
-                    transition: "margin-left 0.2s",
-                    boxShadow: "0 1px 2px rgb(0 0 0 / 0.2)",
-                  }}
-                />
-              </button>
-            </div>
-          );
-        })}
-      </div>
-      <div
-        className="consent:flex consent:flex-wrap consent:gap-2"
-        style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}
-      >
-        <button
-          type="button"
-          onClick={handleReject}
-          disabled={createConsent.isPending}
-          className="consent:rounded-lg consent:border consent:border-gray-300 consent:bg-white consent:px-4 consent:py-2 consent:text-sm consent:font-medium consent:text-gray-700 consent:shadow-sm hover:consent:bg-gray-50 disabled:consent:opacity-50"
-          style={{
-            borderRadius: "0.5rem",
-            border: "1px solid #d1d5db",
-            background: "#fff",
-            padding: "0.5rem 1rem",
-            fontSize: "0.875rem",
-            fontWeight: 500,
-            color: "#374151",
-          }}
+              Tuỳ chỉnh cookie.
+            </button>
+          </p>
+        </div>
+        <div
+          className="consent:flex consent:flex-col consent:gap-2"
+          style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}
         >
-          Reject non-essential
-        </button>
-        <button
-          type="button"
-          onClick={handleSave}
-          disabled={createConsent.isPending}
-          className="consent:rounded-lg consent:bg-gray-900 consent:px-4 consent:py-2 consent:text-sm consent:font-medium consent:text-white consent:shadow-sm hover:consent:bg-gray-800 disabled:consent:opacity-50"
+          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+            <button
+              type="button"
+              onClick={handleAcceptAll}
+              disabled={createConsent.isPending}
+              className="consent:rounded-lg consent:bg-gray-900 consent:px-4 consent:py-2 consent:text-sm consent:font-medium consent:text-white consent:shadow-sm hover:consent:bg-gray-800 disabled:consent:opacity-50"
+              style={{
+                borderRadius: "0.5rem",
+                background: "#111827",
+                padding: "0.5rem 1rem",
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                color: "#fff",
+                border: "none",
+                cursor: "pointer",
+              }}
+            >
+              Chấp nhận tất cả
+            </button>
+            <button
+              type="button"
+              onClick={handleReject}
+              disabled={createConsent.isPending}
+              className="consent:rounded-lg consent:bg-gray-900 consent:px-4 consent:py-2 consent:text-sm consent:font-medium consent:text-white consent:shadow-sm hover:consent:bg-gray-800 disabled:consent:opacity-50"
+              style={{
+                borderRadius: "0.5rem",
+                background: "#111827",
+                padding: "0.5rem 1rem",
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                color: "#fff",
+                border: "none",
+                cursor: "pointer",
+              }}
+            >
+              Từ chối tất cả
+            </button>
+          </div>
+          <button
+            type="button"
+            onClick={() => setShowCustomModal(true)}
+            className="consent:text-blue-600 consent:underline consent:bg-transparent consent:border-0 consent:p-0 consent:text-sm consent:cursor-pointer consent:font-inherit"
+            style={{
+              color: "#2563eb",
+              textDecoration: "underline",
+              background: "none",
+              border: "none",
+              padding: 0,
+              fontSize: "0.875rem",
+              cursor: "pointer",
+              font: "inherit",
+              alignSelf: "flex-start",
+            }}
+          >
+            Tuỳ chọn
+          </button>
+        </div>
+        {createConsent.isError && (
+          <p
+            className="consent:text-sm consent:text-red-600"
+            style={{ fontSize: "0.875rem", color: "#dc2626" }}
+          >
+            Đã xảy ra lỗi. Vui lòng thử lại.
+          </p>
+        )}
+      </div>
+
+      {/* Screen 2: Custom preferences modal */}
+      {showCustomModal && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label="Trung tâm tuỳ chọn bảo mật"
           style={{
-            borderRadius: "0.5rem",
-            background: "#111827",
-            padding: "0.5rem 1rem",
-            fontSize: "0.875rem",
-            fontWeight: 500,
-            color: "#fff",
+            position: "fixed",
+            inset: 0,
+            zIndex: 60,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(0,0,0,0.5)",
+            padding: "1rem",
           }}
+          onClick={(e) => e.target === e.currentTarget && setShowCustomModal(false)}
         >
-          Save preferences
-        </button>
-      </div>
-      {createConsent.isError && (
-        <p
-          className="consent:text-sm consent:text-red-600"
-          style={{ fontSize: "0.875rem", color: "#dc2626" }}
-        >
-          Something went wrong. Please try again.
-        </p>
+          <div
+            className="consent:bg-white consent:rounded-xl consent:border consent:border-gray-200 consent:shadow-lg consent:max-h-[90vh] consent:overflow-y-auto"
+            style={{
+              backgroundColor: "#fff",
+              borderRadius: "0.75rem",
+              border: "1px solid #e5e7eb",
+              boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+              maxWidth: "28rem",
+              width: "100%",
+              maxHeight: "90vh",
+              overflowY: "auto",
+              padding: "1.25rem",
+              position: "relative",
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              type="button"
+              onClick={() => setShowCustomModal(false)}
+              aria-label="Đóng"
+              style={{
+                position: "absolute",
+                top: "1rem",
+                right: "1rem",
+                width: "2rem",
+                height: "2rem",
+                borderRadius: "0.25rem",
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
+                fontSize: "1.25rem",
+                lineHeight: 1,
+                color: "#6b7280",
+              }}
+            >
+              ×
+            </button>
+            <h2
+              className="consent:text-lg consent:font-semibold consent:text-gray-900"
+              style={{ fontSize: "1.125rem", fontWeight: 600, color: "#111827", marginBottom: "0.75rem", paddingRight: "2rem" }}
+            >
+              Trung tâm tuỳ chọn bảo mật
+            </h2>
+            <div
+              className="consent:text-sm consent:text-gray-600"
+              style={{ fontSize: "0.875rem", color: "#4b5563", marginBottom: "1rem" }}
+            >
+              <p style={{ marginBottom: "0.5rem" }}>
+                Khi bạn truy cập bất kỳ trang web nào, trang web đó có thể lưu trữ hoặc truy xuất thông tin trên trình duyệt của bạn, chủ yếu dưới dạng cookie. Thông tin này có thể liên quan đến bạn, tùy chọn của bạn hoặc thiết bị của bạn, và chủ yếu được sử dụng để trang web hoạt động như mong đợi.
+              </p>
+              <p style={{ marginBottom: "0.5rem" }}>
+                Thông tin này thường không trực tiếp xác định bạn nhưng có thể mang lại trải nghiệm web được cá nhân hóa hơn. Chúng tôi tôn trọng quyền riêng tư của bạn; bạn có thể chọn không cho phép một số loại cookie. Nhấp vào tiêu đề từng danh mục để tìm hiểu thêm và thay đổi cài đặt mặc định. Việc chặn một số cookie có thể ảnh hưởng đến trải nghiệm của bạn với trang web và các dịch vụ được cung cấp.
+              </p>
+              <p style={{ marginBottom: "0.5rem" }}>
+                Nếu chọn "Không theo dõi" khi lần đầu sử dụng TapQuest, chỉ cookie hoàn toàn cần thiết mới được sử dụng.
+              </p>
+              {OTHER_INFO_URL ? (
+                <a
+                  href={OTHER_INFO_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="consent:text-blue-600 consent:underline"
+                  style={{ color: "#2563eb", textDecoration: "underline" }}
+                >
+                  Thông tin khác
+                </a>
+              ) : (
+                <span style={{ color: "#2563eb", textDecoration: "underline" }}>Thông tin khác</span>
+              )}
+            </div>
+            <h3
+              className="consent:text-sm consent:font-semibold consent:text-gray-900"
+              style={{ fontSize: "0.875rem", fontWeight: 600, color: "#111827", marginBottom: "0.75rem" }}
+            >
+              Quản lý tuỳ chọn đồng ý
+            </h3>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", marginBottom: "1.25rem" }}>
+              {PREFERENCES.map((key) => {
+                const config = PREFERENCE_CONFIG[key];
+                const checked = preferences[key];
+                const isExpanded = expandedKey === key;
+                return (
+                  <div
+                    key={key}
+                    style={{
+                      border: "1px solid #e5e7eb",
+                      borderRadius: "0.5rem",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "0.5rem",
+                        padding: "0.75rem",
+                        cursor: "pointer",
+                        backgroundColor: isExpanded ? "#f9fafb" : "transparent",
+                      }}
+                      onClick={() => setExpandedKey(isExpanded ? null : key)}
+                    >
+                      <span
+                        style={{
+                          flexShrink: 0,
+                          width: "1.25rem",
+                          height: "1.25rem",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontSize: "1rem",
+                          color: "#6b7280",
+                          transform: isExpanded ? "rotate(45deg)" : "none",
+                          transition: "transform 0.2s",
+                        }}
+                      >
+                        +
+                      </span>
+                      <span
+                        className="consent:font-medium consent:text-gray-900"
+                        style={{ flex: 1, fontSize: "0.875rem", fontWeight: 500, color: "#111827" }}
+                      >
+                        {config.labelVi}
+                      </span>
+                      <button
+                        type="button"
+                        role="switch"
+                        aria-checked={checked}
+                        aria-label={`${config.labelVi} ${checked ? "bật" : "tắt"}`}
+                        disabled={config.disabled}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          togglePreference(key);
+                        }}
+                        style={{
+                          flexShrink: 0,
+                          width: 44,
+                          height: 24,
+                          borderRadius: 12,
+                          border: "none",
+                          padding: 0,
+                          cursor: config.disabled ? "default" : "pointer",
+                          backgroundColor: config.disabled ? "#e5e7eb" : checked ? "#111827" : "#d1d5db",
+                          opacity: config.disabled ? 0.7 : 1,
+                          transition: "background-color 0.2s",
+                        }}
+                      >
+                        <span
+                          style={{
+                            display: "block",
+                            width: 20,
+                            height: 20,
+                            borderRadius: "50%",
+                            backgroundColor: "#fff",
+                            marginLeft: checked ? 22 : 2,
+                            marginTop: 2,
+                            transition: "margin-left 0.2s",
+                            boxShadow: "0 1px 2px rgb(0 0 0 / 0.2)",
+                          }}
+                        />
+                      </button>
+                    </div>
+                    {isExpanded && (
+                      <div
+                        className="consent:text-sm consent:text-gray-600"
+                        style={{
+                          fontSize: "0.875rem",
+                          color: "#4b5563",
+                          padding: "0 0.75rem 0.75rem 2.5rem",
+                          borderTop: "1px solid #e5e7eb",
+                        }}
+                      >
+                        {config.descriptionVi}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+            <button
+              type="button"
+              onClick={handleSaveCustom}
+              disabled={createConsent.isPending}
+              className="consent:rounded-lg consent:bg-gray-900 consent:px-4 consent:py-2 consent:text-sm consent:font-medium consent:text-white consent:shadow-sm hover:consent:bg-gray-800 disabled:consent:opacity-50 consent:w-full"
+              style={{
+                borderRadius: "0.5rem",
+                background: "#111827",
+                padding: "0.5rem 1rem",
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                color: "#fff",
+                border: "none",
+                cursor: "pointer",
+                width: "100%",
+              }}
+            >
+              Xác nhận lựa chọn của tôi
+            </button>
+          </div>
+        </div>
       )}
-    </div>
+    </>
   );
 }

package/src/env/constant.ts

@@ -1 +1,7 @@
 export const CONSENT_API_BASE_URL = "";
+
+/** URL to cookie policy page (e.g. for "Chính sách cookie" link). */
+export const COOKIE_POLICY_URL = "";
+
+/** URL to other information page (e.g. for "Thông tin khác" link in preferences modal). */
+export const OTHER_INFO_URL = "";

package/src/helpers/index.ts

@@ -1 +1,2 @@
 export * from "./cookie";
+export * from "./sha256";