@phygitallabs/phygital-consent 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phygitallabs/phygital-consent",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/api/docs.json

@@ -276,7 +276,9 @@
         "version": { "type": "string" },
         "effective_date": { "type": "string", "format": "date-time" },
         "last_updated": { "type": "string", "format": "date-time" },
-        "meta_data": { "type": "object" }
+        "meta_data": { "type": "object" },
+        "id": { "type": "string" },
+        "content": { "type": "string" }
       }
     },
     "PolicyPreference": {

package/src/components/PolicyPopup.tsx

@@ -2,10 +2,7 @@
 
 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();
+import { usePolicies } from "../hooks";
 
 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. Nhấn nút 'Đồng ý' để tiếp tục";
@@ -29,6 +26,26 @@ export function PolicyPopup({
   const [agreed, setAgreed] = useState(false);
   const [showRefusalAlert, setShowRefusalAlert] = useState(false);
 
+  const { data: policies } = usePolicies({
+    type: "ACCOUNT_REGISTER",
+  });
+
+  const handleParseJson = (full_description?: string) => {
+    try {
+      return JSON.parse(full_description || "");
+    } catch {
+      return {
+        htmlContent: "",
+      };
+    }
+  };
+
+  const privacyPolicyDocument = policies?.data?.[0]?.documents?.find(
+    (policy) => policy.id === "privacy_policy",
+  );
+
+  const document = handleParseJson(privacyPolicyDocument?.content);
+
   const createUserConsent = useCreateUserConsent({
     onSuccess: (_data, variables) => {
       if (variables.status === "ACCEPTED") onAgreeSuccess?.();
@@ -77,16 +94,23 @@ export function PolicyPopup({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
+          padding: "1rem",
         }}
       >
         <div
-          className="consent:overflow-hidden consent:flex consent:flex-col"
+          className="consent:bg-white 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%",
-            height: "100%",
+            maxHeight: "90vh",
             overflow: "hidden",
             display: "flex",
             flexDirection: "column",
+            position: "relative",
           }}
           onClick={(e) => e.stopPropagation()}
         >
@@ -113,7 +137,7 @@ export function PolicyPopup({
           </button> */}
           <h2
             style={{
-              fontSize: "20px",
+              fontSize: "18px",
               fontWeight: 600,
               color: "#000",
               padding: "20px 2.5rem 12px 20px",
@@ -126,13 +150,13 @@ export function PolicyPopup({
               flex: 1,
               overflowY: "auto",
               padding: "1rem 1.25rem",
-              fontSize: "1rem",
+              fontSize: "0.875rem",
               color: "#111827",
               lineHeight: 1.6,
             }}
           >
             <p style={{ margin: 0, whiteSpace: "pre-wrap" }}>
-              {POLICY_PLACEHOLDER}
+              {document?.htmlContent}
             </p>
           </div>
           <div
@@ -180,7 +204,7 @@ export function PolicyPopup({
                   border: "1px solid #111827",
                   background: "#fff",
                   padding: "0.5rem 1rem",
-                  fontSize: "1rem",
+                  fontSize: "0.875rem",
                   fontWeight: 500,
                   color: "#111827",
                   cursor: "pointer",
@@ -199,7 +223,7 @@ export function PolicyPopup({
                   borderRadius: "0.5rem",
                   background: agreed ? "#111827" : "#e5e7eb",
                   padding: "0.5rem 1rem",
-                  fontSize: "1rem",
+                  fontSize: "0.875rem",
                   fontWeight: 500,
                   color: agreed ? "#fff" : "#9ca3af",
                   border: "none",
@@ -212,7 +236,7 @@ export function PolicyPopup({
             {createUserConsent.isError && (
               <p
                 className="consent:text-sm consent:text-red-600"
-                style={{ fontSize: "1rem", color: "#dc2626", margin: 0 }}
+                style={{ fontSize: "0.875rem", color: "#dc2626", margin: 0 }}
               >
                 Đã xảy ra lỗi. Vui lòng thử lại.
               </p>
@@ -255,7 +279,7 @@ export function PolicyPopup({
             <p
               className="consent:text-sm consent:text-gray-700"
               style={{
-                fontSize: "1rem",
+                fontSize: "0.875rem",
                 color: "#374151",
                 margin: "0 0 1rem 0",
                 lineHeight: 1.5,
@@ -280,7 +304,7 @@ export function PolicyPopup({
                   border: "1px solid #111827",
                   background: "#fff",
                   padding: "0.5rem 1rem",
-                  fontSize: "1rem",
+                  fontSize: "0.875rem",
                   fontWeight: 500,
                   color: "#111827",
                   cursor: "pointer",
@@ -299,7 +323,7 @@ export function PolicyPopup({
                   borderRadius: "0.5rem",
                   background: "#a71f24",
                   padding: "0.5rem 1rem",
-                  fontSize: "1rem",
+                  fontSize: "0.875rem",
                   fontWeight: 500,
                   color: "#fff",
                   border: "none",
@@ -312,7 +336,7 @@ export function PolicyPopup({
             {createUserConsent.isError && (
               <p
                 className="consent:text-sm consent:text-red-600"
-                style={{ fontSize: "1rem", color: "#dc2626", margin: "0.5rem 0 0 0" }}
+                style={{ fontSize: "0.875rem", color: "#dc2626", margin: "0.5rem 0 0 0" }}
               >
                 Đã xảy ra lỗi. Vui lòng thử lại.
               </p>

package/src/types/consent.ts

@@ -15,6 +15,8 @@ export interface PolicyDocument {
   effective_date?: string;
   last_updated?: string;
   meta_data?: Record<string, unknown>;
+  id?: string;
+  content?: string;
 }
 
 export interface PolicyPreference {