@phygitallabs/phygital-consent 1.0.5 → 1.0.7

package/src/components/PolicyPopup.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { useState } from "react";
+import { useCreateUserConsent } from "../hooks/useConsent";
+
+const POLICY_PLACEHOLDER = `
+Tanta petere igitur et tam longe abesse non opus est. Quodsi haberent magnalia inter potentiam et divitias, et tamen ista philosophia et disciplina vivendi. Quam ob rem ut illi superiores, nos usque ad hanc aetatem. Sed ut iis bonis erudiamur, quae gignuntur ex tempore. Et tamen rerum necessitatibus saepe vincimur. Quam ob rem ut illi superiores, nos usque ad hanc aetatem.
+`.trim();
+
+const REFUSAL_MESSAGE =
+  "Vì bạn không đồng ý với thỏa thuận này. Chúng tôi sẽ xóa tài khoản trong vòng x ngày";
+
+export interface PolicyPopupProps {
+  open: boolean;
+  onClose: () => void;
+  userId: string;
+  /** Called after user agrees and consent is created successfully. */
+  onAgreeSuccess?: () => void;
+}
+
+export function PolicyPopup({
+  open,
+  onClose,
+  userId,
+  onAgreeSuccess,
+}: PolicyPopupProps) {
+  const [agreed, setAgreed] = useState(false);
+  const [showRefusalAlert, setShowRefusalAlert] = useState(false);
+
+  const createUserConsent = useCreateUserConsent({
+    onSuccess: () => {
+      onAgreeSuccess?.();
+      handleClose();
+    },
+  });
+
+  const handleClose = () => {
+    setAgreed(false);
+    setShowRefusalAlert(false);
+    onClose();
+  };
+
+  const handleRefuse = () => {
+    setShowRefusalAlert(true);
+  };
+
+  const handleRefusalAck = () => {
+    setShowRefusalAlert(false);
+    onClose();
+  };
+
+  const handleAgree = () => {
+    if (!agreed) return;
+    createUserConsent.mutate({
+      user_id: userId,
+      status: "ACCEPTED"
+    });
+  };
+
+  if (!open) return null;
+
+  return (
+    <>
+      {/* Policy modal */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Chính sách bảo mật"
+        style={{
+          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 && handleClose()}
+      >
+        <div
+          className="consent:bg-white consent:rounded-xl consent:border consent:border-gray-200 consent:shadow-lg consent:max-h-[90vh] consent:overflow-hidden consent:flex consent:flex-col"
+          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",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <h2
+            className="consent:text-lg consent:font-semibold consent:text-gray-900"
+            style={{
+              fontSize: "1.125rem",
+              fontWeight: 600,
+              color: "#2563eb",
+              padding: "1rem 1.25rem",
+              borderBottom: "1px solid #e5e7eb",
+            }}
+          >
+            Chính sách bảo mật
+          </h2>
+          <div
+            style={{
+              flex: 1,
+              overflowY: "auto",
+              padding: "1rem 1.25rem",
+              fontSize: "0.875rem",
+              color: "#111827",
+              lineHeight: 1.6,
+            }}
+          >
+            <p style={{ margin: 0, whiteSpace: "pre-wrap" }}>
+              {POLICY_PLACEHOLDER}
+            </p>
+          </div>
+          <div
+            style={{
+              padding: "1rem 1.25rem",
+              borderTop: "1px solid #e5e7eb",
+              display: "flex",
+              flexDirection: "column",
+              gap: "1rem",
+            }}
+          >
+            <label
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                fontSize: "0.875rem",
+                color: "#111827",
+                cursor: "pointer",
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={agreed}
+                onChange={(e) => setAgreed(e.target.checked)}
+                style={{ width: "1rem", height: "1rem", accentColor: "#111827" }}
+                aria-label="Tôi đồng ý với chính sách bảo mật trên"
+              />
+              <span>Tôi đồng ý với chính sách bảo mật trên</span>
+            </label>
+            <div
+              style={{
+                display: "flex",
+                gap: "0.5rem",
+                flexWrap: "wrap",
+              }}
+            >
+              <button
+                type="button"
+                onClick={handleRefuse}
+                disabled={createUserConsent.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={{
+                  flex: 1,
+                  minWidth: 0,
+                  borderRadius: "0.5rem",
+                  background: "#111827",
+                  padding: "0.5rem 1rem",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  color: "#fff",
+                  border: "none",
+                  cursor: "pointer",
+                }}
+              >
+                Bỏ qua
+              </button>
+              <button
+                type="button"
+                onClick={handleAgree}
+                disabled={!agreed || createUserConsent.isPending}
+                className="consent:rounded-lg consent:px-4 consent:py-2 consent:text-sm consent:font-medium consent:shadow-sm disabled:consent:opacity-50 disabled:consent:cursor-not-allowed"
+                style={{
+                  flex: 1,
+                  minWidth: 0,
+                  borderRadius: "0.5rem",
+                  background: agreed ? "#111827" : "#e5e7eb",
+                  padding: "0.5rem 1rem",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  color: agreed ? "#fff" : "#9ca3af",
+                  border: "none",
+                  cursor: agreed ? "pointer" : "not-allowed",
+                }}
+              >
+                Tiếp tục
+              </button>
+            </div>
+            {createUserConsent.isError && (
+              <p
+                className="consent:text-sm consent:text-red-600"
+                style={{ fontSize: "0.875rem", color: "#dc2626", margin: 0 }}
+              >
+                Đã xảy ra lỗi. Vui lòng thử lại.
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Refusal alert modal */}
+      {showRefusalAlert && (
+        <div
+          role="alertdialog"
+          aria-modal="true"
+          aria-label="Thông báo từ chối"
+          style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: 70,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(0,0,0,0.5)",
+            padding: "1rem",
+          }}
+          onClick={(e) => e.target === e.currentTarget && handleRefusalAck()}
+        >
+          <div
+            className="consent:bg-white consent:rounded-xl consent:border consent:border-gray-200 consent:shadow-lg"
+            style={{
+              backgroundColor: "#fff",
+              borderRadius: "0.75rem",
+              border: "1px solid #e5e7eb",
+              boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+              maxWidth: "22rem",
+              width: "100%",
+              padding: "1.25rem",
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <p
+              className="consent:text-sm consent:text-gray-700"
+              style={{
+                fontSize: "0.875rem",
+                color: "#374151",
+                margin: "0 0 1rem 0",
+                lineHeight: 1.5,
+              }}
+            >
+              {REFUSAL_MESSAGE}
+            </p>
+            <button
+              type="button"
+              onClick={handleRefusalAck}
+              className="consent:rounded-lg consent:bg-gray-900 consent:px-4 consent:py-2 consent:text-sm consent:font-medium consent:text-white 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%",
+              }}
+            >
+              Tôi đã hiểu
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/index.ts

@@ -1 +1,2 @@
 export * from "./CookieConsentBanner";
+export * from "./PolicyPopup";

package/src/provider/PhygitalConsentProvider.tsx

@@ -2,15 +2,16 @@
 
 import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { CookieConsentBanner } from "../components/CookieConsentBanner";
+import { PolicyPopup } from "../components/PolicyPopup";
 import { getConsentPreferenceCookie } from "../helpers/cookie";
+import { useLatestConsentByUserId } from "../hooks/useConsent";
 import { ConsentServiceProvider, ConsentServiceProviderProps } from "./ConsentServiceProvider";
 
 export interface PhygitalConsentContextValue {
   deviceId: string;
-  /** True when cookie phygital_cookie_consent exists and has valid deviceId + selected_preferences. Use to show/hide cookie banner. */
   hasConsentPreference: boolean;
-  /** Re-read cookie and update hasConsentPreference. Call after storing preference (e.g. from CookieConsentBanner onSuccess). */
   refreshConsentPreference: () => void;
+  openPolicyPopup: (userId: string) => void;
 }
 
 const PhygitalConsentContext = createContext<PhygitalConsentContextValue | undefined>(undefined);
@@ -18,29 +19,50 @@ const PhygitalConsentContext = createContext<PhygitalConsentContextValue | undef
 export interface PhygitalConsentProviderProps extends ConsentServiceProviderProps {
   deviceId: string;
   children: React.ReactNode;
-  /**
-   * When true (default), render CookieConsentBanner automatically when hasConsentPreference is false.
-   * Set to false if you want to render the banner yourself (e.g. in a layout) using usePhygitalConsent().
-   */
   showBannerWhenNoPreference?: boolean;
 }
 
-/**
- * Main provider for consumer apps. Wraps ConsentServiceProvider and exposes
- * hasConsentPreference + refreshConsentPreference so the app can show/hide
- * the cookie banner based on whether the user has already chosen a preference.
- * When showBannerWhenNoPreference is true (default), the consent banner is
- * rendered automatically on app start when the user has no stored preference.
- */
-export function PhygitalConsentProvider(props: PhygitalConsentProviderProps) {
-  const { children, deviceId, showBannerWhenNoPreference = true, ...consentServiceProps } = props;
+/** Inner provider: runs inside ConsentServiceProvider so useLatestConsentByUserId has context. */
+function PhygitalConsentProviderInner({
+  children,
+  deviceId,
+  showBannerWhenNoPreference = true,
+}: Pick<PhygitalConsentProviderProps, "children" | "deviceId" | "showBannerWhenNoPreference">) {
   const [hasConsentPreference, setHasConsentPreference] = useState(false);
+  const [pendingUserId, setPendingUserId] = useState<string | null>(null);
+  const [showPolicyPopup, setShowPolicyPopup] = useState(false);
+  const [policyUserId, setPolicyUserId] = useState<string | null>(null);
+
+  const { data: latestConsent, isFetched } = useLatestConsentByUserId({
+    user_id: pendingUserId ?? "",
+  });
+
+  useEffect(() => {
+    if (!pendingUserId || !isFetched) return;
+    if (latestConsent != null) {
+      setPendingUserId(null);
+      return;
+    }
+    setPolicyUserId(pendingUserId);
+    setShowPolicyPopup(true);
+    setPendingUserId(null);
+  }, [pendingUserId, isFetched, latestConsent]);
 
   const refreshConsentPreference = useCallback(() => {
     const stored = getConsentPreferenceCookie();
     setHasConsentPreference(!!stored);
   }, []);
 
+  const openPolicyPopup = useCallback((userId: string) => {
+    if (!userId) return;
+    setPendingUserId(userId);
+  }, []);
+
+  const closePolicyPopup = useCallback(() => {
+    setShowPolicyPopup(false);
+    setPolicyUserId(null);
+  }, []);
+
   useEffect(() => {
     refreshConsentPreference();
   }, [refreshConsentPreference]);
@@ -49,16 +71,37 @@ export function PhygitalConsentProvider(props: PhygitalConsentProviderProps) {
     deviceId,
     hasConsentPreference,
     refreshConsentPreference,
+    openPolicyPopup,
   };
 
+  return (
+    <PhygitalConsentContext.Provider value={value}>
+      {children}
+      {showBannerWhenNoPreference && !hasConsentPreference && (
+        <CookieConsentBanner onSubmitted={refreshConsentPreference} />
+      )}
+      {showPolicyPopup && policyUserId && (
+        <PolicyPopup
+          open={showPolicyPopup}
+          onClose={closePolicyPopup}
+          userId={policyUserId}
+        />
+      )}
+    </PhygitalConsentContext.Provider>
+  );
+}
+
+export function PhygitalConsentProvider(props: PhygitalConsentProviderProps) {
+  const { children, deviceId, showBannerWhenNoPreference = true, ...consentServiceProps } = props;
+
   return (
     <ConsentServiceProvider {...consentServiceProps}>
-      <PhygitalConsentContext.Provider value={value}>
+      <PhygitalConsentProviderInner
+        deviceId={deviceId}
+        showBannerWhenNoPreference={showBannerWhenNoPreference}
+      >
         {children}
-        {showBannerWhenNoPreference && !hasConsentPreference && (
-          <CookieConsentBanner onSubmitted={refreshConsentPreference} />
-        )}
-      </PhygitalConsentContext.Provider>
+      </PhygitalConsentProviderInner>
     </ConsentServiceProvider>
   );
 }