Polished offers UI with consistent styling and improved navigation #26462
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -66,8 +66,9 @@ const RetentionOfferSidebar: React.FC<{ | |
| </div> | ||
| </div> | ||
| </section> | ||
| <section className='mt-2'> | ||
| <Toggle | ||
| align='center' | ||
| checked={formState.enabled} | ||
| direction='rtl' | ||
| hint={cadence === 'monthly' ? 'Applied to monthly plans' : 'Applied to annual plans'} | ||
|
|
@@ -79,7 +80,7 @@ const RetentionOfferSidebar: React.FC<{ | |
| </section> | ||
| {formState.enabled && ( | ||
| <> | ||
| <section className='mt-2'> | ||
| <h2 className='mb-4 text-lg'>General</h2> | ||
| <div className='flex flex-col gap-6'> | ||
| <TextField | ||
|
|
@@ -141,15 +142,16 @@ const RetentionOfferSidebar: React.FC<{ | |
| }} | ||
| /> | ||
| {formState.duration === 'repeating' && ( | ||
| <div className='-mt-4'> | ||
| <TextField | ||
| rightPlaceholder={`${formState.durationInMonths === 1 ? 'month' : 'months'}`} | ||
| type='number' | ||
| value={formState.durationInMonths === 0 ? '' : String(formState.durationInMonths)} | ||
| onChange={(e) => { | ||
| updateForm(state => ({...state, durationInMonths: Number(e.target.value)})); | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -113,13 +113,11 @@ const OffersFilterPopover: React.FC<{ | |
| <Popover | ||
| position='end' | ||
| trigger={ | ||
| <Button className='flex cursor-pointer items-center justify-center rounded p-1 hover:bg-grey-100 dark:hover:bg-grey-800 dark:[&_svg]:hover:text-white' label={<LucideIcon.ListFilter className='text-grey-700 dark:text-grey-500' size={16} strokeWidth={1.5} />} unstyled={true} /> | ||
| } | ||
| > | ||
| <div className='flex min-w-[160px] flex-col'> | ||
| <div className='cursor-default select-none pl-3 pt-2 text-sm font-semibold text-grey-700'>Status</div> | ||
| <div className='flex flex-col py-1'> | ||
| {(['active', 'archived'] as const).map(status => ( | ||
| <button | ||
|
|
@@ -133,7 +131,7 @@ const OffersFilterPopover: React.FC<{ | |
| </button> | ||
| ))} | ||
| </div> | ||
| <div className='cursor-default select-none border-t border-t-grey-200 pl-3 pt-2 text-sm font-semibold text-grey-700 dark:border-t-grey-800'>Sort by</div> | ||
| <div className='flex flex-col py-1'> | ||
| {[ | ||
| {id: 'date-added', label: 'Date added'}, | ||
|
|
@@ -247,7 +245,7 @@ export const OffersIndexModal: React.FC<{defaultTab?: string}> = ({defaultTab}) | |
| const {discountOffer, originalPriceWithCurrency, updatedPriceWithCurrency} = getOfferDiscount(offer.type, offer.amount, offer.cadence, offer.currency || 'USD', offerTier); | ||
|
|
||
| return ( | ||
| <tr className={`group relative scale-100 border-b border-b-grey-100 dark:border-b-grey-950`} data-testid="offer-item"> | ||
| <td className={`${isTierArchived ? 'opacity-50' : ''} p-0`}><a className={`block ${isTierArchived ? 'cursor-default select-none' : 'cursor-pointer'} p-5 pl-0`} onClick={!isTierArchived ? () => handleOfferEdit(offer?.id ? offer.id : '') : () => {}}><span className='font-semibold'>{offer?.name}</span><br /><span className='text-sm text-grey-700'>{offerTier.name} {getOfferCadence(offer.cadence)}</span></a></td> | ||
| <td className={`${isTierArchived ? 'opacity-50' : ''} whitespace-nowrap p-0 text-sm`}><a className={`block ${isTierArchived ? 'cursor-default select-none' : 'cursor-pointer'} p-5`} onClick={!isTierArchived ? () => handleOfferEdit(offer?.id ? offer.id : '') : () => {}}><span className='text-[1.3rem] font-medium uppercase'>{discountOffer}</span><br /><span className='text-grey-700'>{offer.type !== 'trial' ? getOfferDuration(offer.duration) : 'Trial period'}</span></a></td> | ||
| <td className={`${isTierArchived ? 'opacity-50' : ''} whitespace-nowrap p-0 text-sm`}><a className={`block ${isTierArchived ? 'cursor-default select-none' : 'cursor-pointer'} p-5`} onClick={!isTierArchived ? () => handleOfferEdit(offer?.id ? offer.id : '') : () => {}}><span className='font-medium'>{updatedPriceWithCurrency}</span> {offer.type !== 'trial' ? <span className='relative text-xs text-grey-700 before:absolute before:-inset-x-0.5 before:top-1/2 before:rotate-[-20deg] before:border-t before:content-[""]'>{originalPriceWithCurrency}</span> : null}</a></td> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -176,7 +176,7 @@ export const OffersIndexModal = () => { | |
| const {discountOffer, originalPriceWithCurrency, updatedPriceWithCurrency} = getOfferDiscount(offer.type, offer.amount, offer.cadence, offer.currency || 'USD', offerTier); | ||
|
|
||
| return ( | ||
| <tr className={`group relative scale-100 border-b border-b-grey-100 dark:border-b-grey-950`} data-testid="offer-item"> | ||
| <td className={`${isTierArchived ? 'opacity-50' : ''} p-0`}><a className={`block ${isTierArchived ? 'cursor-default select-none' : 'cursor-pointer'} p-5 pl-0`} onClick={!isTierArchived ? () => handleOfferEdit(offer?.id ? offer.id : '') : () => {}}><span className='font-semibold'>{offer?.name}</span><br /><span className='text-sm text-grey-700'>{offerTier.name} {getOfferCadence(offer.cadence)}</span></a></td> | ||
| <td className={`${isTierArchived ? 'opacity-50' : ''} whitespace-nowrap p-0 text-sm`}><a className={`block ${isTierArchived ? 'cursor-default select-none' : 'cursor-pointer'} p-5`} onClick={!isTierArchived ? () => handleOfferEdit(offer?.id ? offer.id : '') : () => {}}><span className='text-[1.3rem] font-medium uppercase'>{discountOffer}</span><br /><span className='text-grey-700'>{offer.type !== 'trial' ? getOfferDuration(offer.duration) : 'Trial period'}</span></a></td> | ||
| <td className={`${isTierArchived ? 'opacity-50' : ''} whitespace-nowrap p-0 text-sm`}><a className={`block ${isTierArchived ? 'cursor-default select-none' : 'cursor-pointer'} p-5`} onClick={!isTierArchived ? () => handleOfferEdit(offer?.id ? offer.id : '') : () => {}}><span className='font-medium'>{updatedPriceWithCurrency}</span> {offer.type !== 'trial' ? <span className='relative text-xs text-grey-700 before:absolute before:-inset-x-0.5 before:top-1/2 before:rotate-[-20deg] before:border-t before:content-[""]'>{originalPriceWithCurrency}</span> : null}</a></td> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -51,7 +51,7 @@ const OffersRetention: React.FC = () => { | |||||||||||||||
| <col className='w-[80px]' /> | ||||||||||||||||
| </colgroup> | ||||||||||||||||
| {placeholderRetentionOffers.map(offer => ( | ||||||||||||||||
| <tr key={offer.id} className='group relative scale-100 border-b border-b-grey-100 dark:border-b-grey-950' data-testid='retention-offer-item'> | ||||||||||||||||
| <td className='p-0'> | ||||||||||||||||
| <a className='block cursor-pointer p-5 pl-0' onClick={() => handleRetentionOfferClick(offer.id)}> | ||||||||||||||||
| <span className='font-semibold'>{offer.name}</span><br /> | ||||||||||||||||
|
|
@@ -78,9 +78,9 @@ const OffersRetention: React.FC = () => { | |||||||||||||||
| <td className='whitespace-nowrap p-0 text-sm'> | ||||||||||||||||
| <a className='block cursor-pointer p-5' onClick={() => handleRetentionOfferClick(offer.id)}> | ||||||||||||||||
| {offer.status === 'active' ? ( | ||||||||||||||||
| <span className='inline-flex items-center rounded-full bg-[rgba(48,207,67,0.15)] px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-green'>Active</span> | ||||||||||||||||
| ) : ( | ||||||||||||||||
| <span className='inline-flex items-center rounded-full bg-grey-200 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-grey-700 dark:bg-grey-900 dark:text-grey-500'>Inactive</span> | ||||||||||||||||
|
Comment on lines
+81
to
+83
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: # Find Tailwind config and design-system files
find . -type f -name 'tailwind.config.*' -o -name 'theme*' -o -name 'config*' | grep -E '(tailwind|theme|config)' | head -20Repository: TryGhost/Ghost Length of output: 1224 🏁 Script executed: # Search for text-2xs definition in the codebase
rg 'text-2xs|"2xs"' --type ts --type tsx --type js --type json -B 2 -A 2 | head -100Repository: TryGhost/Ghost Length of output: 85 🏁 Script executed: # Check the actual file to confirm the code snippet
cat -n apps/admin-x-settings/src/components/settings/growth/offers/offers-retention.tsx | sed -n '75,90p'Repository: TryGhost/Ghost Length of output: 1236 🏁 Script executed: # Look for similar badge patterns in the codebase
rg 'className.*inline-flex.*rounded-full' --type tsx --type ts -B 1 -A 1 | head -60Repository: TryGhost/Ghost Length of output: 85 🏁 Script executed: # Search for text-2xs definition without file type specification
rg 'text-2xs|"2xs"' -B 2 -A 2 | head -150Repository: TryGhost/Ghost Length of output: 5076 🏁 Script executed: # Check the admin-x-settings Tailwind config
cat apps/admin-x-settings/tailwind.config.cjsRepository: TryGhost/Ghost Length of output: 346 🏁 Script executed: # Check admin-x-design-system Tailwind config
cat apps/admin-x-design-system/tailwind.config.cjsRepository: TryGhost/Ghost Length of output: 11646 🏁 Script executed: # Search for fontSize or theme config with 2xs
rg 'fontSize|2xs' apps/admin-x-design-system/ -A 2 -B 2 | head -100Repository: TryGhost/Ghost Length of output: 3096 Active badge missing dark-mode background and text adjustments The 🎨 Suggested fix-<span className='inline-flex items-center rounded-full bg-[rgba(48,207,67,0.15)] px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-green'>Active</span>
+<span className='inline-flex items-center rounded-full bg-[rgba(48,207,67,0.15)] dark:bg-[rgba(48,207,67,0.08)] px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-green dark:text-green-400'>Active</span>📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||
| )} | ||||||||||||||||
| </a> | ||||||||||||||||
| </td> | ||||||||||||||||
|
|
||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -298,9 +298,8 @@ const createOffer = async (page, {name, tierName, offerType, amount, discountTyp | |
| await page.getByLabel('Amount off').fill(`${amount}`); | ||
| if (discountType === 'multiple-months') { | ||
| await chooseOptionInSelect(page.getByTestId('duration-select-offers'), `Multiple-months`); | ||
| const durationInput = page.getByTestId('duration-months-input'); | ||
| await durationInput.fill(discountDuration.toString()); | ||
| } | ||
|
|
||
| if (discountType === 'forever') { | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add validation for
durationInMonthswhen duration isrepeating.Clearing this field stores
0(viaNumber('')), andonValidatehas no guard for it —duration_in_months: 0would be submitted to the API. Now that the field defaults to1and is more visible, this gap is easier to trigger.🛡️ Proposed fix — add guard in `onValidate`
if (formState.type === 'percent' && (formState.percentAmount < 0 || formState.percentAmount > 100)) { newErrors.amount = 'Amount must be between 0 and 100%.'; } +if (formState.duration === 'repeating' && (!formState.durationInMonths || formState.durationInMonths < 1)) { + newErrors.durationInMonths = 'Please enter a duration of at least 1 month.'; +}🤖 Prompt for AI Agents