From f3aadab6134de7783e72ec795e30313e54ab6351 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Tue, 21 Nov 2023 11:52:12 +0800
Subject: [PATCH] Added a type for the sorting direction of SortMenu component
 (#19062)

refs https://github.com/TryGhost/Product/issues/4162
---
 apps/admin-x-design-system/src/global/SortMenu.tsx     |  4 +++-
 .../components/settings/growth/offers/OffersIndex.tsx  | 10 ++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/SortMenu.tsx b/apps/admin-x-design-system/src/global/SortMenu.tsx
index 80b91a4c16..5952f9f13d 100644
--- a/apps/admin-x-design-system/src/global/SortMenu.tsx
+++ b/apps/admin-x-design-system/src/global/SortMenu.tsx
@@ -3,6 +3,8 @@ import Button, {ButtonProps} from './Button';
 import Popover, {PopoverPosition} from './Popover';
 import {Icon} from '..';
 
+export type SortDirection = 'asc' | 'desc';
+
 export type SortItem = {
     id: string,
     label: string;
@@ -11,7 +13,7 @@ export type SortItem = {
 
 export interface SortMenuProps {
     items: SortItem[];
-    direction: string;
+    direction: SortDirection;
     onSortChange: (selectedOption: string) => void;
     onDirectionChange: (selectedDirection: string) => void;
     trigger?: React.ReactNode;
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
index 59ff89fa15..e405106c11 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
@@ -244,8 +244,14 @@ export const OffersIndexModal = () => {
                                 {id: 'redemptions', label: 'Redemptions'}
                             ]}
                             position='right'
-                            onDirectionChange={() => {}}
-                            onSortChange={() => {}}
+                            onDirectionChange={(selectedDirection) => {
+                                // eslint-disable-next-line no-console
+                                console.log(`Sorting direction: ${selectedDirection}`);
+                            }}
+                            onSortChange={(selectedOption) => {
+                                // eslint-disable-next-line no-console
+                                console.log(`Sorting option: ${selectedOption}`);
+                            }}
                         />
                         <div className='flex gap-3'>
                             <Button icon='layout-module-1' iconColorClass={selectedLayout === 'card' ? 'text-black' : 'text-grey-500'} link={true} size='sm' onClick={() => setSelectedLayout('card')} />