You can share the link anywhere. In your newsletter, social media, a podcast, or in-person. It all just works.
OR
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/OffersModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/OffersModal.tsx
index 2fcfe97311..bc20c7d381 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/OffersModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/OffersModal.tsx
@@ -3,9 +3,11 @@ import useFeatureFlag from '../../../../hooks/useFeatureFlag';
import {Button, Modal, Tab, TabView} from '@tryghost/admin-x-design-system';
import {Tier, getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
import {currencyToDecimal, getSymbol} from '../../../../utils/currency';
+import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
import {numberWithCommas} from '../../../../utils/helpers';
import {useBrowseOffers} from '@tryghost/admin-x-framework/api/offers';
import {useEffect, useState} from 'react';
+import {useGlobalData} from '../../../providers/GlobalDataProvider';
import {useRouting} from '@tryghost/admin-x-framework/routing';
export type OfferType = 'percent' | 'fixed' | 'trial';
@@ -82,6 +84,27 @@ const OfferCard: React.FC<{amount: number, cadence: string, currency: string, du
);
};
+const CopyLinkButton: React.FC<{offerCode: string}> = ({offerCode}) => {
+ const [isCopied, setIsCopied] = useState(false);
+ const {siteData} = useGlobalData();
+
+ const handleCopyClick = async () => {
+ const offerLink = `${getHomepageUrl(siteData!)}${offerCode}`;
+ try {
+ await navigator.clipboard.writeText(offerLink);
+ setIsCopied(true);
+ setTimeout(() => setIsCopied(false), 2000); // reset after 2 seconds
+ } catch (err) {
+ // eslint-disable-next-line no-console
+ console.error('Failed to copy text: ', err);
+ }
+ };
+
+ return isCopied ?
+
Copied :
+
;
+};
+
const OffersModal = () => {
const modal = useModal();
const {updateRoute} = useRouting();
@@ -147,7 +170,7 @@ const OffersModal = () => {
Terms |
Price |
Redemptions |
-
|
+
|
{allOffers.filter(offer => offer.status === selectedTab).map((offer) => {
const offerTier = paidActiveTiers.find(tier => tier.id === offer?.tier.id);
@@ -159,13 +182,13 @@ const OffersModal = () => {
const {discountColor, discountOffer, originalPriceWithCurrency, updatedPriceWithCurrency} = getOfferDiscount(offer.type, offer.amount, offer.cadence, offer.currency || 'USD', offerTier);
return (
-
- {offer?.name} |
- {offerTier.name} {getOfferCadence(offer.cadence)} |
- {discountOffer} — {getOfferDuration(offer.duration)} |
- {updatedPriceWithCurrency} {originalPriceWithCurrency} |
- {offer.redemption_count} |
- |
+
+ handleOfferEdit(offer?.id ? offer.id : '')}>{offer?.name} |
+ handleOfferEdit(offer?.id ? offer.id : '')}>{offerTier.name} {getOfferCadence(offer.cadence)} |
+ handleOfferEdit(offer?.id ? offer.id : '')}>{discountOffer} — {getOfferDuration(offer.duration)} |
+ handleOfferEdit(offer?.id ? offer.id : '')}>{updatedPriceWithCurrency} {originalPriceWithCurrency} |
+ {offer.redemption_count} |
+ |
);
})}
@@ -194,13 +217,18 @@ const OffersModal = () => {