feat: implemented logout on back button & fixed text on layouts (#911)

examples/kyb-app/src/hooks/useSignin/useSignin.ts

@@ -18,6 +18,7 @@ export const useSignin = () => {
 
   const logout = useCallback(() => {
     localStorage.removeItem(TOKEN_KEY);
+    location.href = '/';
   }, []);
 
   // Clears user session and not causing re-renders

examples/kyb-app/src/pages/CollectionFlow/components/organisms/KYBView/components/BackButton/BackButton.tsx

@@ -1,19 +1,21 @@
 import { useSettings } from '@app/common/providers/SettingsProvider/hooks/useSettings';
 import { useViewState } from '@app/common/providers/ViewStateProvider';
+import { useSignin } from '@app/hooks/useSignin';
 import clsx from 'clsx';
 import { ArrowLeft } from 'lucide-react';
 import { useMemo } from 'react';
 
 export const BackButton = () => {
-  const { state, isFinished, prev } = useViewState();
+  const { state, isFinished, steps, activeView, prev } = useViewState();
   const { leaveText } = useSettings();
+  const { logout } = useSignin();
 
-  const isExit = useMemo(() => state === 'personalInformation', [state]);
+  const isExit = useMemo(() => steps[0]?.dataAlias === activeView.key, [state]);
 
   return (
     <div
       className={clsx('select-none', { 'pointer-events-none opacity-50': isFinished })}
-      onClick={!isExit ? prev : () => alert('Not implemented')}
+      onClick={!isExit ? prev : () => logout()}
     >
       <ArrowLeft className="inline" />
       <span className="cursor-pointer pl-2 align-middle text-sm font-bold">

examples/kyb-app/src/pages/CollectionFlow/components/pages/Approved/Approved.tsx

@@ -3,8 +3,10 @@ import { useSignin } from '@app/hooks/useSignin';
 import { withSessionProtected } from '@app/hooks/useSessionQuery/hocs/withSessionProtected';
 import { Button, Card } from '@ballerine/ui';
 import { useActiveWorkflowQuery } from '@app/hooks/useActiveWorkflowQuery';
+import { useCustomer } from '@app/components/providers/CustomerProvider';
 
 export const Approved = withSessionProtected(() => {
+  const { customer } = useCustomer();
   const { isFetching, flowData } = useActiveWorkflowQuery();
   const { logoutSilent } = useSignin();
 
@@ -29,12 +31,12 @@ export const Approved = withSessionProtected(() => {
             successfully!
           </h1>
           <p className="text-muted-foreground text-center text-sm leading-5 opacity-50">
-            Go back to PayLynk’s portal to use the system
+            Go back to {customer?.displayName} portal to use the system
           </p>
         </div>
         <div className="flex justify-center">
           <Button variant="secondary" onClick={() => alert('Not implemented.')}>
-            Go back to PayLynk’s Portal
+            Go back to {customer?.displayName} Portal
           </Button>
         </div>
       </Card>

examples/kyb-app/src/pages/CollectionFlow/components/pages/Success/Success.tsx

@@ -1,7 +1,10 @@
+import { useCustomer } from '@app/components/providers/CustomerProvider';
 import { withSessionProtected } from '@app/hooks/useSessionQuery/hocs/withSessionProtected';
 import { Button, Card } from '@ballerine/ui';
 
 export const Success = withSessionProtected(() => {
+  const { customer } = useCustomer();
+
   return (
     <div className="flex h-full items-center justify-center">
       <Card className="w-full max-w-[646px] p-12">
@@ -19,7 +22,7 @@ export const Success = withSessionProtected(() => {
         </div>
         <div className="flex justify-center">
           <Button variant="secondary" onClick={() => alert('Not implemented.')}>
-            Go back to PayLynk’s Portal
+            Go back to {customer?.displayName} Portal
           </Button>
         </div>
       </Card>