Fix subscription styling

package.json

@@ -94,5 +94,10 @@
     "vite-tsconfig-paths": "^4.2.2",
     "vitest": "^1.1.0"
   },
-  "packageManager": "[email protected]+sha1.71f9126a20cd3d00fa47c188f956918858180e54"
+  "packageManager": "[email protected]+sha1.71f9126a20cd3d00fa47c188f956918858180e54",
+  "pnpm": {
+    "patchedDependencies": {
+      "@ifrc-go/[email protected]": "patches/@[email protected]"
+    }
+  }
 }

patches/@ifrc-go__ui@1.2.1.patch

@@ -0,0 +1,47 @@
+diff --git a/dist/components/Chip/index.d.ts b/dist/components/Chip/index.d.ts
+index 7345249eaad9a8fb959fe0330639292354032909..ceba3ed438c7fa0b687d07f7591bab624aff06bc 100644
+--- a/dist/components/Chip/index.d.ts
++++ b/dist/components/Chip/index.d.ts
+@@ -2,7 +2,7 @@ export type ChipVariant = 'primary' | 'secondary' | 'tertiary';
+ export interface Props<N> {
+     className?: string;
+     name: N;
+-    label: string;
++    label: React.ReactNode;
+     variant?: ChipVariant;
+     onDelete?: (name: N, e: React.MouseEvent<HTMLButtonElement>) => void;
+ }
+diff --git a/package.json b/package.json
+index 999e201527e87de45a377344ca40f13212549f61..8ce9c9c085e950405fb0d0f888d5c57876b5e080 100644
+--- a/package.json
++++ b/package.json
+@@ -97,5 +97,10 @@
+         "vite-plugin-lib-inject-css": "^1.3.0",
+         "vite-tsconfig-paths": "^4.2.3",
+         "vitest": "^1.1.1"
++    },
++    "pnpm": {
++        "patchedDependencies": {
++            "@ifrc-go/[email protected]": "patches/@[email protected]"
++        }
+     }
+ }
+diff --git a/patches/@[email protected] b/patches/@[email protected]
+new file mode 100644
+index 0000000000000000000000000000000000000000..31603365255a6e1aa30c140c96b27fa3e93cd7fa
+--- /dev/null
++++ b/patches/@[email protected]
+@@ -0,0 +1,13 @@
++diff --git a/dist/components/Chip/index.d.ts b/dist/components/Chip/index.d.ts
++index 7345249eaad9a8fb959fe0330639292354032909..ceba3ed438c7fa0b687d07f7591bab624aff06bc 100644
++--- a/dist/components/Chip/index.d.ts
+++++ b/dist/components/Chip/index.d.ts
++@@ -2,7 +2,7 @@ export type ChipVariant = 'primary' | 'secondary' | 'tertiary';
++ export interface Props<N> {
++     className?: string;
++     name: N;
++-    label: string;
+++    label: React.ReactNode;
++     variant?: ChipVariant;
++     onDelete?: (name: N, e: React.MouseEvent<HTMLButtonElement>) => void;
++ }

src/App/routes/index.tsx

@@ -44,11 +44,11 @@ const homeLayout = customWrapRoute({
     },
 });
 
-const mySubscription = customWrapRoute({
+const mySubscriptions = customWrapRoute({
     parent: rootLayout,
     path: 'subscriptions',
     component: {
-        render: () => import('#views/MySubscription'),
+        render: () => import('#views/MySubscriptions'),
         props: {},
     },
     wrapperComponent: Auth,
@@ -62,7 +62,7 @@ const subscriptionDetail = customWrapRoute({
     parent: rootLayout,
     path: 'subscriptions/:subscriptionId',
     component: {
-        render: () => import('#views/MySubscription/SubscriptionDetail'),
+        render: () => import('#views/MySubscriptions/SubscriptionDetail'),
         props: {},
     },
     context: {
@@ -353,7 +353,7 @@ const wrappedRoutes = {
     login,
     recoverAccount,
     // resendValidationEmail,
-    mySubscription,
+    mySubscriptions,
     cookiePolicy,
     register,
     historicalAlerts,

src/components/Navbar/index.tsx

@@ -158,7 +158,7 @@ function Navbar(props: Props) {
                     </NavigationTab>
                     {isAuthenticated && (
                         <NavigationTab
-                            to="mySubscription"
+                            to="mySubscriptions"
                         >
                             {strings.headerMenuMySubscription}
                         </NavigationTab>

src/views/Home/styles.module.css

@@ -8,7 +8,7 @@
     .tab-section {
         display: flex;
         flex-direction: column;
-        gap:var(--go-ui-spacing-xl);
+        gap: var(--go-ui-spacing-xl);
         justify-content: center;
 
         .cards {
@@ -22,8 +22,9 @@
                 overflow: auto;
 
                 .cards-content {
-                    display:flex;
+                    display: flex;
                     align-items: center;
+                    justify-content: space-between;
 
                     .alert-image {
                         margin: 0 auto;
@@ -41,4 +42,4 @@
         flex-direction: column;
         gap: var(--go-ui-spacing-lg);
     }
-}
+}

src/views/MySubscription/ActiveTableActions/i18n.json → src/views/MySubscriptions/ActiveTableActions/i18n.json

@@ -3,6 +3,7 @@
     "strings": {
         "deleteSubscriptionActions": "Delete",
         "archiveSubscriptionActions": "Archive",
-        "editSubscriptionActions": "Edit"
+        "editSubscriptionActions": "Edit",
+        "confirmationMessage": "Are you sure want to delete the subscription?"
     }
 }

src/views/MySubscription/ActiveTableActions/index.tsx → src/views/MySubscriptions/ActiveTableActions/index.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
     DeleteBinSixLineIcon,
     EditTwoLineIcon,
@@ -12,7 +13,7 @@ import DropdownMenuItem from '#components/DropdownMenuItem';
 import i18n from './i18n.json';
 
 interface Props {
-    onSubscriptionRemove?: () => void;
+    onSubscriptionRemove: () => void;
     onArchiveClick?: () => void;
     onEditClick: () => void;
 }
@@ -26,11 +27,16 @@ function ActiveTableActions(props: Props) {
 
     const strings = useTranslation(i18n);
 
+    const handleDelete = useCallback(() => {
+        onSubscriptionRemove();
+    }, [onSubscriptionRemove]);
+
     return (
         <DropdownMenu
             icons={<MoreOptionsIcon />}
             variant="tertiary"
             withoutDropdownIcon
+            persistent
         >
             <DropdownMenuItem
                 type="button"
@@ -49,10 +55,12 @@ function ActiveTableActions(props: Props) {
                 {strings.editSubscriptionActions}
             </DropdownMenuItem>
             <DropdownMenuItem
-                type="button"
+                type="confirm-button"
                 name="delete"
-                onClick={onSubscriptionRemove}
+                onConfirm={handleDelete}
+                confirmMessage={strings.confirmationMessage}
                 icons={<DeleteBinSixLineIcon />}
+                persist
             >
                 {strings.deleteSubscriptionActions}
             </DropdownMenuItem>

src/views/MySubscriptions/ArchiveTableActions/i18n.json

@@ -0,0 +1,8 @@
+{
+    "namespace": "SubscriptionActions",
+    "strings": {
+        "unarchiveSubscriptionActions": "Unarchive",
+        "deleteSubscriptionActions": "Delete",
+        "confirmationMessage": "Are you sure want to delete the subscription?"
+    }
+}

src/views/MySubscription/ArchiveTableActions/index.tsx → src/views/MySubscriptions/ArchiveTableActions/index.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
     DeleteBinSixLineIcon,
     LayoutBottomLineIcon,
@@ -11,7 +12,7 @@ import DropdownMenuItem from '#components/DropdownMenuItem';
 import i18n from './i18n.json';
 
 interface Props {
-    onSubscriptionRemove?: () => void;
+    onSubscriptionRemove: () => void;
     onUnArchive?: () => void;
 }
 
@@ -23,6 +24,10 @@ function ArchiveTableActions(props: Props) {
 
     const strings = useTranslation(i18n);
 
+    const handleDelete = useCallback(() => {
+        onSubscriptionRemove();
+    }, [onSubscriptionRemove]);
+
     return (
         <DropdownMenu
             icons={<MoreOptionsIcon />}
@@ -38,10 +43,12 @@ function ArchiveTableActions(props: Props) {
                 {strings.unarchiveSubscriptionActions}
             </DropdownMenuItem>
             <DropdownMenuItem
-                type="button"
+                type="confirm-button"
                 name="delete"
-                onClick={onSubscriptionRemove}
+                onConfirm={handleDelete}
+                confirmMessage={strings.confirmationMessage}
                 icons={<DeleteBinSixLineIcon />}
+                persist
             >
                 {strings.deleteSubscriptionActions}
             </DropdownMenuItem>

src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx → src/views/MySubscriptions/SubscriptionDetail/AlertInfoItem/index.tsx

@@ -26,6 +26,8 @@ function AlertInfoItem(props: Props) {
             className={styles.alertDetail}
             heading={alertTitle}
             headingLevel={4}
+            withInternalPadding
+            childrenContainerClassName={styles.content}
             actions={(
                 <Link
                     to="alertDetails"

src/views/MySubscriptions/SubscriptionDetail/AlertInfoItem/styles.module.css

@@ -0,0 +1,4 @@
+.alert-detail {
+    border-radius: var(--go-ui-border-radius-lg);
+    background-color: var(--go-ui-color-background);
+}

src/views/MySubscriptions/SubscriptionDetail/i18n.json

@@ -0,0 +1,17 @@
+{
+    "namespace": "subscriptionDetail",
+    "strings": {
+        "subscriptionDetailTitle": "Subscription Detail",
+        "subscriptionHeading": "Subscription",
+        "filterStartDateFrom": "Start date from",
+        "filterStartDateTo": "Start date To",
+        "filterEmptyMessage": "Alerts not available!",
+        "subscriptionCountry": "Country",
+        "subscriptionAdmin1": "Admin1",
+        "subscriptionUrgency": "Urgency",
+        "subscriptionCertainty": "Certainty",
+        "subscriptionSeverity": "Severity",
+        "subscriptionCategory": "Category",
+        "susbcriptionEmptyMessage": "No alerts to display!"
+    }
+}