Wired up offer edit page

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

@@ -1,4 +1,4 @@
-import {Meta, createQuery} from '../utils/api/hooks';
+import {Meta, createQuery, createQueryWithId} from '../utils/api/hooks';
 
 export type Offer = {
     id: string;
@@ -32,3 +32,8 @@ export const useBrowseOffers = createQuery<OffersResponseType>({
     dataType,
     path: '/offers/'
 });
+
+export const useBrowseOffersById = createQueryWithId<OffersResponseType>({
+    dataType,
+    path: `/offers/`
+});

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

@@ -5,10 +5,13 @@ import TextArea from '../../../../admin-x-ds/global/form/TextArea';
 import TextField from '../../../../admin-x-ds/global/form/TextField';
 import useFeatureFlag from '../../../../hooks/useFeatureFlag';
 import useRouting from '../../../../hooks/useRouting';
+import {Offer} from '../../../../api/offers';
 import {PreviewModalContent} from '../../../../admin-x-ds/global/modal/PreviewModal';
+import {RoutingModalProps} from '../../../providers/RoutingProvider';
+import {useBrowseOffersById} from '../../../../api/offers';
 import {useEffect} from 'react';
 
-const Sidebar: React.FC = () => {
+const Sidebar: React.FC<{offer: Offer}> = ({offer}) => {
     return (
         <div className='pt-7'>
             <Form>
@@ -16,7 +19,7 @@ const Sidebar: React.FC = () => {
                     hint='Visible to members on Stripe Checkout page.'
                     placeholder='Black Friday'
                     title='Name'
-                    value='Black friday'
+                    value={offer?.name}
                 />
                 <section className='mt-4'>
                     <h2 className='mb-4 text-lg'>Portal Settings</h2>
@@ -24,24 +27,24 @@ const Sidebar: React.FC = () => {
                         <TextField
                             placeholder='Black Friday Special'
                             title='Display title'
-                            value='Black friday'
+                            value={offer?.display_title}
                         />
                         <TextField
                             placeholder='black-friday'
                             title='Offer code'
-                            value='black-friday'
+                            value={offer?.code}
                         />
                         <TextArea
                             placeholder='Take advantage of this limited-time offer.'
                             title='Display description'
-                            value='Get 20% off for Black Friday'
+                            value={offer.display_description}
                         />
                         <div className='flex flex-col gap-1.5'>
                             <TextField
                                 placeholder='https://www.example.com'
                                 title='URL'
                                 type='url'
-                                value='https://example.com/#/portal/offers/black-friday'
+                                value={`http://localhost:2368//#/portal/offers/${offer?.code}`}
                             />
                             <Button color='green' fullWidth={true} label='Copy link' />
                         </div>
@@ -52,10 +55,11 @@ const Sidebar: React.FC = () => {
     );
 };
 
-const EditOfferModal = () => {
+const EditOfferModal: React.FC<RoutingModalProps> = ({params}) => {
     const modal = useModal();
     const {updateRoute} = useRouting();
     const hasOffers = useFeatureFlag('adminXOffers');
+    let offer : Offer;
 
     useEffect(() => {
         if (!hasOffers) {
@@ -64,9 +68,17 @@ const EditOfferModal = () => {
         }
     }, [hasOffers, modal, updateRoute]);
 
-    const sidebar = <Sidebar />;
+    const {data: {offers: offerById = []} = {}} = useBrowseOffersById(params?.id ? params?.id : '');
+    if (offerById.length === 0) {
+        return null;
+    }
+    offer = offerById[0];
+    
+    const sidebar = <Sidebar 
+        offer={offer}
+    />;
 
-    return <PreviewModalContent deviceSelector={false} okLabel='Update' sidebar={sidebar} size='full' title='Offer' onCancel={() => {
+    return <PreviewModalContent deviceSelector={false} okLabel='Update' sidebar={sidebar} size='full' title={offer?.name} onCancel={() => {
         modal.remove();
         updateRoute('offers/edit');
     }} />;

apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx

@@ -70,7 +70,7 @@ const OffersModal = () => {
     const modal = useModal();
     const {updateRoute} = useRouting();
     const hasOffers = useFeatureFlag('adminXOffers');
-    const {data: {offers = []} = {}} = useBrowseOffers({
+    const {data: {offers: allOffers = []} = {}} = useBrowseOffers({
         searchParams: {
             limit: 'all'
         }
@@ -131,7 +131,7 @@ const OffersModal = () => {
                 <h1 className='mt-12 border-b border-b-grey-300 pb-2.5 text-3xl'>{offersTabs.find(tab => tab.id === selectedTab)?.title} offers</h1>
             </header>
             <div className='mt-8 grid grid-cols-3 gap-6'>
-                {offers.filter(offer => offer.status === selectedTab).map((offer) => {
+                {allOffers.filter(offer => offer.status === selectedTab).map((offer) => {
                     const offerTier = paidActiveTiers.find(tier => tier.id === offer?.tier.id);
 
                     if (!offerTier) {

apps/admin-x-settings/src/utils/api/hooks.ts

@@ -143,7 +143,11 @@ export const apiUrl = (path: string, searchParams: Record<string, string> = {})
 
 const parameterizedPath = (path: string, params: string | string[]) => {
     const paramList = Array.isArray(params) ? params : [params];
-    return paramList.reduce((updatedPath, param) => updatedPath.replace(/:[a-z0-9]+/, encodeURIComponent(param)), path);
+    return paramList.reduce(function (updatedPath, param) {
+        updatedPath = updatedPath + param + '/';
+        updatedPath.replace(/:[a-z0-9]+/, encodeURIComponent(param));
+        return updatedPath;
+    }, path);
 };
 
 interface QueryOptions<ResponseData> {