Store settings + update text editor options

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,
+  heading?: boolean,
-  content?: string,
+  bulletList?: boolean,
-  limit?: number,
+  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<FabTextEditorRef, FabTextEditorProps> = ({ paragraphTools, content, limit = 400, video, image, onChange, placeholder, error, disabled = false }, ref: RefObject<FabTextEditorRef>) => {
+export const FabTextEditor: React.ForwardRefRenderFunction<FabTextEditorRef, FabTextEditorProps> = ({ heading, bulletList, blockquote, content, limit = 400, video, image, link, onChange, placeholder, error, disabled = false }, ref: RefObject<FabTextEditorRef>) => {
   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<FabTextEditorRef, Fab
 
   return (
     <div className={`fab-text-editor ${disabled && 'is-disabled'}`}>
-      <MenuBar editor={editor} paragraphTools={paragraphTools} video={video} image={image} disabled={disabled} />
+      <MenuBar editor={editor} heading={heading} bulletList={bulletList} blockquote={blockquote} video={video} image={image} link={link} disabled={disabled} />
       <EditorContent editor={editor} />
       <div className="fab-text-editor-character-count">
         {editor?.storage.characterCount.characters()} / {limit}

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<MenuBarProps> = ({ editor, paragraphTools, video, image, disabled = false }) => {
+export const MenuBar: React.FC<MenuBarProps> = ({ 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<MenuBarProps> = ({ editor, paragraphTools, video,
   return (
     <>
       <div className={`fab-text-editor-menu ${disabled ? 'fab-text-editor-menu--disabled' : ''}`}>
-        { paragraphTools &&
+        {heading &&
-        (<>
           <button
             type='button'
             onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
@@ -152,6 +154,8 @@ export const MenuBar: React.FC<MenuBarProps> = ({ editor, paragraphTools, video,
           >
             <TextAa size={24} />
           </button>
+        }
+        {bulletList &&
           <button
             type='button'
             onClick={() => editor.chain().focus().toggleBulletList().run()}
@@ -160,6 +164,8 @@ export const MenuBar: React.FC<MenuBarProps> = ({ editor, paragraphTools, video,
           >
             <ListBullets size={24} />
           </button>
+        }
+        {blockquote &&
           <button
             type='button'
             onClick={() => editor.chain().focus().toggleBlockquote().run()}
@@ -168,9 +174,8 @@ export const MenuBar: React.FC<MenuBarProps> = ({ editor, paragraphTools, video,
           >
             <Quotes size={24} />
           </button>
-          <span className='menu-divider'></span>
-        </>)
         }
+        { (heading || bulletList || blockquote) && <span className='menu-divider'></span> }
         <button
           type='button'
           onClick={() => editor.chain().focus().toggleBold().run()}
@@ -195,14 +200,16 @@ export const MenuBar: React.FC<MenuBarProps> = ({ editor, paragraphTools, video,
         >
           <TextUnderline size={24} />
         </button>
-        <button
+        {link &&
-          type='button'
+          <button
-          onClick={() => toggleSubmenu('link')}
+            type='button'
-          disabled={disabled}
+            onClick={() => toggleSubmenu('link')}
-          className={`ignore-onclickoutside ${editor.isActive('link') ? 'is-active' : ''}`}
+            disabled={disabled}
-        >
+            className={`ignore-onclickoutside ${editor.isActive('link') ? 'is-active' : ''}`}
-          <LinkSimpleHorizontal size={24} />
+          >
-        </button>
+            <LinkSimpleHorizontal size={24} />
+          </button>
+        }
         { (video || image) && <span className='menu-divider'></span> }
         { video &&
         (<>

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<TFieldValues, TContext extends object> extends FormControlledComponent<TFieldValues, TContext>, AbstractFormItemProps<TFieldValues> {
   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 = <TFieldValues extends FieldValues, TContext extends object>({ id, label, tooltip, className, control, valueDefault, error, warning, rules, disabled = false, formState, limit, paragraphTools, video, image }: FormRichTextProps<TFieldValues, TContext>) => {
+export const FormRichText = <TFieldValues extends FieldValues, TContext extends object>({ id, label, tooltip, className, control, valueDefault, error, warning, rules, disabled = false, formState, limit, heading, bulletList, blockquote, video, image, link }: FormRichTextProps<TFieldValues, TContext>) => {
   const textEditorRef = React.useRef<FabTextEditorRef>();
   const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
 
@@ -53,9 +56,12 @@ export const FormRichText = <TFieldValues extends FieldValues, TContext extends
         <FabTextEditor onChange={onChange}
                        content={value}
                        limit={limit}
-                       paragraphTools={paragraphTools}
+                       heading={heading}
+                       bulletList={bulletList}
+                       blockquote={blockquote}
                        video={video}
                        image={image}
+                       link={link}
                        disabled={isDisabled}
                        ref={textEditorRef} />
       } />

app/frontend/src/javascript/components/store/product-form.tsx

@@ -362,7 +362,10 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
             <HtmlTranslate trKey="app.admin.store.product_form.product_description_info" />
           </FabAlert>
           <FormRichText control={control}
-                        paragraphTools={true}
+                        heading
+                        bulletList
+                        blockquote
+                        link
                         limit={6000}
                         id="description" />
         </div>

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<StoreSettingsProps> = (onError, onSuccess) => {
+  const { t } = useTranslation('admin');
+
+  const { control, handleSubmit } = useForm<Settings>();
+
+  /**
+   * Callback triggered when the form is submitted: process with the product creation or update.
+   */
+  const onSubmit: SubmitHandler<Settings> = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <div className='store-settings'>
+      <header>
+        <h2>{t('app.admin.store_settings.title')}</h2>
+      </header>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <p>{t('app.admin.store_settings.withdrawal_instructions')}</p>
+        <FabAlert level="warning">
+          <HtmlTranslate trKey="app.admin.store_settings.withdrawal_info" />
+        </FabAlert>
+        <FormRichText control={control}
+                      heading
+                      bulletList
+                      link
+                      limit={400}
+                      id="withdrawal" />
+        <FabButton type='submit' className='save-btn'>{t('app.admin.store_settings.save')}</FabButton>
+      </form>
+    </div>
+  );
+};
+
+const StoreSettingsWrapper: React.FC<StoreSettingsProps> = (props) => {
+  return (
+    <Loader>
+      <StoreSettings {...props} />
+    </Loader>
+  );
+};
+
+Application.Components.component('storeSettings', react2angular(StoreSettingsWrapper, ['onError', 'onSuccess']));

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";

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;
+      }
+    }
+  }
+}

app/frontend/templates/admin/store/settings.html

@@ -1 +1 @@
-<h2>Settings page</h2>
+<store-settings on-success="onSuccess" on-error="onError"/>

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"