saafe-redirection-flow 2.0.0

package/src/pages/consent/rejected.tsx

@@ -0,0 +1,253 @@
+import { XCircle } from 'lucide-react';
+import logo from "../../assets/brand/saafe-logo.svg";
+import { motion } from "framer-motion";
+import { useRedirectStore } from "@/store/redirect.store";
+import { useState, useEffect } from "react";
+import { feedbackService } from "@/services/api";
+import { useLocation } from 'react-router-dom';
+import { useFipStore } from '@/store/fip.store';
+
+interface ConsentResultItem {
+  reasonForRejection: string;
+  ConsentStatus?: string;
+}
+
+const Rejected = () => {
+  const [selectedFeedback, setSelectedFeedback] = useState<string | null>(null);
+  const [customFeedback, setCustomFeedback] = useState<string>("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [countdown, setCountdown] = useState(9);
+  const { decodedInfo } = useRedirectStore();
+  const { selectedAccountToLink } = useFipStore()
+  const location = useLocation();
+  const consentResult = location.state?.consentResult as ConsentResultItem[] | undefined;
+  const consentHandle = decodedInfo?.srcref || '';
+
+  // Send failed postMessage after 8 seconds of countdown (when countdown reaches 1)
+  useEffect(() => {
+    if (countdown === 1) {
+      console.log("Sending message to parent");
+      const fipCodes = consentResult?.map((item: ConsentResultItem) =>
+        item.reasonForRejection.match(/\[(.*?)\]/)?.[1]
+      );
+      const fipNames = selectedAccountToLink?.filter(item => 
+        fipCodes?.join(", ").split(", ").includes(item.fipHandle)
+      )?.map(item => item.fipName);
+      const uniqueFipNames = [...new Set(fipNames)];
+      
+      window.parent.postMessage(
+        { 
+          type: 'AA', 
+          status: 'rejected', 
+          flowCompleted: true,
+          consentHandle: consentHandle,
+          rejectionReason: consentResult,
+          rejectedByFips: uniqueFipNames,
+          userFeedback: selectedFeedback,
+          customFeedback: selectedFeedback === "custom" ? customFeedback : null,
+          redirectUrl: decodedInfo?.redirect,
+          timestamp: new Date().toISOString()
+        },
+        '*'
+      );
+    }
+  }, [countdown, consentHandle, consentResult, selectedAccountToLink, selectedFeedback, customFeedback, decodedInfo?.redirect]);
+
+  // Handle countdown and redirection
+  useEffect(() => {
+    if (countdown <= 0 && decodedInfo?.redirect) {
+      // Redirect to the URL when countdown reaches zero
+      window.location.href = decodedInfo.redirect;
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setCountdown((prev) => prev - 1);
+    }, 1000);
+
+    localStorage.clear();
+    sessionStorage.clear();
+    console.log("Session and localStorage cleared");
+
+    return () => clearTimeout(timer);
+  }, [countdown, decodedInfo?.redirect]);
+
+  const feedbackOptions = [
+    { id: "unclear-details", text: "Unclear details 🤔" },
+    { id: "confusing-flow", text: "Confusing flow 😕" },
+    { id: "linking-issues", text: "Linking Issues 🔗" },
+  ];
+
+  const handleFeedbackSelect = async (feedback: string) => {
+    // Don't allow selection if already submitted or submitting
+    if (isSubmitted || isSubmitting) return;
+
+    setSelectedFeedback(feedback);
+
+    // For custom feedback, don't submit immediately
+    if (feedback === "custom") return;
+
+    await submitFeedback(feedback);
+  };
+
+  const handleCustomFeedbackSubmit = async () => {
+    if (!customFeedback.trim() || isSubmitting || isSubmitted) return;
+
+    await submitFeedback(customFeedback);
+  };
+
+  const submitFeedback = async (feedback: string) => {
+    try {
+      setIsSubmitting(true);
+
+      await feedbackService.submitFeedback({
+        feedback,
+        consentHandle
+      });
+
+      setIsSubmitted(true);
+    } catch {
+      // console.error('Error submitting feedback:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col min-h-screen bg-background">
+      {/* Timer Section - Top */}
+      {decodedInfo?.redirect && (
+        <div className="p-4 text-center">
+          <p className="text-muted-secondary">
+            Redirecting in <span className="font-semibold">00:{countdown < 10 ? `0${countdown}` : countdown}</span>
+          </p>
+        </div>
+      )}
+
+      {/* Main Content - Center */}
+      <div className="flex-1 flex items-center justify-center p-6">
+        <motion.div
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.2, duration: 0.5 }}
+          className="flex flex-col items-center w-full max-w-md mx-auto"
+        >
+            <div className="rounded-full bg-red-100 p-6 mb-8">
+              <XCircle className="h-16 w-16 text-red-600" />
+            </div>
+
+            <h1 className="md:text-3xl text-lg font-semibold mb-4 dark:text-gray-300">Consent Rejected</h1>
+
+            {consentResult && consentResult.length > 0 && <p className="text-center mb-2 text-muted-secondary md:text-md text-xs">
+              Your consent has been rejected for the following reason:
+              <br />
+              <div className="mt-1">
+                {
+                  (() => {
+                    const fipCodes = consentResult?.map(item =>
+                      item.reasonForRejection.match(/\[(.*?)\]/)?.[1]
+                    );
+                    const fipNames = selectedAccountToLink?.filter(item => fipCodes?.join(", ").split(", ").includes(item.fipHandle))?.map(item => item.fipName)
+                    // remove the duplicate fipCodes
+                    const uniqueFipCodes = [...new Set((fipNames))];
+                    const result = `Consent rejected by FIP: [${uniqueFipCodes?.join(", ")}]`;
+                    return <div>{result}</div>;
+                  })()
+                }
+              </div>
+            </p>}
+            <p className="text-center mb-8 text-muted-secondary md:text-md text-xs">
+              View this consent detail anytime later using saafe app
+            </p>
+
+            {/* Feedback Section */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.5 }}
+              className="w-full max-w-md mt-8"
+            >
+              <h2 className="md:text-lg text-sm font-normal text-muted-secondary text-center mb-4">
+                Mind sharing what held you back?
+              </h2>
+
+              <div className="flex flex-wrap gap-3 justify-center mb-3">
+                {feedbackOptions.map((option) => (
+                  <button
+                    key={option.id}
+                    onClick={() => handleFeedbackSelect(option.text)}
+                    className={`
+                      px-4 py-2 rounded-full border transition-all md:text-md text-xs dark:text-gray-400
+                      ${selectedFeedback === option.text
+                        ? "border-blue-500 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-white"
+                        : "border-gray-300 hover:border-gray-400"}
+                      ${isSubmitting || isSubmitted ? "opacity-70 cursor-not-allowed" : ""}
+                    `}
+                    disabled={isSubmitting || isSubmitted}
+                  >
+                    {option.text}
+                  </button>
+                ))}
+
+                <button
+                  onClick={() => handleFeedbackSelect("custom")}
+                  className={`
+                    px-4 py-2 rounded-full border transition-all md:text-md text-xs dark:text-gray-400
+                    ${selectedFeedback === "custom"
+                      ? "border-blue-500 bg-blue-50 text-blue-700"
+                      : "border-gray-300 hover:border-gray-400"}
+                    ${isSubmitting || isSubmitted ? "opacity-70 cursor-not-allowed" : ""}
+                  `}
+                  disabled={isSubmitting || isSubmitted}
+                >
+                  Type here
+                </button>
+              </div>
+
+              {selectedFeedback === "custom" && (
+                <div className="mt-3 flex md:flex-row flex-col md:gap-0 gap-1">
+                  <input
+                    type="text"
+                    value={customFeedback}
+                    onChange={(e) => setCustomFeedback(e.target.value)}
+                    placeholder="Tell us what went wrong..."
+                    className="flex-1 px-4 py-2 border border-gray-300 md:rounded-l-lg rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-400"
+                    disabled={isSubmitting || isSubmitted}
+                  />
+                  <button
+                    onClick={handleCustomFeedbackSubmit}
+                    className={`
+                      px-4 py-2 bg-blue-600 text-white md:rounded-r-lg rounded-lg
+                      ${(isSubmitting || isSubmitted || !customFeedback.trim())
+                        ? "opacity-70 cursor-not-allowed"
+                        : "hover:bg-blue-700"}
+                    `}
+                    disabled={isSubmitting || isSubmitted || !customFeedback.trim()}
+                  >
+                    Submit
+                  </button>
+                </div>
+              )}
+
+              {isSubmitted && (
+                <p className="text-green-600 text-center mt-3">
+                  Thank you for your feedback!
+                </p>
+              )}
+            </motion.div>
+        </motion.div>
+      </div>
+
+      {/* Footer Section - Bottom */}
+      <div className="p-4 text-center">
+        <div className="text-sm flex items-center justify-center gap-2 opacity-70">
+          <p>Powered by</p>
+          <img src={logo} alt="Saafe Logo" className="w-16 h-auto" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Rejected;

package/src/pages/consent/success.tsx

@@ -0,0 +1,220 @@
+import { MobileBackground } from "@/components/mobile-background";
+import { motion } from "framer-motion";
+import logo from "../../assets/brand/saafe-color-white-logo.svg";
+import checkIcon from "../../assets/icons/check-icon.svg";
+import { useState, useEffect } from "react";
+import { useRedirectStore } from "@/store/redirect.store";
+import { feedbackService } from "@/services/api";
+import { StarFilledIcon } from "@radix-ui/react-icons";
+import { useNavigationBlock } from "@/store/NavigationBlockContext";
+import { MobileAppDownload } from "@/components/mobileAppDownload";
+
+const Success = () => {
+  const [rating, setRating] = useState<number | null>(null);
+  const [hoveredRating, setHoveredRating] = useState<number | null>(null);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [countdown, setCountdown] = useState(10);
+  const { decodedInfo } = useRedirectStore();
+  const { allowNextNavigation } = useNavigationBlock();
+  const consentHandle = decodedInfo?.srcref || '';
+
+  // Send success postMessage after 8 seconds of countdown (when countdown reaches 1)
+  useEffect(() => {
+    if (countdown === 1) {
+      console.log("Sending message to parent -->> From AA");
+      window.parent.postMessage(
+        { 
+          type: 'AA', 
+          status: 'approved', 
+          flowCompleted: true,
+          consentHandle: consentHandle,
+          userRating: rating,
+          redirectUrl: decodedInfo?.redirect,
+          timestamp: new Date().toISOString()
+        },
+        '*'
+      );
+    }
+  }, [countdown, consentHandle, rating, decodedInfo?.redirect]);
+
+  // Prevent back navigation
+  useEffect(() => {
+    window.history.pushState(null, '', window.location.href);
+    window.onpopstate = () => {
+      window.history.pushState(null, '', window.location.href);
+    };
+
+    return () => {
+      window.onpopstate = null;
+    };
+  }, []);
+
+  // Handle countdown and redirection
+  useEffect(() => {
+    allowNextNavigation();
+    if (countdown <= 0 && decodedInfo?.redirect) {
+      allowNextNavigation();
+      // Redirect to the URL when countdown reaches zero
+      window.location.href = decodedInfo.redirect;
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setCountdown((prev) => prev - 1);
+    }, 1000);
+
+    localStorage.clear();
+    sessionStorage.clear();
+    console.log("Session and localStorage cleared");
+
+    return () => clearTimeout(timer);
+  }, [countdown, decodedInfo?.redirect]);
+
+  const handleRatingClick = async (selectedRating: number) => {
+    setRating(selectedRating);
+
+    // Don't submit again if user clicks multiple times
+    if (isSubmitted || isSubmitting) return;
+
+    try {
+      setIsSubmitting(true);
+
+      await feedbackService.submitRating({
+        ratings: selectedRating,
+        consentHandle: consentHandle
+      });
+
+      setIsSubmitted(true);
+    } catch {
+      // Silently catch errors
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col min-h-screen h-full">
+      <MobileBackground
+        blobConfig={{
+          count: 8,
+          color: "rgba(255, 255, 255, 0.4)",
+          minSize: 160,
+          maxSize: 220,
+          speed: 4,
+        }}
+      >
+        <div className="p-6 flex flex-col min-h-screen">
+          {/* Redirecting message */}
+          {decodedInfo?.redirect && (
+            <div className="absolute top-4 sm:top-6 left-0 right-0 text-center">
+              <p className="text-white/80 text-sm">
+              Redirecting in <span className="font-semibold">00:{countdown < 10 ? `0${countdown}` : countdown}</span>
+            </p>
+            </div>
+          )}
+
+          {/* Main content - centered vertically and horizontally */}
+          <div className="flex-1 flex flex-col justify-center items-center pt-10 sm:pt-16 pb-10 sm:pb-20">
+          <motion.div
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.2, duration: 0.5 }}
+              className="text-white flex flex-col items-center w-full max-w-md mx-auto px-4"
+          >
+              <div className="rounded-full mb-10 sm:mb-16">
+              <motion.img
+                src={checkIcon}
+                alt="Check Icon"
+                  className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48"
+                initial={{ scale: 0, rotate: -10 }}
+                animate={{ scale: 1, rotate: 0 }}
+                transition={{
+                  type: "spring",
+                  damping: 8,
+                  stiffness: 100,
+                  delay: 0.9,
+                  duration: 4
+                }}
+              />
+            </div>
+
+            <motion.h1
+                className="text-xl md:text-3xl font-semibold mb-5 sm:mb-6 text-center"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 1.5 }}
+            >
+              Approved Successfully
+            </motion.h1>
+
+            <motion.p
+                className="text-white/80 text-center mb-10 sm:mb-14 text-sm sm:text-base md:text-lg max-w-sm"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 1.5 }}
+            >
+              You can pause/revoke this consent anytime using Saafe app
+            </motion.p>
+
+              {/* Mobile App Download - animated to appear last */}
+              <motion.div
+                className="w-full max-w-xs mx-auto"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 2.5, duration: 0.7 }}
+              >
+            <MobileAppDownload />
+              </motion.div>
+              
+            {/* Rating Component */}
+            <motion.div
+                className="mt-12 sm:mt-16 w-full max-w-xs mx-auto px-4 text-center"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 2.0 }}
+            >
+                <h3 className="text-white text-sm sm:text-base md:text-lg mb-4 sm:mb-6">Rate your experience</h3>
+                <div className="flex justify-center gap-3 sm:gap-5">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <button
+                    key={star}
+                    onClick={() => handleRatingClick(star)}
+                    onMouseEnter={() => setHoveredRating(star)}
+                    onMouseLeave={() => setHoveredRating(null)}
+                      className="focus:outline-none transition-transform hover:scale-110 p-1 sm:p-2"
+                    disabled={isSubmitting}
+                  >
+                    <StarFilledIcon
+                      className={`
+                          transition-colors duration-200 w-6 h-6 sm:w-8 sm:h-8 md:w-9 md:h-9
+                        ${(hoveredRating !== null ? star <= hoveredRating : star <= (rating || 0))
+                          ? "fill-white text-white"
+                          : "text-white/40 fill-transparent"}
+                        ${isSubmitting ? "opacity-70" : ""}
+                      `}
+                    />
+                  </button>
+                ))}
+              </div>
+              {isSubmitted && (
+                  <p className="mt-3 text-white/80 text-xs sm:text-sm">Thank you for your feedback!</p>
+              )}
+            </motion.div>
+          </motion.div>
+          </div>
+
+          {/* Footer */}
+          <div className="mt-auto pb-6 sm:pb-8 text-center">
+            <div className="text-white text-xs sm:text-sm flex items-center justify-center gap-1 sm:gap-2 opacity-70">
+              <p>Powered by</p>
+              <img src={logo} alt="Saafe Logo" className="w-14 sm:w-16 h-auto" />
+            </div>
+          </div>
+        </div>
+      </MobileBackground>
+    </div>
+  );
+};
+
+export default Success;

package/src/providers/query-provider.tsx

@@ -0,0 +1,24 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { ReactNode, useState } from 'react';
+
+interface QueryProviderProps {
+  children: ReactNode;
+}
+
+export function QueryProvider({ children }: QueryProviderProps) {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+      },
+    },
+  }));
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+} 

package/src/providers/toast-provider.tsx

@@ -0,0 +1,26 @@
+import { Toaster } from "sonner";
+
+interface ToastProviderProps {
+  children: React.ReactNode;
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  return (
+    <>
+      <Toaster
+        position="bottom-right"
+        closeButton
+        richColors
+        toastOptions={{
+          classNames: {
+            toast: 'relative',
+            closeButton: 'ml-[93%] mt-[10%]',
+            description: 'text-[16px]',
+            title: 'text-lg'
+          },
+        }}
+      />
+      {children}
+    </>
+  );
+}