@phygitallabs/phygital-consent 1.0.5 → 1.0.6

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,7 +2,9 @@
 
 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 {
@@ -11,6 +13,11 @@ export interface PhygitalConsentContextValue {
   hasConsentPreference: boolean;
   /** Re-read cookie and update hasConsentPreference. Call after storing preference (e.g. from CookieConsentBanner onSuccess). */
   refreshConsentPreference: () => void;
+  /**
+   * Open policy popup if user has no latest consent. Receives userId; calls useLatestConsentByUserId.
+   * If data exists, popup is not shown. If no data, policy popup is shown.
+   */
+  openPolicyPopup: (userId: string) => void;
 }
 
 const PhygitalConsentContext = createContext<PhygitalConsentContextValue | undefined>(undefined);
@@ -35,12 +42,40 @@ export interface PhygitalConsentProviderProps extends ConsentServiceProviderProp
 export function PhygitalConsentProvider(props: PhygitalConsentProviderProps) {
   const { children, deviceId, showBannerWhenNoPreference = true, ...consentServiceProps } = props;
   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,6 +84,7 @@ export function PhygitalConsentProvider(props: PhygitalConsentProviderProps) {
     deviceId,
     hasConsentPreference,
     refreshConsentPreference,
+    openPolicyPopup,
   };
 
   return (
@@ -58,6 +94,13 @@ export function PhygitalConsentProvider(props: PhygitalConsentProviderProps) {
         {showBannerWhenNoPreference && !hasConsentPreference && (
           <CookieConsentBanner onSubmitted={refreshConsentPreference} />
         )}
+        {showPolicyPopup && policyUserId && (
+          <PolicyPopup
+            open={showPolicyPopup}
+            onClose={closePolicyPopup}
+            userId={policyUserId}
+          />
+        )}
       </PhygitalConsentContext.Provider>
     </ConsentServiceProvider>
   );