const GuideStatusPage = (props) => {
const handleClick = function handleClick(e, page, path) {
e.preventDefault();
props.changePage(page, path);
};
const onboardingData = props.onboarding_data;
const nextPage = nextPageName(onboardingData);
const title = nextPage ?
t('web.admin.onboarding.guide.status_page.title', { name: props.name }) :
t('web.admin.onboarding.guide.status_page.title_done');
const todoDescPartial = div([
p({ className: css.description }, t('web.admin.onboarding.guide.status_page.description_p1')),
p({ className: css.description }, t('web.admin.onboarding.guide.status_page.description_p2')),
]);
const doneDescPartial = div([
p({ className: css.description },
t('web.admin.onboarding.guide.status_page.congratulation_p1.content',
{ knowledge_base_link: a(
{ href: 'http://support.sharetribe.com/knowledgebase/articles/892140',
target: '_blank',
rel: 'noreferrer',
alt: t('web.admin.onboarding.guide.status_page.congratulation_p1.knowledge_base_alt'),
},
t('web.admin.onboarding.guide.status_page.congratulation_p1.knowledge_base_link')),
})),
p({ className: css.description },
t('web.admin.onboarding.guide.status_page.congratulation_p2.content',
{ marketplace_guide_link: a(
{ href: 'https://www.sharetribe.com/academy/guide/',
target: '_blank',
rel: 'noreferrer',
alt: t('web.admin.onboarding.guide.status_page.congratulation_p2.marketplace_guide_alt'),
},
t('web.admin.onboarding.guide.status_page.congratulation_p2.marketplace_guide_link')),
})),
p({ className: css.description },
t('web.admin.onboarding.guide.status_page.congratulation_p3.content',
{ contact_support_link: a(
{ 'data-uv-trigger': 'contact',
href: 'mailto:support@sharetribe.com',
title: t('web.admin.onboarding.guide.status_page.congratulation_p3.contact_support_title'),
},
t('web.admin.onboarding.guide.status_page.congratulation_p3.contact_support_link')),
})),
]);
const description = nextPage ? todoDescPartial : doneDescPartial;
const { routes } = props;
const links = {
slogan_and_description: {
link_title: 'web.admin.onboarding.guide.status_page.slogan_and_description',
next_link_title: 'web.admin.onboarding.guide.next_step.slogan_and_description',
path: routes.admin_getting_started_guide_slogan_and_description_path(),
},
cover_photo: {
link_title: 'web.admin.onboarding.guide.status_page.cover_photo',
next_link_title: 'web.admin.onboarding.guide.next_step.cover_photo',
path: routes.admin_getting_started_guide_cover_photo_path(),
},
filter: {
link_title: 'web.admin.onboarding.guide.status_page.filter',
next_link_title: 'web.admin.onboarding.guide.next_step.filter',
path: routes.admin_getting_started_guide_filter_path(),
},
paypal: {
link_title: 'web.admin.onboarding.guide.status_page.paypal',
next_link_title: 'web.admin.onboarding.guide.next_step.paypal',
path: routes.admin_getting_started_guide_paypal_path(),
},
listing: {
link_title: 'web.admin.onboarding.guide.status_page.listing',
next_link_title: 'web.admin.onboarding.guide.next_step.listing',
path: routes.admin_getting_started_guide_listing_path(),
},
invitation: {
link_title: 'web.admin.onboarding.guide.status_page.invitation',
next_link_title: 'web.admin.onboarding.guide.next_step.invitation',
path: routes.admin_getting_started_guide_invitation_path(),
},
};
return div({ className: 'container' }, [
h2({ className: css.title }, title),
description,
hr({ className: css.sectionSeparator }),
ul({ className: css.stepList }, [
li({ className: css.stepListItemDone }, [
span({ className: css.stepListLink }, [
span({ className: css.stepListCheckbox }),
t('web.admin.onboarding.guide.status_page.create_your_marketplace'),
]),
]),
].concat(onboardingData.map((step) => {
const page = step.step;
const stepListItem = step.complete ?
css.stepListItemDone :
css.stepListItem;
return li({ className: stepListItem }, [
a({
className: css.stepListLink,
onClick: (e) => handleClick(e, page, links[page].path),
href: links[page].path,
}, [
span({ className: css.stepListCheckbox }),
t(links[page].link_title),
]),
]);
}))),
nextPage ?
a({
className: css.nextButton,
href: links[nextPage].path,
onClick: (e) => handleClick(e, nextPage, links[nextPage].path),
}, t(links[nextPage].next_link_title)) :
null,
]);
};
const GuideStatusPage = (props) => {
const handleClick = function handleClick(e, path) {
e.preventDefault();
props.changePage(path);
};
const onboardingData = props.onboarding_data;
// TODO: interpolating translation strings needs more thinking
const title = props.nextStep ?
props.t('title').replace(/%\{(\w+)\}/g, props.name) :
props.t('title_done');
const todoDescPartial = div([
p({ className: css.description }, props.t('description_p1')),
p({ className: css.description }, props.t('description_p2')),
]);
const doneDescPartial = div([
p({
className: css.description,
dangerouslySetInnerHTML: { __html: props.t('congratulation_p1') }, // eslint-disable-line react/no-danger
}),
p({
className: css.description,
dangerouslySetInnerHTML: { __html: props.t('congratulation_p2') }, // eslint-disable-line react/no-danger
}),
p({
className: css.description,
dangerouslySetInnerHTML: { __html: props.t('congratulation_p3') }, // eslint-disable-line react/no-danger
}),
]);
const description = props.nextStep ? todoDescPartial : doneDescPartial;
return div({ className: 'container' }, [
h2({ className: css.title }, title),
description,
hr({ className: css.sectionSeparator }),
ul({ className: css.stepList }, [
li({ className: css.stepListItemDone }, [
span({ className: css.stepListLink }, [
span({ className: css.stepListCheckbox }),
props.t('create_your_marketplace'),
]),
]),
].concat(onboardingData.map((step) => {
const key = step.step;
const stepListItem = step.complete ?
css.stepListItemDone :
css.stepListItem;
return li({ className: stepListItem, key }, [
a({
className: css.stepListLink,
onClick: (e) => handleClick(e, `/${step.sub_path}`),
href: `${props.initialPath}/${step.sub_path}`,
}, [
span({ className: css.stepListCheckbox }),
props.t(key),
]),
]);
}))),
props.nextStep ?
a({
className: css.nextButton,
href: `${props.initialPath}/${props.nextStep.link}`,
onClick: (e) => handleClick(e, `/${props.nextStep.link}`),
}, props.nextStep.title) :
null,
]);
};
const GuideStatusPage = (props) => {
const handleClick = function handleClick(e, path) {
e.preventDefault();
props.changePage(path);
};
const onboardingData = props.onboarding_data;
const title = props.nextStep ?
t('web.admin.onboarding.guide.status_page.title', { name: props.name }) :
t('web.admin.onboarding.guide.status_page.title_done');
const todoDescPartial = div([
p({ className: css.description }, t('web.admin.onboarding.guide.status_page.description_p1')),
p({ className: css.description }, t('web.admin.onboarding.guide.status_page.description_p2')),
]);
const doneDescPartial = div([
p({ className: css.description },
t('web.admin.onboarding.guide.status_page.congratulation_p1.content',
{ knowledge_base_link: a(
{ href: 'http://support.sharetribe.com/knowledgebase/articles/892140-what-to-do-after-the-basic-setup-of-your-marketpla',
target: '_blank',
rel: 'noreferrer',
alt: t('web.admin.onboarding.guide.status_page.congratulation_p1.knowledge_base_alt'),
}),
})),
p({ className: css.description },
t('web.admin.onboarding.guide.status_page.congratulation_p2.content',
{ marketplace_guide_link: a(
{ href: 'https://www.sharetribe.com/academy/guide/',
target: '_blank',
rel: 'noreferrer',
alt: t('web.admin.onboarding.guide.status_page.congratulation_p2.marketplace_guide_alt'),
},
t('web.admin.onboarding.guide.status_page.congratulation_p2.marketplace_guide_link')),
})),
p({ className: css.description },
t('web.admin.onboarding.guide.status_page.congratulation_p3.content',
{ contact_support_link: a(
{ 'data-uv-trigger': 'contact',
href: 'mailto:support@sharetribe.com',
title: t('web.admin.onboarding.guide.status_page.congratulation_p3.contact_support_title'),
},
t('web.admin.onboarding.guide.status_page.congratulation_p3.contact_support_link')),
})),
]);
const description = props.nextStep ? todoDescPartial : doneDescPartial;
return div({ className: 'container' }, [
h2({ className: css.title }, title),
description,
hr({ className: css.sectionSeparator }),
ul({ className: css.stepList }, [
li({ className: css.stepListItemDone }, [
span({ className: css.stepListLink }, [
span({ className: css.stepListCheckbox }),
t('web.admin.onboarding.guide.status_page.create_your_marketplace'),
]),
]),
].concat(onboardingData.map((step) => {
const key = step.step;
const stepListItem = step.complete ?
css.stepListItemDone :
css.stepListItem;
const titles = {
slogan_and_description: 'web.admin.onboarding.guide.status_page.slogan_and_description',
cover_photo: 'web.admin.onboarding.guide.status_page.cover_photo',
filter: 'web.admin.onboarding.guide.status_page.filter',
paypal: 'web.admin.onboarding.guide.status_page.paypal',
listing: 'web.admin.onboarding.guide.status_page.listing',
invitation: 'web.admin.onboarding.guide.status_page.invitation',
};
return li({ className: stepListItem, key }, [
a({
className: css.stepListLink,
onClick: (e) => handleClick(e, `/${step.sub_path}`),
href: `${props.initialPath}/${step.sub_path}`,
}, [
span({ className: css.stepListCheckbox }),
t(titles[key]),
]),
]);
}))),
props.nextStep ?
a({
className: css.nextButton,
href: `${props.initialPath}/${props.nextStep.link}`,
onClick: (e) => handleClick(e, `/${props.nextStep.link}`),
}, props.nextStep.title) :
null,
]);
};