Handled custom error messages for signup

refs https://github.com/TryGhost/Team/issues/1526
This commit is contained in:
Rishabh 2022-06-01 19:42:26 +05:30
parent ab2215ef05
commit 495b21b8e3
5 changed files with 26 additions and 20 deletions

View File

@ -111,11 +111,12 @@ async function signup({data, state, api}) {
lastPage: 'signup' lastPage: 'signup'
}; };
} catch (e) { } catch (e) {
const message = e?.message || 'Failed to sign up, please try again';
return { return {
action: 'signup:failed', action: 'signup:failed',
popupNotification: createPopupNotification({ popupNotification: createPopupNotification({
type: 'signup:failed', autoHide: false, closeable: true, state, status: 'error', type: 'signup:failed', autoHide: false, closeable: true, state, status: 'error',
message: 'Failed to sign up, please try again' message
}) })
}; };
} }

View File

@ -624,7 +624,9 @@ function ProductCard({product, products, selectedInterval, handleChooseSignup})
const {action} = useContext(AppContext); const {action} = useContext(AppContext);
const cardClass = selectedProduct === product.id ? 'gh-portal-product-card checked' : 'gh-portal-product-card'; const cardClass = selectedProduct === product.id ? 'gh-portal-product-card checked' : 'gh-portal-product-card';
const noOfProducts = products.length; const noOfProducts = products?.filter((d) => {
return d.type === 'paid';
})?.length;
let disabled = (['signup:running', 'checkoutPlan:running'].includes(action)) ? true : false; let disabled = (['signup:running', 'checkoutPlan:running'].includes(action)) ? true : false;

View File

@ -29,11 +29,12 @@ const setup = (overrides) => {
describe('SignupPage', () => { describe('SignupPage', () => {
test('renders', () => { test('renders', () => {
const {nameInput, emailInput, chooseButton, signinButton} = setup(); const {nameInput, emailInput, queryAllByRole, signinButton} = setup();
const chooseButton = queryAllByRole('button', {name: 'Continue'});
expect(nameInput).toBeInTheDocument(); expect(nameInput).toBeInTheDocument();
expect(emailInput).toBeInTheDocument(); expect(emailInput).toBeInTheDocument();
expect(chooseButton).toHaveLength(2); expect(chooseButton).toHaveLength(1);
expect(signinButton).toBeInTheDocument(); expect(signinButton).toBeInTheDocument();
}); });

View File

@ -185,7 +185,7 @@ describe('Signup', () => {
} = await setup({ } = await setup({
site: FixtureSite.singleTier.basic site: FixtureSite.singleTier.basic
}); });
const continueButton = within(popupIframeDocument).queryAllByRole('button', {name: 'Continue'});
expect(popupFrame).toBeInTheDocument(); expect(popupFrame).toBeInTheDocument();
expect(triggerButtonFrame).toBeInTheDocument(); expect(triggerButtonFrame).toBeInTheDocument();
expect(siteTitle).toBeInTheDocument(); expect(siteTitle).toBeInTheDocument();
@ -197,7 +197,8 @@ describe('Signup', () => {
// expect(fullAccessTitle).toBeInTheDocument(); // expect(fullAccessTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument(); expect(signinButton).toBeInTheDocument();
// expect(submitButton).toBeInTheDocument(); // expect(submitButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2); expect(chooseBtns).toHaveLength(1);
expect(continueButton).toHaveLength(1);
fireEvent.change(nameInput, {target: {value: 'Jamie Larsen'}}); fireEvent.change(nameInput, {target: {value: 'Jamie Larsen'}});
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
@ -232,7 +233,7 @@ describe('Signup', () => {
expect(yearlyPlanTitle).toBeInTheDocument(); expect(yearlyPlanTitle).toBeInTheDocument();
// expect(fullAccessTitle).toBeInTheDocument(); // expect(fullAccessTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument(); expect(signinButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2); expect(chooseBtns).toHaveLength(1);
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
@ -294,7 +295,7 @@ describe('Signup', () => {
test('with default settings on monthly plan', async () => { test('with default settings on monthly plan', async () => {
const { const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns, ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle, submitButton
} = await setup({ } = await setup({
site: FixtureSite.singleTier.basic site: FixtureSite.singleTier.basic
}); });
@ -308,7 +309,7 @@ describe('Signup', () => {
expect(monthlyPlanTitle).toBeInTheDocument(); expect(monthlyPlanTitle).toBeInTheDocument();
expect(yearlyPlanTitle).toBeInTheDocument(); expect(yearlyPlanTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument(); expect(signinButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2); expect(chooseBtns).toHaveLength(1);
const monthlyPlanContainer = within(popupIframeDocument).queryByText(/Monthly$/); const monthlyPlanContainer = within(popupIframeDocument).queryByText(/Monthly$/);
const singleTierProduct = FixtureSite.singleTier.basic.products.find(p => p.type === 'paid'); const singleTierProduct = FixtureSite.singleTier.basic.products.find(p => p.type === 'paid');
@ -322,7 +323,7 @@ describe('Signup', () => {
await within(popupIframeDocument).findByText(benefitText); await within(popupIframeDocument).findByText(benefitText);
expect(emailInput).toHaveValue('jamie@example.com'); expect(emailInput).toHaveValue('jamie@example.com');
expect(nameInput).toHaveValue('Jamie Larsen'); expect(nameInput).toHaveValue('Jamie Larsen');
fireEvent.click(chooseBtns[1]); fireEvent.click(submitButton);
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({ expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
email: 'jamie@example.com', email: 'jamie@example.com',
name: 'Jamie Larsen', name: 'Jamie Larsen',
@ -335,8 +336,7 @@ describe('Signup', () => {
test('with default settings on yearly plan', async () => { test('with default settings on yearly plan', async () => {
const { const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns, ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns, submitButton, siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle
} = await setup({ } = await setup({
site: FixtureSite.singleTier.basic site: FixtureSite.singleTier.basic
}); });
@ -350,7 +350,7 @@ describe('Signup', () => {
expect(monthlyPlanTitle).toBeInTheDocument(); expect(monthlyPlanTitle).toBeInTheDocument();
expect(yearlyPlanTitle).toBeInTheDocument(); expect(yearlyPlanTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument(); expect(signinButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2); expect(chooseBtns).toHaveLength(1);
const yearlyPlanContainer = within(popupIframeDocument).queryByText(/Yearly$/); const yearlyPlanContainer = within(popupIframeDocument).queryByText(/Yearly$/);
const singleTierProduct = FixtureSite.singleTier.basic.products.find(p => p.type === 'paid'); const singleTierProduct = FixtureSite.singleTier.basic.products.find(p => p.type === 'paid');
@ -364,7 +364,7 @@ describe('Signup', () => {
await within(popupIframeDocument).findByText(benefitText); await within(popupIframeDocument).findByText(benefitText);
expect(emailInput).toHaveValue('jamie@example.com'); expect(emailInput).toHaveValue('jamie@example.com');
expect(nameInput).toHaveValue('Jamie Larsen'); expect(nameInput).toHaveValue('Jamie Larsen');
fireEvent.click(chooseBtns[1]); fireEvent.click(submitButton);
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({ expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
email: 'jamie@example.com', email: 'jamie@example.com',
name: 'Jamie Larsen', name: 'Jamie Larsen',
@ -380,7 +380,7 @@ describe('Signup', () => {
test('without name field on monthly plan', async () => { test('without name field on monthly plan', async () => {
const { const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns, ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle, submitButton
} = await setup({ } = await setup({
site: FixtureSite.singleTier.withoutName site: FixtureSite.singleTier.withoutName
}); });
@ -398,7 +398,7 @@ describe('Signup', () => {
expect(monthlyPlanTitle).toBeInTheDocument(); expect(monthlyPlanTitle).toBeInTheDocument();
expect(yearlyPlanTitle).toBeInTheDocument(); expect(yearlyPlanTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument(); expect(signinButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2); expect(chooseBtns).toHaveLength(1);
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
@ -406,7 +406,7 @@ describe('Signup', () => {
await within(popupIframeDocument).findByText(benefitText); await within(popupIframeDocument).findByText(benefitText);
expect(emailInput).toHaveValue('jamie@example.com'); expect(emailInput).toHaveValue('jamie@example.com');
fireEvent.click(chooseBtns[1]); fireEvent.click(submitButton);
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({ expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
email: 'jamie@example.com', email: 'jamie@example.com',

View File

@ -354,9 +354,11 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(body) body: JSON.stringify(body)
}).then(function (res) { }).then(async function (res) {
if (!res.ok) { if (!res.ok) {
throw new Error('Could not create stripe checkout session'); const errData = await res.json();
const errMssg = errData?.errors?.[0]?.message || 'Failed to signup, please try again.';
throw new Error(errMssg);
} }
return res.json(); return res.json();
}).then(function (result) { }).then(function (result) {
@ -402,7 +404,7 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
}) })
}).then(function (res) { }).then(function (res) {
if (!res.ok) { if (!res.ok) {
throw new Error('Could not create stripe checkout session'); throw new Error('Unable to create stripe checkout session');
} }
return res.json(); return res.json();
}).then(function (result) { }).then(function (result) {