119 lines
3.1 KiB
TypeScript
119 lines
3.1 KiB
TypeScript
import { ComponentConfig } from '@reacteditor/core';
|
|
import { KeyRound, LogIn, UserPlus } from 'lucide-react';
|
|
import AccountPanel, {
|
|
type AccountFlow,
|
|
type AccountPanelProps,
|
|
} from '@/components/shopify/account-panel';
|
|
|
|
/**
|
|
* One component, five registered blocks. `flow` decides the field list and the
|
|
* API endpoint, so it lives in `defaultProps` and is deliberately absent from
|
|
* `fields` — it is behaviour, not content. Everything editable here is copy.
|
|
*/
|
|
const accountBlock = (
|
|
flow: AccountFlow,
|
|
label: string,
|
|
icon: React.ReactNode,
|
|
defaults: Omit<AccountPanelProps, 'flow'>
|
|
): ComponentConfig<AccountPanelProps> => ({
|
|
label,
|
|
icon,
|
|
category: 'account',
|
|
defaultProps: { flow, ...defaults },
|
|
fields: {
|
|
title: { label: 'Title', type: 'text', contentEditable: true },
|
|
description: {
|
|
label: 'Description',
|
|
type: 'textarea',
|
|
contentEditable: true,
|
|
},
|
|
submitLabel: { label: 'Button label', type: 'text', contentEditable: true },
|
|
successMessage: {
|
|
label: 'Success message',
|
|
type: 'textarea',
|
|
contentEditable: true,
|
|
},
|
|
links: {
|
|
label: 'Footer links',
|
|
type: 'array',
|
|
defaultItemProps: { label: 'Link', url: '/account/login' },
|
|
getItemSummary: (item) => item?.label || 'Link',
|
|
arrayFields: {
|
|
label: { label: 'Label', type: 'text', contentEditable: true },
|
|
url: { label: 'Link', type: 'text' },
|
|
},
|
|
},
|
|
},
|
|
render: (props) => <AccountPanel {...props} />,
|
|
});
|
|
|
|
export const accountLoginEditor = accountBlock(
|
|
'login',
|
|
'Sign in form',
|
|
<LogIn size={16} />,
|
|
{
|
|
title: 'Sign in',
|
|
description: '',
|
|
submitLabel: 'Sign in',
|
|
successMessage: '',
|
|
links: [
|
|
{ label: 'Create an account', url: '/account/register' },
|
|
{ label: 'Forgot your password?', url: '/account/recover' },
|
|
],
|
|
}
|
|
);
|
|
|
|
export const accountRegisterEditor = accountBlock(
|
|
'register',
|
|
'Register form',
|
|
<UserPlus size={16} />,
|
|
{
|
|
title: 'Create account',
|
|
description: '',
|
|
submitLabel: 'Create account',
|
|
successMessage: '',
|
|
links: [{ label: 'Already have an account? Sign in', url: '/account/login' }],
|
|
}
|
|
);
|
|
|
|
export const accountRecoverEditor = accountBlock(
|
|
'recover',
|
|
'Password recovery form',
|
|
<KeyRound size={16} />,
|
|
{
|
|
title: 'Reset password',
|
|
description:
|
|
"Enter your email and we'll send you a link to set a new password.",
|
|
submitLabel: 'Send reset link',
|
|
successMessage:
|
|
'If that email has an account, a reset link is on its way.',
|
|
links: [{ label: 'Back to sign in', url: '/account/login' }],
|
|
}
|
|
);
|
|
|
|
export const accountResetEditor = accountBlock(
|
|
'reset',
|
|
'Set password form',
|
|
<KeyRound size={16} />,
|
|
{
|
|
title: 'Set a new password',
|
|
description: '',
|
|
submitLabel: 'Save password',
|
|
successMessage: '',
|
|
links: [],
|
|
}
|
|
);
|
|
|
|
export const accountActivateEditor = accountBlock(
|
|
'activate',
|
|
'Activate account form',
|
|
<KeyRound size={16} />,
|
|
{
|
|
title: 'Activate your account',
|
|
description: 'Choose a password to finish setting up your account.',
|
|
submitLabel: 'Activate account',
|
|
successMessage: '',
|
|
links: [],
|
|
}
|
|
);
|