OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reverted "🎨 Added Offers to the new Settings (#19493)"

Browse Source 
This reverts commit c7d7b883cc.
This commit is contained in:
Daniel Lockyer 2024-01-18 14:56:59 +01:00 committed by Daniel Lockyer
parent 0f17f9a937
commit 57c5f92770
24 changed files with 351 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/admin-x-design-system/src/global/Button.tsx
View File

@ -27,11 +27,9 @@ export interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, 'label'
loadingIndicatorColor?: LoadingIndicatorColor;
outlineOnMobile?: boolean;
onClick?: (e?:React.MouseEvent<HTMLElement>) => void;
testId?: string;
}
const Button: React.FC<ButtonProps> = ({
testId,
size = 'md',
label = '',
hideLabel = false,
@ -144,7 +142,6 @@ const Button: React.FC<ButtonProps> = ({
</>;
const buttonElement = React.createElement(tag, {className: className,
'data-testid': testId,
disabled: disabled,
type: 'button',
onClick: onClick,

2
apps/admin-x-design-system/src/global/modal/Modal.tsx
View File

@ -416,7 +416,7 @@ const Modal: React.FC<ModalProps> = ({
(<header className={headerClasses}>
{title && <Heading level={3}>{title}</Heading>}
<div className={`${topRightContent !== 'close' && 'md:!invisible md:!hidden'} ${hideXOnMobile && 'hidden'} absolute right-6 top-6`}>
<Button className='-m-2 cursor-pointer p-2 opacity-50 hover:opacity-100' icon='close' iconColorClass='text-black dark:text-white' size='sm' testId='close-modal' unstyled onClick={removeModal} />
<Button className='-m-2 cursor-pointer p-2 opacity-50 hover:opacity-100' icon='close' iconColorClass='text-black dark:text-white' size='sm' unstyled onClick={removeModal} />
</div>
</header>)
:

3
apps/admin-x-framework/src/test/acceptance.ts
View File

@ -72,7 +72,8 @@ const defaultLabFlags = {
outboundLinkTagging: false,
announcementBar: false,
signupForm: false,
members: false
members: false,
adminXOffers: false
};
// Inject defaultLabFlags into responseFixtures.settings and config

4
apps/admin-x-settings/src/components/Sidebar.tsx
View File

@ -35,7 +35,7 @@ const Sidebar: React.FC = () => {
const {updateRoute} = useRouting();
const searchInputRef = useRef<HTMLInputElement | null>(null);
const {isAnyTextFieldFocused} = useFocusContext();
// const hasOffersLabs = useFeatureFlag('adminXOffers');
const hasOffersLabs = useFeatureFlag('adminXOffers');
// Focus in on search field when pressing "/"
useEffect(() => {
@ -142,7 +142,7 @@ const Sidebar: React.FC = () => {
<SettingNavSection isVisible={checkVisible(Object.values(growthSearchKeywords).flat())} title="Growth">
{hasRecommendations && <NavItem icon='heart' keywords={growthSearchKeywords.recommendations} navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
<NavItem icon='emailfield' keywords={growthSearchKeywords.embedSignupForm} navid='embed-signup-form' title="Embeddable signup form" onClick={handleSectionClick} />
{hasStripeEnabled && <NavItem icon='discount' keywords={growthSearchKeywords.offers} navid='offers' title="Offers" onClick={handleSectionClick} />}
{hasOffersLabs && hasStripeEnabled && <NavItem icon='discount' keywords={growthSearchKeywords.offers} navid='offers' title="Offers" onClick={handleSectionClick} />}
{hasTipsAndDonations && <NavItem icon='piggybank' keywords={growthSearchKeywords.tips} navid='tips-or-donations' title="Tips or donations" onClick={handleSectionClick} />}
</SettingNavSection>

4
apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
View File

@ -47,6 +47,10 @@ const features = [{
title: 'Tips & donations',
description: 'Enables publishers to collect one-time payments',
flag: 'tipsAndDonations'
},{
title: 'AdminX Offers',
description: 'Enables the new offers UI in AdminX settings',
flag: 'adminXOffers'
},{
title: 'Filter by email disabled',
description: 'Allows filtering members by email disabled',

4
apps/admin-x-settings/src/components/settings/growth/GrowthSettings.tsx
View File

@ -18,7 +18,7 @@ export const searchKeywords = {
const GrowthSettings: React.FC = () => {
const hasTipsAndDonations = useFeatureFlag('tipsAndDonations');
const hasRecommendations = useFeatureFlag('recommendations');
// const hasOffersLabs = useFeatureFlag('adminXOffers');
const hasOffersLabs = useFeatureFlag('adminXOffers');
const {config, settings} = useGlobalData();
const hasStripeEnabled = checkStripeEnabled(settings || [], config || {});
@ -26,7 +26,7 @@ const GrowthSettings: React.FC = () => {
<SearchableSection keywords={Object.values(searchKeywords).flat()} title='Growth'>
{hasRecommendations && <Recommendations keywords={searchKeywords.recommendations} />}
<EmbedSignupForm keywords={searchKeywords.embedSignupForm} />
{hasStripeEnabled && <Offers keywords={searchKeywords.offers} />}
{hasOffersLabs && hasStripeEnabled && <Offers keywords={searchKeywords.offers} />}
{hasTipsAndDonations && <TipsOrDonations keywords={searchKeywords.tips} />}
</SearchableSection>
);

14
apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
View File

@ -1,4 +1,5 @@
import PortalFrame from '../../membership/portal/PortalFrame';
import useFeatureFlag from '../../../../hooks/useFeatureFlag';
import {Button} from '@tryghost/admin-x-design-system';
import {ErrorMessages, useForm} from '@tryghost/admin-x-framework/hooks';
import {Form, Icon, PreviewModalContent, Select, SelectOption, TextArea, TextField, showToast} from '@tryghost/admin-x-design-system';
@ -10,6 +11,7 @@ import {useAddOffer} from '@tryghost/admin-x-framework/api/offers';
import {useBrowseOffers} from '@tryghost/admin-x-framework/api/offers';
import {useEffect, useMemo, useState} from 'react';
import {useGlobalData} from '../../../providers/GlobalDataProvider';
import {useModal} from '@ebay/nice-modal-react';
import {useRouting} from '@tryghost/admin-x-framework/routing';
// we should replace this with a library
@ -209,7 +211,6 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
<Select
options={tierOptions}
selectedOption={selectedTier}
testId='tier-cadence-select-offers'
title='Tier — Cadence'
onSelect={(e) => {
if (e) {
@ -240,7 +241,6 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
controlClasses={{menu: 'w-20 right-0'}}
options={amountOptions}
selectedOption={overrides.type === 'percent' ? amountOptions[0] : amountOptions[1]}
testId='amount-type-select-offers'
onSelect={(e) => {
handleAmountTypeChange(e?.value || '');
}}
@ -250,7 +250,6 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
<Select
options={filteredDurationOptions}
selectedOption={filteredDurationOptions.find(option => option.value === overrides.duration)}
testId='duration-select-offers'
title='Duration'
onSelect={e => handleDurationChange(e?.value || '')}
/>
@ -317,7 +316,9 @@ const AddOfferModal = () => {
];
const [href, setHref] = useState<string>('');
const modal = useModal();
const {updateRoute} = useRouting();
const hasOffers = useFeatureFlag('adminXOffers');
const {data: {tiers} = {}} = useBrowseTiers();
const activeTiers = getPaidActiveTiers(tiers || []);
const tierCadenceOptions = getTiersCadences(activeTiers);
@ -555,6 +556,13 @@ const AddOfferModal = () => {
}));
};
useEffect(() => {
if (!hasOffers) {
modal.remove();
updateRoute('');
}
}, [hasOffers, modal, updateRoute]);
const cancelAddOffer = () => {
if (allOffers.length > 0) {
updateRoute('offers/edit');

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

@ -1,6 +1,6 @@
import NiceModal from '@ebay/nice-modal-react';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import PortalFrame from '../../membership/portal/PortalFrame';
// import useFeatureFlag from '../../../../hooks/useFeatureFlag';
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';
@ -177,12 +177,21 @@ const Sidebar: React.FC<{
const EditOfferModal: React.FC<{id: string}> = ({id}) => {
const {siteData} = useGlobalData();
const modal = useModal();
const {updateRoute} = useRouting();
const handleError = useHandleError();
const hasOffers = useFeatureFlag('adminXOffers');
const {mutateAsync: editOffer} = useEditOffer();
const [href, setHref] = useState<string>('');
useEffect(() => {
if (!hasOffers) {
modal.remove();
updateRoute('');
}
}, [hasOffers, modal, updateRoute]);
const {data: {offers: offerById = []} = {}} = useBrowseOffersById(id ? id : '');
const {formState, saveState, updateForm, setFormState, handleSave, validate, errors, clearError, okProps} = useForm({

2
apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx
View File

@ -103,7 +103,7 @@ const OfferSuccess: React.FC<{id: string}> = ({id}) => {
<p className='mt-3 max-w-[510px] text-[1.6rem]'>You can share the link anywhere. In your newsletter, social media, a podcast, or in-person. It all just works.</p>
<div className='mt-8 flex w-full max-w-md flex-col gap-8'>
<div className='flex flex-col-reverse gap-2'>
<TextField name='offer-url' type='url' value={offerLink} disabled />
<TextField type='url' value={offerLink} disabled />
<Button color='green' label={isCopied ? 'Copied!' : 'Copy link'} fullWidth onClick={handleCopyClick} />
</div>
<div className='flex items-center gap-4 text-xs font-medium before:h-px before:grow before:bg-grey-300 before:content-[""] after:h-px after:grow after:bg-grey-300 after:content-[""] dark:before:bg-grey-800 dark:after:bg-grey-800'>OR</div>

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

@ -1,3 +1,4 @@
import useFeatureFlag from '../../../../hooks/useFeatureFlag';
import {Button, Tab, TabView} from '@tryghost/admin-x-design-system';
import {ButtonGroup, ButtonProps} from '@tryghost/admin-x-design-system';
import {Modal} from '@tryghost/admin-x-design-system';
@ -9,11 +10,11 @@ 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 {useModal} from '@ebay/nice-modal-react';
import {useRouting} from '@tryghost/admin-x-framework/routing';
import {useSortingState} from '../../../providers/SettingsAppProvider';
import {useState} from 'react';
export type OfferType = 'percent' | 'fixed' | 'trial';
@ -60,6 +61,7 @@ export const getOfferDiscount = (type: string, amount: number, cadence: string,
break;
};
// Check if updatedPrice is negative, if so, set it to 0
if (updatedPrice < 0) {
updatedPrice = 0;
}
@ -92,6 +94,7 @@ export const CopyLinkButton: React.FC<{offerCode: string}> = ({offerCode}) => {
export const OffersIndexModal = () => {
const modal = useModal();
const {updateRoute} = useRouting();
const hasOffers = useFeatureFlag('adminXOffers');
const {data: {offers: allOffers = []} = {}} = useBrowseOffers({
searchParams: {
limit: 'all'
@ -120,6 +123,13 @@ export const OffersIndexModal = () => {
const sortOption = offersSorting?.option || 'date-added';
const sortDirection = offersSorting?.direction || 'desc';
useEffect(() => {
if (!hasOffers) {
modal.remove();
updateRoute('');
}
}, [hasOffers, modal, updateRoute]);
const handleOfferEdit = (id:string) => {
// TODO: implement
sessionStorage.setItem('editOfferPageSource', 'offersIndex');
@ -135,6 +145,7 @@ export const OffersIndexModal = () => {
case 'redemptions':
return multiplier * (offer1.redemption_count - offer2.redemption_count);
default:
// 'date-added' or unknown option, use default sorting
return multiplier * ((offer1.created_at ? new Date(offer1.created_at).getTime() : 0) - (offer2.created_at ? new Date(offer2.created_at).getTime() : 0));
}
});
@ -153,6 +164,7 @@ export const OffersIndexModal = () => {
}
{sortedOffers.filter((offer) => {
const offerTier = allTiers?.find(tier => tier.id === offer?.tier.id);
//Check to filter out offers with archived offerTier
return (selectedTab === 'active' && (offer.status === 'active' && offerTier && offerTier.active === true)) ||
(selectedTab === 'archived' && (offer.status === 'archived' || (offerTier && offerTier.active === false)));
}).map((offer) => {
@ -167,7 +179,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-200 dark:border-grey-800`} data-testid="offer-item">
<tr className={`group relative scale-100 border-b border-b-grey-200 dark:border-grey-800`}>
<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>

8
apps/admin-x-settings/test/acceptance/membership/offers.test.ts
View File

@ -1,11 +1,11 @@
import {expect, test} from '@playwright/test';
import {globalDataRequests} from '../../utils/acceptance';
import {mockApi, responseFixtures, settingsWithStripe} from '@tryghost/admin-x-framework/test/acceptance';
import {mockApi, responseFixtures, settingsWithStripe, toggleLabsFlag} from '@tryghost/admin-x-framework/test/acceptance';
test.describe('Offers Modal', () => {
// test.beforeEach(async () => {
// toggleLabsFlag('adminXOffers', true);
// });
test.beforeEach(async () => {
toggleLabsFlag('adminXOffers', true);
});
test('Offers Modal is available', async ({page}) => {
await mockApi({page, requests: {

2
apps/admin-x-settings/test/acceptance/membership/tiers.test.ts
View File

@ -54,6 +54,8 @@ test.describe('Tier settings', async () => {
await modal.getByRole('button', {name: 'Save & close'}).click();
await page.pause();
// await expect(section.getByTestId('tier-card').filter({hasText: /Plus/})).toHaveText(/Plus tier/);
// await expect(section.getByTestId('tier-card').filter({hasText: /Plus/})).toHaveText(/\$8\/month/);

3
apps/comments-ui/test/e2e/actions.test.ts
View File

@ -90,6 +90,9 @@ test.describe('Actions', async () => {
await replyButton.click();
const editor = frame.getByTestId('form-editor');
await expect(editor).toBeVisible();
await page.pause();
// Wait for focused
await waitEditorFocused(editor);

1
ghost/admin/.lint-todo
View File

@ -351,4 +351,3 @@ add|ember-template-lint|no-passed-in-event-handlers|50|48|50|48|138f75fcc7408e61
add|ember-template-lint|no-passed-in-event-handlers|76|48|76|48|8fb95409c6333d15490f0777239f6e04641215e6|1697068800000|1707440400000|1712620800000|app/templates/settings/integrations/slack.hbs
add|ember-template-lint|require-valid-alt-text|24|20|24|20|a500be6114ce681e610b6fec7d2a6cea2f4555f7|1697068800000|1707440400000|1712620800000|app/templates/settings/integrations/slack.hbs
add|ember-template-lint|no-action|51|56|51|56|2b83cff3852a6f3cb1f2d2613e1bb611e1af4996|1697068800000|1707440400000|1712620800000|app/templates/settings/integrations/unsplash.hbs
remove|ember-template-lint|no-unknown-arguments-for-builtin-components|118|95|118|95|b8aae2daed1c14cf280800b3d282d11fb14851a4|1697068800000|1707440400000|1712620800000|app/components/gh-nav-menu/main.hbs

5
ghost/admin/app/components/gh-nav-menu/main.hbs
View File

@ -117,6 +117,11 @@
{{/if}}
</li>
{{#if this.settings.paidMembersEnabled}}
<li>
<LinkTo @route="offers" @current-when="offers offer offer.new" @alt="Offers" data-test-nav="offers">{{svg-jar "percentage"}}Offers</LinkTo>
</li>
{{/if}}
{{/if}}
{{#if (feature "adminXDemo")}}
<li>

6
ghost/admin/app/router.js
View File

@ -82,10 +82,10 @@ Router.map(function () {
this.route('member', {path: '/members/:member_id'});
this.route('members-activity');
// this.route('offers');
this.route('offers');
// this.route('offer.new', {path: '/offers/new'});
// this.route('offer', {path: '/offers/:offer_id'});
this.route('offer.new', {path: '/offers/new'});
this.route('offer', {path: '/offers/:offer_id'});
this.route('error404', {path: '/*path'});

126
ghost/admin/app/routes/offer.js
View File

@ -1,80 +1,80 @@
// import AdminRoute from 'ghost-admin/routes/admin';
// import ConfirmUnsavedChangesModal from '../components/modals/confirm-unsaved-changes';
// import {action} from '@ember/object';
// import {inject as service} from '@ember/service';
import AdminRoute from 'ghost-admin/routes/admin';
import ConfirmUnsavedChangesModal from '../components/modals/confirm-unsaved-changes';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
// export default class OffersRoute extends AdminRoute {
// @service modals;
// @service router;
export default class OffersRoute extends AdminRoute {
@service modals;
@service router;
// _requiresBackgroundRefresh = true;
_requiresBackgroundRefresh = true;
// model(params) {
// this._requiresBackgroundRefresh = false;
model(params) {
this._requiresBackgroundRefresh = false;
// if (params.offer_id) {
// return this.store.queryRecord('offer', {id: params.offer_id});
// } else {
// return this.store.createRecord('offer');
// }
// }
if (params.offer_id) {
return this.store.queryRecord('offer', {id: params.offer_id});
} else {
return this.store.createRecord('offer');
}
}
// setupController(controller, offer) {
// super.setupController(...arguments);
setupController(controller, offer) {
super.setupController(...arguments);
// if (this._requiresBackgroundRefresh) {
// controller.fetchOfferTask.perform(offer.id);
// }
// }
if (this._requiresBackgroundRefresh) {
controller.fetchOfferTask.perform(offer.id);
}
}
// deactivate() {
// // clean up newly created records and revert unsaved changes to existing
// this.controller.offer.rollbackAttributes();
// this._requiresBackgroundRefresh = true;
// }
deactivate() {
// clean up newly created records and revert unsaved changes to existing
this.controller.offer.rollbackAttributes();
this._requiresBackgroundRefresh = true;
}
// @action
// async willTransition(transition) {
// if (this.hasConfirmed) {
// return true;
// }
@action
async willTransition(transition) {
if (this.hasConfirmed) {
return true;
}
// transition.abort();
transition.abort();
// // wait for any existing confirm modal to be closed before allowing transition
// if (this.confirmModal) {
// return;
// }
// wait for any existing confirm modal to be closed before allowing transition
if (this.confirmModal) {
return;
}
// const shouldLeave = await this.confirmUnsavedChanges();
const shouldLeave = await this.confirmUnsavedChanges();
// if (shouldLeave) {
// this.controller.model.rollbackAttributes();
// this.hasConfirmed = true;
// return transition.retry();
// }
// }
if (shouldLeave) {
this.controller.model.rollbackAttributes();
this.hasConfirmed = true;
return transition.retry();
}
}
// async confirmUnsavedChanges() {
// if (this.controller.model?.hasDirtyAttributes) {
// this.confirmModal = this.modals
// .open(ConfirmUnsavedChangesModal)
// .finally(() => {
// this.confirmModal = null;
// });
async confirmUnsavedChanges() {
if (this.controller.model?.hasDirtyAttributes) {
this.confirmModal = this.modals
.open(ConfirmUnsavedChangesModal)
.finally(() => {
this.confirmModal = null;
});
// return this.confirmModal;
// }
return this.confirmModal;
}
// return true;
// }
return true;
}
// @action
// save() {
// this.controller.save();
// }
@action
save() {
this.controller.save();
}
// titleToken() {
// return this.controller.offer.name;
// }
// }
titleToken() {
return this.controller.offer.name;
}
}

30
ghost/admin/app/routes/offer/new.js
View File

@ -1,18 +1,18 @@
// import OfferRoute from '../offer';
// import {inject as service} from '@ember/service';
import OfferRoute from '../offer';
import {inject as service} from '@ember/service';
// export default class NewOfferRoute extends OfferRoute {
// @service membersUtils;
export default class NewOfferRoute extends OfferRoute {
@service membersUtils;
// controllerName = 'offer';
// templateName = 'offer';
controllerName = 'offer';
templateName = 'offer';
// /**
// * First check if we have active tiers
// */
// beforeModel() {
// if (!this.membersUtils.hasActiveTiers) {
// return this.replaceWith('offers');
// }
// }
// }
/**
* First check if we have active tiers
*/
beforeModel() {
if (!this.membersUtils.hasActiveTiers) {
return this.replaceWith('offers');
}
}
}

50
ghost/admin/app/routes/offers.js
View File

@ -1,31 +1,31 @@
// import AdminRoute from 'ghost-admin/routes/admin';
// import {inject as service} from '@ember/service';
import AdminRoute from 'ghost-admin/routes/admin';
import {inject as service} from '@ember/service';
// export default class offersRoute extends AdminRoute {
// @service store;
// @service feature;
export default class offersRoute extends AdminRoute {
@service store;
@service feature;
// queryParams = {
// type: {refreshModel: true}
// };
queryParams = {
type: {refreshModel: true}
};
// beforeModel() {
// super.beforeModel(...arguments);
// // TODO: redirect if members is disabled?
// }
beforeModel() {
super.beforeModel(...arguments);
// TODO: redirect if members is disabled?
}
// model(params) {
// return this.controllerFor('offers').fetchOffersTask.perform(params);
// }
model(params) {
return this.controllerFor('offers').fetchOffersTask.perform(params);
}
// // trigger a background load of members plus labels for filter dropdown
// setupController() {
// super.setupController(...arguments);
// }
// trigger a background load of members plus labels for filter dropdown
setupController() {
super.setupController(...arguments);
}
// buildRouteInfoMetadata() {
// return {
// titleToken: 'Offers'
// };
// }
// }
buildRouteInfoMetadata() {
return {
titleToken: 'Offers'
};
}
}

168
ghost/admin/tests/acceptance/offers-test.js
View File

@ -1,111 +1,111 @@
// import moment from 'moment-timezone';
// import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
// import {beforeEach, describe, it} from 'mocha';
// import {blur, click, currentURL, fillIn, find, findAll, settled} from '@ember/test-helpers';
// import {enablePaidMembers} from '../helpers/members';
// import {expect} from 'chai';
// import {setupApplicationTest} from 'ember-mocha';
// import {setupMirage} from 'ember-cli-mirage/test-support';
// import {timeout} from 'ember-concurrency';
// import {visit} from '../helpers/visit';
import moment from 'moment-timezone';
import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
import {beforeEach, describe, it} from 'mocha';
import {blur, click, currentURL, fillIn, find, findAll, settled} from '@ember/test-helpers';
import {enablePaidMembers} from '../helpers/members';
import {expect} from 'chai';
import {setupApplicationTest} from 'ember-mocha';
import {setupMirage} from 'ember-cli-mirage/test-support';
import {timeout} from 'ember-concurrency';
import {visit} from '../helpers/visit';
// describe('Acceptance: Offers', function () {
// let hooks = setupApplicationTest();
// setupMirage(hooks);
describe('Acceptance: Offers', function () {
let hooks = setupApplicationTest();
setupMirage(hooks);
// it('redirects to signin when not authenticated', async function () {
// await invalidateSession();
// await visit('/offers');
it('redirects to signin when not authenticated', async function () {
await invalidateSession();
await visit('/offers');
// expect(currentURL()).to.equal('/signin');
// });
expect(currentURL()).to.equal('/signin');
});
// it('redirects non-admins to site', async function () {
// let role = this.server.create('role', {name: 'Editor'});
// this.server.create('user', {roles: [role]});
it('redirects non-admins to site', async function () {
let role = this.server.create('role', {name: 'Editor'});
this.server.create('user', {roles: [role]});
// await authenticateSession();
// await visit('/offers');
await authenticateSession();
await visit('/offers');
// expect(currentURL()).to.equal('/site');
// expect(find('[data-test-nav="offers"]'), 'sidebar link')
// .to.not.exist;
// });
expect(currentURL()).to.equal('/site');
expect(find('[data-test-nav="offers"]'), 'sidebar link')
.to.not.exist;
});
// describe('as owner', function () {
// beforeEach(async function () {
// this.server.loadFixtures('tiers');
describe('as owner', function () {
beforeEach(async function () {
this.server.loadFixtures('tiers');
// let role = this.server.create('role', {name: 'Owner'});
// this.server.create('user', {roles: [role]});
let role = this.server.create('role', {name: 'Owner'});
this.server.create('user', {roles: [role]});
// enablePaidMembers(this.server);
enablePaidMembers(this.server);
// return await authenticateSession();
// });
return await authenticateSession();
});
// it('it renders, can be navigated, can edit offer', async function () {
// const tier = this.server.create('tier');
// let offer1 = this.server.create('offer', {tier: {id: tier.id}, createdAt: moment.utc().subtract(1, 'day').valueOf()});
// this.server.create('offer', {tier: {id: tier.id}, createdAt: moment.utc().subtract(2, 'day').valueOf()});
it('it renders, can be navigated, can edit offer', async function () {
const tier = this.server.create('tier');
let offer1 = this.server.create('offer', {tier: {id: tier.id}, createdAt: moment.utc().subtract(1, 'day').valueOf()});
this.server.create('offer', {tier: {id: tier.id}, createdAt: moment.utc().subtract(2, 'day').valueOf()});
// await visit('/offers');
await visit('/offers');
// await settled();
await settled();
// // lands on correct page
// expect(currentURL(), 'currentURL').to.equal('/offers');
// lands on correct page
expect(currentURL(), 'currentURL').to.equal('/offers');
// // it highlights active state in nav menu
// expect(
// find('[data-test-nav="offers"]'),
// 'highlights nav menu item'
// ).to.have.class('active');
// it highlights active state in nav menu
expect(
find('[data-test-nav="offers"]'),
'highlights nav menu item'
).to.have.class('active');
// // it lists all offers
// expect(findAll('[data-test-list="offers-list-item"]').length, 'offers list count')
// .to.equal(2);
// it lists all offers
expect(findAll('[data-test-list="offers-list-item"]').length, 'offers list count')
.to.equal(2);
// let offer = find('[data-test-list="offers-list-item"]');
// expect(offer.querySelector('[data-test-list="offer-name"] h3').textContent, 'offer list item name')
// .to.equal(offer1.name);
let offer = find('[data-test-list="offers-list-item"]');
expect(offer.querySelector('[data-test-list="offer-name"] h3').textContent, 'offer list item name')
.to.equal(offer1.name);
// await visit(`/offers/${offer1.id}`);
await visit(`/offers/${offer1.id}`);
// // second wait is needed for the offer details to settle
// await settled();
// second wait is needed for the offer details to settle
await settled();
// // it shows selected offer form
// expect(find('[data-test-input="offer-name"]').value, 'loads correct offer into form')
// .to.equal(offer1.name);
// it shows selected offer form
expect(find('[data-test-input="offer-name"]').value, 'loads correct offer into form')
.to.equal(offer1.name);
// // it maintains active state in nav menu
// expect(
// find('[data-test-nav="offers"]'),
// 'highlights nav menu item'
// ).to.have.class('active');
// it maintains active state in nav menu
expect(
find('[data-test-nav="offers"]'),
'highlights nav menu item'
).to.have.class('active');
// // trigger save
// await fillIn('[data-test-input="offer-name"]', 'New Name');
// await blur('[data-test-input="offer-name"]');
// trigger save
await fillIn('[data-test-input="offer-name"]', 'New Name');
await blur('[data-test-input="offer-name"]');
// await click('[data-test-button="save"]');
await click('[data-test-button="save"]');
// // extra timeout needed for Travis - sometimes it doesn't update
// // quick enough and an extra wait() call doesn't help
// await timeout(100);
// extra timeout needed for Travis - sometimes it doesn't update
// quick enough and an extra wait() call doesn't help
await timeout(100);
// await click('[data-test-link="offers-back"]');
await click('[data-test-link="offers-back"]');
// // lands on correct page
// expect(currentURL(), 'currentURL').to.equal('/offers');
// });
// lands on correct page
expect(currentURL(), 'currentURL').to.equal('/offers');
});
// it('maintains active state in nav menu when creating a new tag', async function () {
// await visit('offers/new');
// expect(currentURL()).to.equal('offers/new');
// expect(find('[data-test-nav="offers"]'), 'highlights nav menu item')
// .to.have.class('active');
// });
// });
// });
it('maintains active state in nav menu when creating a new tag', async function () {
await visit('offers/new');
expect(currentURL()).to.equal('offers/new');
expect(find('[data-test-nav="offers"]'), 'highlights nav menu item')
.to.have.class('active');
});
});
});

2
ghost/core/core/shared/labs.js
View File

@ -44,7 +44,7 @@ const ALPHA_FEATURES = [
'tipsAndDonations',
'importMemberTier',
'lexicalIndicators',
// 'adminXOffers',
'adminXOffers',
'filterEmailDisabled',
'adminXDemo',
'newEmailAddresses',

15
ghost/core/test/e2e-browser/admin/tiers.spec.js
View File

@ -23,16 +23,19 @@ test.describe('Admin', () => {
monthlyPrice: 5,
yearlyPrice: 50
});
const {offerName} = await createOffer(sharedPage, {
const offerName = await createOffer(sharedPage, {
name: 'Get 5% Off!',
tierName,
offerType: 'freeTrial',
amount: 14
offerType: 'discount',
amount: 5
});
await sharedPage.goto('/ghost/');
await sharedPage.goto('/ghost/#/settings/offers');
await expect(sharedPage.getByTestId('offers')).toContainText(offerName);
await test.step('Check that offers and tiers are available on Offers page', async () => {
await sharedPage.locator('[data-test-nav="offers"]').click();
await sharedPage.waitForSelector('[data-test-offers-list]');
await expect(sharedPage.locator('[data-test-offers-list]')).toContainText(tierName);
await expect(sharedPage.locator('[data-test-offers-list]')).toContainText(offerName);
});
});
test('Can create additional Tier', async ({sharedPage}) => {

72
ghost/core/test/e2e-browser/portal/offers.spec.js
View File

@ -18,7 +18,7 @@ test.describe('Portal', () => {
});
// add a new offer with free trial
const {offerName, offerLink} = await createOffer(sharedPage, {
const offerName = await createOffer(sharedPage, {
name: 'Black Friday Special',
tierName,
offerType: 'freeTrial',
@ -26,10 +26,14 @@ test.describe('Portal', () => {
});
// check that offer was added in the offer list screen
await sharedPage.goto('/ghost/#/settings/offers');
await expect(sharedPage.getByTestId('offers')).toContainText(offerName);
await expect(sharedPage.locator(`[data-test-offer="${offerName}"]`), 'Should have free-trial offer').toBeVisible();
await sharedPage.goto(offerLink);
// open offer details page
await sharedPage.locator(`[data-test-offer="${offerName}"] a`).first().click();
// fetch offer url from portal settings and open it
const portalUrl = await sharedPage.locator('[data-test-input="offer-portal-url"]').inputValue();
await sharedPage.goto(portalUrl);
const portalTriggerButton = sharedPage.frameLocator('[data-testid="portal-trigger-frame"]').locator('[data-testid="portal-trigger-button"]');
const portalFrame = sharedPage.frameLocator('[data-testid="portal-popup-frame"]');
@ -62,15 +66,14 @@ test.describe('Portal', () => {
await sharedPage.goto('/ghost');
await sharedPage.locator('.gh-nav a[href="#/members/"]').click();
// // 1 member, should be Testy, on Portal Tier
// 1 member, should be Testy, on Portal Tier
await expect(sharedPage.getByRole('link', {name: 'Testy McTesterson testy+trial@example.com'}), 'Should have 1 paid member').toBeVisible();
await expect(sharedPage.getByRole('link', {name: tierName}), `Paid member should be on ${tierName}`).toBeVisible();
// // Ensure the offer redemption count was bumped
await sharedPage.goto('/ghost/#/settings/offers');
// await sharedPage.locator('.gh-nav a[href="#/offers/"]').click();
const locator = sharedPage.locator(`[data-test-offer="${offerName}"]`);
await expect(locator).toContainText('1 redemption');
// Ensure the offer redemption count was bumped
await sharedPage.locator('.gh-nav a[href="#/offers/"]').click();
const locator = sharedPage.locator(`[data-test-offer="${offerName}"]`).locator('[data-test-list="redemption-count"]').locator('span');
await expect(locator).toContainText('1');
});
test('Creates and uses a one-time discount Offer', async ({sharedPage}) => {
@ -87,7 +90,7 @@ test.describe('Portal', () => {
});
// Creates a one-time discount offer for 10% off
const {offerName, offerLink} = await createOffer(sharedPage, {
const offerName = await createOffer(sharedPage, {
name: 'Black Friday Special',
tierName: tierName,
offerType: 'discount',
@ -95,13 +98,14 @@ test.describe('Portal', () => {
});
// check that offer was added in the offer list screen
await sharedPage.goto('/ghost/#/settings/offers');
await expect(sharedPage.getByTestId('offers')).toContainText(offerName);
await expect(sharedPage.locator(`[data-test-offer="${offerName}"]`), 'Should have free-trial offer').toBeVisible();
// open offer details page
// await sharedPage.locator(`[data-test-offer="${offerName}"] a`).first().click();
await sharedPage.locator(`[data-test-offer="${offerName}"] a`).first().click();
// fetch offer url from portal settings and open it
await sharedPage.goto(offerLink);
const portalUrl = await sharedPage.locator('[data-test-input="offer-portal-url"]').inputValue();
await sharedPage.goto(portalUrl);
const portalTriggerButton = sharedPage.frameLocator('[data-testid="portal-trigger-frame"]').locator('[data-testid="portal-trigger-button"]');
const portalFrame = sharedPage.frameLocator('[data-testid="portal-popup-frame"]');
@ -151,7 +155,7 @@ test.describe('Portal', () => {
});
// Creates a one-time discount offer for 10% off
const {offerName, offerLink} = await createOffer(sharedPage, {
const offerName = await createOffer(sharedPage, {
name: 'Black Friday Special',
tierName: tierName,
offerType: 'discount',
@ -161,10 +165,14 @@ test.describe('Portal', () => {
});
// check that offer was added in the offer list screen
await sharedPage.goto('/ghost/#/settings/offers');
await expect(sharedPage.getByTestId('offers')).toContainText(offerName);
await expect(sharedPage.locator(`[data-test-offer="${offerName}"]`), 'Should have free-trial offer').toBeVisible();
await sharedPage.goto(offerLink);
// open offer details page
await sharedPage.locator(`[data-test-offer="${offerName}"] a`).first().click();
// fetch offer url from portal settings and open it
const portalUrl = await sharedPage.locator('[data-test-input="offer-portal-url"]').inputValue();
await sharedPage.goto(portalUrl);
const portalTriggerButton = sharedPage.frameLocator('[data-testid="portal-trigger-frame"]').locator('[data-testid="portal-trigger-button"]');
const portalFrame = sharedPage.frameLocator('[data-testid="portal-popup-frame"]');
@ -215,7 +223,7 @@ test.describe('Portal', () => {
});
// Creates a one-time discount offer for 10% off
const {offerName, offerLink} = await createOffer(sharedPage, {
const offerName = await createOffer(sharedPage, {
name: 'Black Friday Special',
tierName: tierName,
offerType: 'discount',
@ -224,10 +232,14 @@ test.describe('Portal', () => {
});
// check that offer was added in the offer list screen
await sharedPage.goto('/ghost/#/settings/offers');
await expect(sharedPage.getByTestId('offers')).toContainText(offerName);
await expect(sharedPage.locator(`[data-test-offer="${offerName}"]`), 'Should have free-trial offer').toBeVisible();
await sharedPage.goto(offerLink);
// open offer details page
await sharedPage.locator(`[data-test-offer="${offerName}"] a`).first().click();
// fetch offer url from portal settings and open it
const portalUrl = await sharedPage.locator('[data-test-input="offer-portal-url"]').inputValue();
await sharedPage.goto(portalUrl);
const portalTriggerButton = sharedPage.frameLocator('[data-testid="portal-trigger-frame"]').locator('[data-testid="portal-trigger-button"]');
const portalFrame = sharedPage.frameLocator('[data-testid="portal-popup-frame"]');
@ -274,7 +286,7 @@ test.describe('Portal', () => {
});
// Create an offer. This will be archived
const {offerLink} = await createOffer(sharedPage, {
const offerName = await createOffer(sharedPage, {
name: 'To be archived',
tierName: tierName,
offerType: 'discount',
@ -288,8 +300,18 @@ test.describe('Portal', () => {
offerType: 'discount',
amount: 10
});
// Check if the offer appears in the archive list
await sharedPage.locator('.gh-contentfilter-menu-trigger').click();
await sharedPage.getByRole('option', {name: 'Archived offers'}).click();
await expect(sharedPage.getByRole('link', {name: offerName}), 'Should have an archived offer').toBeVisible();
// Go to the offer and grab the offer URL
await sharedPage.locator('.gh-offers-list .gh-list-row').filter({hasText: offerName}).click();
const portalUrl = await sharedPage.locator('input#url').inputValue();
// Open the offer URL and make sure portal popup doesn't load
await sharedPage.goto(offerLink);
await sharedPage.goto(portalUrl);
const portalPopup = await sharedPage.locator('[data-testid="portal-popup-frame"]').isVisible();
await expect(portalPopup).toBeFalsy();
});

89
ghost/core/test/e2e-browser/utils/e2e-browser-utils.js
View File

@ -247,71 +247,72 @@ const createTier = async (page, {name, monthlyPrice, yearlyPrice, trialDays}, en
* @param {string} [options.discountType]
* @param {number} [options.discountDuration]
* @param {number} options.amount
* @returns {Promise<object>} Unique offer name
* @returns {Promise<string>} Unique offer name
*/
const createOffer = async (page, {name, tierName, offerType, amount, discountType = null, discountDuration = 3}) => {
await page.goto('/ghost');
await page.locator('[data-test-nav="settings"]').click();
await page.locator('.gh-nav a[href="#/offers/"]').click();
// Keep offer names unique & <= 40 characters
let offerName = `${name} (${new ObjectID().toHexString().slice(0, 40 - name.length - 3)})`;
// Tiers request can take time, so waiting until there is no connections before interacting with them
await page.waitForLoadState('networkidle');
const hasExistingOffers = await page.getByTestId('offers').getByRole('button', {name: 'Manage offers'}).isVisible();
const isCTA = await page.getByTestId('offers').getByRole('button', {name: 'Add offer'}).isVisible();
// Archive other offers to keep the list tidy
// We only need 1 offer to be active at a time
// Either the list of active offers loads, or the CTA when no offers exist
if (hasExistingOffers && !isCTA) {
await page.getByTestId('offers').getByRole('button', {name: 'Manage offers'}).click();
await page.waitForLoadState('networkidle');
// Selector for the elements with data-testid 'offer-item'
// const offerItemsSelector = '[data-testid="offer-item"]';
await page.getByTestId('offer-item').nth(0).click();
while (await Promise.race([
page.locator('.gh-offers-list .gh-list-header').filter({hasText: 'active'}).waitFor({state: 'visible', timeout: 1000}).then(() => true),
page.locator('.gh-offers-list-cta').waitFor({state: 'visible', timeout: 1000}).then(() => false)
]).catch(() => false)) {
const listItem = page.locator('.gh-offers-list .gh-list-row:not(.header)').first();
await listItem.locator('a[href^="#/offers/"]').last().click();
await page.getByRole('button', {name: 'Archive offer'}).click();
await page
.locator('.modal-content')
.filter({hasText: 'Archive offer'})
.first()
.getByRole('button', {name: 'Archive'})
.click();
const confirmModal = page.getByTestId('confirmation-modal');
await confirmModal.getByRole('button', {name: 'Archive'}).click();
// TODO: Use a more resilient selector
const statusDropdown = await page.getByRole('button', {name: 'Archived offers'});
await statusDropdown.waitFor({
state: 'visible',
timeout: 1000
});
await statusDropdown.click();
await page.getByRole('option', {name: 'Active offers'}).click();
}
if (isCTA) {
await page.getByTestId('offers').getByRole('button', {name: 'Add offer'}).click();
} else {
await page.getByText('New offer').click();
}
// const newOfferButton = await page.getByTestId('offers').getByRole('button', {name: 'Add offer'}) || await page.getByTestId('offers').getByRole('button', {name: 'New offer'});
// await page.getByTestId('offers').getByRole('button', {name: 'Add offer'}).click();
// await newOfferButton.click();
await page.getByLabel('Offer name').fill(offerName);
await page.getByRole('link', {name: 'New offer'}).click();
await page.locator('input#name').fill(offerName);
if (offerType === 'freeTrial') {
// await page.getByRole('button', {name: 'Free trial Give free access for a limited time.'}).click();
await page.getByText('Give free access for a limited time').click();
await page.getByLabel('Trial duration').fill(`${amount}`);
await page.getByRole('button', {name: 'Free trial Give free access for a limited time.'}).click();
await page.locator('input#trial-duration').fill(`${amount}`);
} else if (offerType === 'discount') {
await page.getByLabel('Amount off').fill(`${amount}`);
await page.locator('input#amount').fill(`${amount}`);
if (discountType === 'multiple-months') {
await chooseOptionInSelect(page.getByTestId('duration-select-offers'), `Multiple-months`);
await page.getByLabel('Duration in months').fill(discountDuration.toString());
// await page.locator('[data-test-select="offer-duration"]').selectOption('repeating');
// await page.locator('input#duration-months').fill(discountDuration.toString());
await page.locator('[data-test-select="offer-duration"]').selectOption('repeating');
await page.locator('input#duration-months').fill(discountDuration.toString());
}
if (discountType === 'forever') {
await chooseOptionInSelect(page.getByTestId('duration-select-offers'), `Forever`);
await page.locator('[data-test-select="offer-duration"]').selectOption('forever');
}
}
await chooseOptionInSelect(page.getByTestId('tier-cadence-select-offers'), `${tierName} - Monthly`);
await page.getByRole('button', {name: 'Publish'}).click();
await page.waitForLoadState('networkidle');
const offerLink = await page.locator('input[name="offer-url"]').inputValue();
const priceId = await page.locator(`.gh-select-product-cadence>select>option`).getByText(`${tierName} - Monthly`).getAttribute('value');
await page.locator('.gh-select-product-cadence>select').selectOption(priceId);
return {offerName, offerLink};
await page.getByRole('button', {name: 'Save'}).click();
// Wait for the "Saved" button, ensures that next clicks don't trigger the unsaved work modal
await page.getByRole('button', {name: 'Saved'}).waitFor({
state: 'visible',
timeout: 10000
});
await page.locator('.gh-nav a[href="#/offers/"]').click();
return offerName;
};
const fillInputIfExists = async (page, selector, value) => {
@ -492,11 +493,6 @@ const generateStripeIntegrationToken = async (accountId) => {
})).toString('base64');
};
const chooseOptionInSelect = async (select, optionText) => {
await select.click();
await select.page().locator('[data-testid="select-option"]', {hasText: optionText}).click();
};
module.exports = {
setupGhost,
setupStripe,
@ -513,6 +509,5 @@ module.exports = {
completeStripeSubscription,
impersonateMember,
goToMembershipPage,
openTierModal,
chooseOptionInSelect
openTierModal
};