@phygitallabs/phygital-consent 1.0.8 → 1.0.10

package/src/components/CookieConsentBanner.tsx

@@ -81,7 +81,7 @@ export function CookieConsentBanner({
     createConsent.mutate({
       device_id: deviceId,
       status: "REJECTED",
-      selected_preferences: [],
+      selected_preferences: ["essential"],
     });
   };
 
@@ -98,7 +98,7 @@ export function CookieConsentBanner({
     createConsent.mutate({
       device_id: deviceId,
       status: "ACCEPTED",
-      selected_preferences: selected.length > 0 ? selected : [],
+      selected_preferences: selected.length > 0 ? selected : ["essential"],
     });
   };
 

package/src/components/PolicyPopup.tsx

@@ -28,8 +28,8 @@ export function PolicyPopup({
   const [showRefusalAlert, setShowRefusalAlert] = useState(false);
 
   const createUserConsent = useCreateUserConsent({
-    onSuccess: () => {
-      onAgreeSuccess?.();
+    onSuccess: (_data, variables) => {
+      if (variables.status === "ACCEPTED") onAgreeSuccess?.();
       handleClose();
     },
   });
@@ -44,9 +44,15 @@ export function PolicyPopup({
     setShowRefusalAlert(true);
   };
 
-  const handleRefusalAck = () => {
+  const handleBackToPolicy = () => {
     setShowRefusalAlert(false);
-    onClose();
+  };
+
+  const handleConfirmReject = () => {
+    createUserConsent.mutate({
+      user_id: userId,
+      status: "REJECTED",
+    });
   };
 
   const handleAgree = () => {
@@ -91,17 +97,37 @@ export function PolicyPopup({
             overflow: "hidden",
             display: "flex",
             flexDirection: "column",
+            position: "relative",
           }}
           onClick={(e) => e.stopPropagation()}
         >
+          <button
+            type="button"
+            onClick={handleClose}
+            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",
+              fontSize: "18px",
               fontWeight: 600,
-              color: "#2563eb",
-              padding: "1rem 1.25rem",
-              borderBottom: "1px solid #e5e7eb",
+              color: "#000",
+              padding: "20px 2.5rem 12px 20px",
             }}
           >
             Chính sách bảo mật
@@ -122,8 +148,7 @@ export function PolicyPopup({
           </div>
           <div
             style={{
-              padding: "1rem 1.25rem",
-              borderTop: "1px solid #e5e7eb",
+              padding: "1rem 1.25rem 1.25rem 1.25rem",
               display: "flex",
               flexDirection: "column",
               gap: "1rem",
@@ -159,21 +184,20 @@ export function PolicyPopup({
                 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"
+                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={{
                   flex: 1,
-                  minWidth: 0,
                   borderRadius: "0.5rem",
-                  background: "#111827",
+                  border: "1px solid #111827",
+                  background: "#fff",
                   padding: "0.5rem 1rem",
                   fontSize: "0.875rem",
                   fontWeight: 500,
-                  color: "#fff",
-                  border: "none",
+                  color: "#111827",
                   cursor: "pointer",
                 }}
               >
-                Bỏ qua
+                Từ chối
               </button>
               <button
                 type="button"
@@ -224,7 +248,7 @@ export function PolicyPopup({
             backgroundColor: "rgba(0,0,0,0.5)",
             padding: "1rem",
           }}
-          onClick={(e) => e.target === e.currentTarget && handleRefusalAck()}
+          onClick={(e) => e.target === e.currentTarget && handleBackToPolicy()}
         >
           <div
             className="consent:bg-white consent:rounded-xl consent:border consent:border-gray-200 consent:shadow-lg"
@@ -250,24 +274,60 @@ export function PolicyPopup({
             >
               {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"
+            <div
               style={{
-                borderRadius: "0.5rem",
-                background: "#111827",
-                padding: "0.5rem 1rem",
-                fontSize: "0.875rem",
-                fontWeight: 500,
-                color: "#fff",
-                border: "none",
-                cursor: "pointer",
-                width: "100%",
+                display: "flex",
+                gap: "0.5rem",
+                flexWrap: "wrap",
               }}
             >
-              Tôi đã hiểu
-            </button>
+              <button
+                type="button"
+                onClick={handleBackToPolicy}
+                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={{
+                  flex: 1,
+                  borderRadius: "0.5rem",
+                  border: "1px solid #111827",
+                  background: "#fff",
+                  padding: "0.5rem 1rem",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  color: "#111827",
+                  cursor: "pointer",
+                }}
+              >
+                Trở lại
+              </button>
+              <button
+                type="button"
+                onClick={handleConfirmReject}
+                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 disabled:consent:opacity-50 consent:flex-1"
+                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",
+                }}
+              >
+                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.5rem 0 0 0" }}
+              >
+                Đã xảy ra lỗi. Vui lòng thử lại.
+              </p>
+            )}
           </div>
         </div>
       )}