Merge branch 'main' into B2B-30

packages/features/notifications/src/components/index.ts

@@ -1 +1,3 @@
 export * from './notifications-popover';
+export * from './success-notification';
+export * from './update-account-success-notification';

packages/features/notifications/src/components/notifications-popover.tsx

@@ -126,7 +126,7 @@ export function NotificationsPopover(params: {
 
           <span
             className={cn(
-              `fade-in animate-in zoom-in absolute right-1 top-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
+              `fade-in animate-in zoom-in absolute top-1 right-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
               {
                 hidden: !notifications.length,
               },
@@ -186,7 +186,7 @@ export function NotificationsPopover(params: {
               <div
                 key={notification.id.toString()}
                 className={cn(
-                  'min-h-18 flex flex-col items-start justify-center gap-y-1 px-3 py-2',
+                  'flex min-h-18 flex-col items-start justify-center gap-y-1 px-3 py-2',
                 )}
                 onClick={() => {
                   if (params.onClick) {

packages/features/notifications/src/components/success-notification.tsx

@@ -0,0 +1,50 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { MedReportLogo } from '@/components/med-report-logo';
+
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+export const SuccessNotification = ({
+  showLogo = true,
+  title,
+  titleKey,
+  descriptionKey,
+  buttonProps,
+}: {
+  showLogo?: boolean;
+  title?: string;
+  titleKey?: string;
+  descriptionKey?: string;
+  buttonProps?: {
+    buttonTitleKey: string;
+    href: string;
+  };
+}) => {
+  return (
+    <div className="border-border rounded-3xl border px-16 pt-4 pb-12">
+      {showLogo && <MedReportLogo />}
+      <div className="flex flex-col items-center px-4">
+        <Image
+          src="/assets/success.png"
+          alt="Success"
+          className="pt-6 pb-8"
+          width={326}
+          height={195}
+        />
+        <h1 className="pb-2">{title || <Trans i18nKey={titleKey} />}</h1>
+        <p className="text-muted-foreground text-sm">
+          <Trans i18nKey={descriptionKey} />
+        </p>
+      </div>
+      {buttonProps && (
+        <Button className="mt-8 w-full">
+          <Link href={buttonProps.href}>
+            <Trans i18nKey={buttonProps.buttonTitleKey} />
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+};

packages/features/notifications/src/components/update-account-success-notification.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { redirect } from 'next/navigation';
+
+import pathsConfig from '@/config/paths.config';
+import { useTranslation } from 'react-i18next';
+
+import { usePersonalAccountData } from '@kit/accounts/hooks/use-personal-account-data';
+
+import { SuccessNotification } from './success-notification';
+
+export const UpdateAccountSuccessNotification = ({
+  userId,
+}: {
+  userId?: string;
+}) => {
+  const { t } = useTranslation('account');
+
+  if (!userId) {
+    redirect(pathsConfig.app.home);
+  }
+
+  const { data: accountData } = usePersonalAccountData(userId);
+
+  return (
+    <SuccessNotification
+      showLogo={false}
+      title={t('account:updateAccount:successTitle', {
+        firstName: accountData?.name,
+        lastName: accountData?.last_name,
+      })}
+      descriptionKey="account:updateAccount:successDescription"
+      buttonProps={{
+        buttonTitleKey: 'account:updateAccount:successButton',
+        href: pathsConfig.app.home,
+      }}
+    />
+  );
+};