Added last redeemed UI (#19069)

refs https://github.com/TryGhost/Product/issues/4153

- wired up the last redeemed date to the Offers edit stats
- added the direct link to the pre-filtered list members by offered
used.

apps/admin-x-framework/src/api/offers.ts

@@ -21,6 +21,7 @@ export type Offer = {
         name?: string;
     },
     created_at?: string;
+    last_redeemed? : string;
 }
 
 export type PartialNewOffer = Omit<Offer, 'redemption_count'>;

apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx

@@ -4,6 +4,7 @@ import useFeatureFlag from '../../../../hooks/useFeatureFlag';
 import {Button, ConfirmationModal, Form, PreviewModalContent, TextArea, TextField, showToast} from '@tryghost/admin-x-design-system';
 import {ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {Offer, useBrowseOffersById, useEditOffer} from '@tryghost/admin-x-framework/api/offers';
+import {createRedemptionFilterUrl} from './OffersIndex';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {getOfferPortalPreviewUrl, offerPortalPreviewUrlTypes} from '../../../../utils/getOffersPortalPreviewUrl';
 import {useEffect, useState} from 'react';
@@ -102,13 +103,13 @@ const Sidebar: React.FC<{
                                     <span className='text-xs font-semibold leading-none text-grey-700'>Total redemptions</span>
                                     <span>{offer?.redemption_count} {offer?.redemption_count === 1 ? 'redemption' : 'redemptions'}</span>
                                 </div>
-                                {offer?.redemption_count > 0 ?
+                                {offer?.redemption_count > 0 && offer?.last_redeemed ?
                                     <div className='flex items-end justify-between'>
                                         <div className='flex flex-col gap-1.5'>
                                             <span className='text-xs font-semibold leading-none text-grey-700'>Last redemption</span>
-                                            <span>August 30, 2023</span>
+                                            <span>{formatTimestamp(offer?.last_redeemed)}</span>
                                         </div>
-                                        <a className='font-semibold text-green' href="#">See all →</a>
+                                        <a className='font-semibold text-green' href={createRedemptionFilterUrl(offer.id)}>See all →</a>
                                     </div> :
                                     null
                                 }

apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx

@@ -14,7 +14,7 @@ import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 export type OfferType = 'percent' | 'fixed' | 'trial';
 
-const createRedemptionFilterUrl = (id: string): string => {
+export const createRedemptionFilterUrl = (id: string): string => {
     const baseHref = '/ghost/#/members';
     return `${baseHref}?filter=${encodeURIComponent('offer_redemptions:' + id)}`;
 };