diff --git a/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx b/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx index 9a1076349..c08d5eef7 100644 --- a/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx +++ b/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx @@ -12,11 +12,14 @@ import { MenuBar } from './menu-bar'; import { WarningOctagon } from 'phosphor-react'; interface FabTextEditorProps { - paragraphTools?: boolean, - content?: string, - limit?: number, + heading?: boolean, + bulletList?: boolean, + blockquote?: boolean, + link?: boolean, video?: boolean, image?: boolean, + content?: string, + limit?: number, onChange?: (content: string) => void, placeholder?: string, error?: string, @@ -30,7 +33,7 @@ export interface FabTextEditorRef { /** * This component is a WYSIWYG text editor */ -export const FabTextEditor: React.ForwardRefRenderFunction = ({ paragraphTools, content, limit = 400, video, image, onChange, placeholder, error, disabled = false }, ref: RefObject) => { +export const FabTextEditor: React.ForwardRefRenderFunction = ({ heading, bulletList, blockquote, content, limit = 400, video, image, link, onChange, placeholder, error, disabled = false }, ref: RefObject) => { const { t } = useTranslation('shared'); const placeholderText = placeholder || t('app.shared.text_editor.fab_text_editor.text_placeholder'); // TODO: Add ctrl+click on link to visit @@ -86,7 +89,7 @@ export const FabTextEditor: React.ForwardRefRenderFunction - +
{editor?.storage.characterCount.characters()} / {limit} diff --git a/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx b/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx index 1a580d949..d2fca119b 100644 --- a/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx +++ b/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx @@ -6,7 +6,10 @@ import { TextAa, TextBolder, TextItalic, TextUnderline, LinkSimpleHorizontal, Li interface MenuBarProps { editor?: Editor, - paragraphTools?: boolean, + heading?: boolean, + bulletList?: boolean, + blockquote?: boolean, + link?: boolean, video?: boolean, image?: boolean, disabled?: boolean, @@ -15,7 +18,7 @@ interface MenuBarProps { /** * This component is the menu bar for the WYSIWYG text editor */ -export const MenuBar: React.FC = ({ editor, paragraphTools, video, image, disabled = false }) => { +export const MenuBar: React.FC = ({ editor, heading, bulletList, blockquote, link, video, image, disabled = false }) => { const { t } = useTranslation('shared'); const [submenu, setSubmenu] = useState(''); @@ -142,8 +145,7 @@ export const MenuBar: React.FC = ({ editor, paragraphTools, video, return ( <>
- { paragraphTools && - (<> + {heading && + } + {bulletList && + } + {blockquote && - - ) } + { (heading || bulletList || blockquote) && } - + {link && + + } { (video || image) && } { video && (<> diff --git a/app/frontend/src/javascript/components/form/form-rich-text.tsx b/app/frontend/src/javascript/components/form/form-rich-text.tsx index b92f2b00a..3e38a706b 100644 --- a/app/frontend/src/javascript/components/form/form-rich-text.tsx +++ b/app/frontend/src/javascript/components/form/form-rich-text.tsx @@ -10,15 +10,18 @@ import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types'; interface FormRichTextProps extends FormControlledComponent, AbstractFormItemProps { valueDefault?: string, limit?: number, - paragraphTools?: boolean, + heading?: boolean, + bulletList?: boolean, + blockquote?: boolean, + link?: boolean, video?: boolean, - image?: boolean, + image?: boolean } /** * This component is a rich-text editor to use with react-hook-form. */ -export const FormRichText = ({ id, label, tooltip, className, control, valueDefault, error, warning, rules, disabled = false, formState, limit, paragraphTools, video, image }: FormRichTextProps) => { +export const FormRichText = ({ id, label, tooltip, className, control, valueDefault, error, warning, rules, disabled = false, formState, limit, heading, bulletList, blockquote, video, image, link }: FormRichTextProps) => { const textEditorRef = React.useRef(); const [isDisabled, setIsDisabled] = React.useState(false); @@ -53,9 +56,12 @@ export const FormRichText = } /> diff --git a/app/frontend/src/javascript/components/store/product-form.tsx b/app/frontend/src/javascript/components/store/product-form.tsx index e311321d6..503eb9323 100644 --- a/app/frontend/src/javascript/components/store/product-form.tsx +++ b/app/frontend/src/javascript/components/store/product-form.tsx @@ -362,7 +362,10 @@ export const ProductForm: React.FC = ({ product, title, onSucc
diff --git a/app/frontend/src/javascript/components/store/store-settings.tsx b/app/frontend/src/javascript/components/store/store-settings.tsx new file mode 100644 index 000000000..99a9e10f7 --- /dev/null +++ b/app/frontend/src/javascript/components/store/store-settings.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { react2angular } from 'react2angular'; +import { Loader } from '../base/loader'; +import { IApplication } from '../../models/application'; +import { useTranslation } from 'react-i18next'; +import { HtmlTranslate } from '../base/html-translate'; +import { useForm, SubmitHandler } from 'react-hook-form'; +import { FabAlert } from '../base/fab-alert'; +import { FormRichText } from '../form/form-rich-text'; +import { FabButton } from '../base/fab-button'; + +declare const Application: IApplication; + +interface StoreSettingsProps { + onError: (message: string) => void, + onSuccess: (message: string) => void +} +interface Settings { + withdrawal: string +} + +/** + * Shows store settings + */ +export const StoreSettings: React.FC = (onError, onSuccess) => { + const { t } = useTranslation('admin'); + + const { control, handleSubmit } = useForm(); + + /** + * Callback triggered when the form is submitted: process with the product creation or update. + */ + const onSubmit: SubmitHandler = (data) => { + console.log(data); + }; + + return ( +
+
+

{t('app.admin.store_settings.title')}

+
+
+

{t('app.admin.store_settings.withdrawal_instructions')}

+ + + + + {t('app.admin.store_settings.save')} + +
+ ); +}; + +const StoreSettingsWrapper: React.FC = (props) => { + return ( + + + + ); +}; + +Application.Components.component('storeSettings', react2angular(StoreSettingsWrapper, ['onError', 'onSuccess'])); diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss index 723505a11..39287162a 100644 --- a/app/frontend/src/stylesheets/application.scss +++ b/app/frontend/src/stylesheets/application.scss @@ -101,6 +101,7 @@ @import "modules/store/store-filters"; @import "modules/store/store-list-header"; @import "modules/store/store-list"; +@import "modules/store/store-settings"; @import "modules/store/store"; @import "modules/subscriptions/free-extend-modal"; @import "modules/subscriptions/renew-modal"; diff --git a/app/frontend/src/stylesheets/modules/store/store-settings.scss b/app/frontend/src/stylesheets/modules/store/store-settings.scss new file mode 100644 index 000000000..6df84056c --- /dev/null +++ b/app/frontend/src/stylesheets/modules/store/store-settings.scss @@ -0,0 +1,27 @@ +.store-settings { + max-width: 1600px; + margin: 0 auto; + padding-bottom: 6rem; + @include grid-col(12); + gap: 3.2rem; + align-items: flex-start; + header { + @include header(); + padding-bottom: 0; + grid-column: 2 / -2; + } + form { + grid-column: 2 / 7; + p { @include title-base; } + .save-btn { + background-color: var(--main); + color: var(--gray-soft-lightest); + border: none; + &:hover { + background-color: var(--main); + color: var(--gray-soft-lightest); + opacity: 0.75; + } + } + } +} \ No newline at end of file diff --git a/app/frontend/templates/admin/store/settings.html b/app/frontend/templates/admin/store/settings.html index e19771ed6..35dfdb99f 100644 --- a/app/frontend/templates/admin/store/settings.html +++ b/app/frontend/templates/admin/store/settings.html @@ -1 +1 @@ -

Settings page

+ diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index 46c57e89b..fbb668217 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -2026,4 +2026,8 @@ en: gift_total: "Discount total" coupon: "Coupon" cart_total: "Cart total" - + store_settings: + title: 'Settings' + withdrawal_instructions: 'Product withdrawal instructions' + withdrawal_info: "This text is displayed on the checkout page to inform the client about the products withdrawal method" + save: "Save" \ No newline at end of file