(feat) withdrawal instructions in order ready email

app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx

@@ -33,7 +33,7 @@ export interface FabTextEditorRef {
 /**
  * This component is a WYSIWYG text editor
  */
-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 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
@@ -75,7 +75,11 @@ export const FabTextEditor: React.ForwardRefRenderFunction<FabTextEditorRef, Fab
     ],
     content,
     onUpdate: ({ editor }) => {
-      onChange(editor.getHTML());
+      if (editor.isEmpty) {
+        onChange('');
+      } else {
+        onChange(editor.getHTML());
+      }
     }
   });
 
@@ -94,7 +98,7 @@ export const FabTextEditor: React.ForwardRefRenderFunction<FabTextEditorRef, Fab
   editorRef.current = editor;
 
   return (
-    <div className={`fab-text-editor ${disabled && 'is-disabled'}`}>
+    <div className={`fab-text-editor ${disabled ? 'is-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">

app/frontend/src/javascript/components/cart/store-cart.tsx

@@ -249,7 +249,7 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
    */
   const withdrawalInstructions = (): string => {
     const instructions = settings?.get('store_withdrawal_instructions');
-    if (instructions) {
+    if (!_.isEmpty(instructions)) {
       return instructions;
     }
     return t('app.public.store_cart.please_contact_FABLAB', { FABLAB: settings?.get('fablab_name') });

app/frontend/src/javascript/components/store/order-actions.tsx

@@ -1,9 +1,11 @@
-import React, { useState, BaseSyntheticEvent } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Select from 'react-select';
 import { FabModal } from '../base/fab-modal';
 import OrderAPI from '../../api/order';
 import { Order } from '../../models/order';
+import FabTextEditor from '../base/text-editor/fab-text-editor';
+import { HtmlTranslate } from '../base/html-translate';
 
 interface OrderActionsProps {
   order: Order,
@@ -115,15 +117,12 @@ export const OrderActions: React.FC<OrderActionsProps> = ({ order, onSuccess, on
         confirmButton={t('app.shared.store.order_actions.confirm')}
         onConfirm={handleActionConfirmation}
         className="order-actions-confirmation-modal">
-        <p>{t(`app.shared.store.order_actions.confirm_order_${currentAction?.value}`)}</p>
+        <HtmlTranslate trKey={`app.shared.store.order_actions.confirm_order_${currentAction?.value}_html`} />
         {currentAction?.value === 'ready' &&
-          <textarea
+          <FabTextEditor
-            id="order-ready-note"
+            content={readyNote}
-            value={readyNote}
             placeholder={t('app.shared.store.order_actions.order_ready_note')}
-            onChange={(e: BaseSyntheticEvent) => setReadyNote(e.target.value)}
+            onChange={setReadyNote} />
-            style={{ width: '100%' }}
-            rows={5} />
         }
       </FabModal>
     </>

app/frontend/src/javascript/components/store/show-order.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import _ from 'lodash';
 import { IApplication } from '../../models/application';
 import { User } from '../../models/user';
 import { react2angular } from 'react2angular';
@@ -83,7 +84,7 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderId, currentUser, onSu
    */
   const withdrawalInstructions = (): string => {
     const instructions = settings?.get('store_withdrawal_instructions');
-    if (instructions) {
+    if (!_.isEmpty(instructions)) {
       return instructions;
     }
     return t('app.shared.store.show_order.please_contact_FABLAB', { FABLAB: settings?.get('fablab_name') });
@@ -149,7 +150,7 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderId, currentUser, onSu
           {order.order_items_attributes.map(item => (
             <article className='store-cart-list-item' key={item.id}>
               <div className='picture'>
-                <img alt=''src={item.orderable_main_image_url || noImage} />
+                <img alt='' src={item.orderable_main_image_url || noImage} />
               </div>
               <div className="ref">
                 <span>{t('app.shared.store.show_order.reference_short')} {item.orderable_ref || ''}</span>

app/frontend/src/stylesheets/application.scss

@@ -95,6 +95,7 @@
 @import "modules/settings/user-validation-setting";
 @import "modules/socials/fab-socials";
 @import "modules/store/_utilities";
+@import "modules/store/order-actions.scss";
 @import "modules/store/order-item";
 @import "modules/store/orders-dashboard";
 @import "modules/store/orders";

app/frontend/src/stylesheets/modules/store/order-actions.scss

@@ -0,0 +1,6 @@
+.order-actions-confirmation-modal {
+  .fab-text-editor,
+  span > p {
+    margin-top: 1rem;
+  }
+}

app/services/orders/order_service.rb

@@ -6,7 +6,7 @@ class Orders::OrderService
     ORDERS_PER_PAGE = 20
 
     def list(filters, current_user)
-      orders = Order.includes([:statistic_profile]).where(nil)
+      orders = Order.includes(statistic_profile: [:user]).where(nil)
       orders = filter_by_user(orders, filters, current_user)
       orders = filter_by_reference(orders, filters, current_user)
       orders = filter_by_state(orders, filters)

app/views/notifications_mailer/notify_user_order_is_ready.erb

@@ -4,5 +4,5 @@
 <%= t('.body.notify_user_order_is_ready', REFERENCE: @attached_object.order.reference) %>
 </p>
 <p>
-  <%= @attached_object.note %>
+  <%= sanitize @attached_object.note.presence || Setting.get('store_withdrawal_istructions').presence || _t('notify_user_order_is_ready.body.please_contact_FABLAB', FABLAB: Setting.get('fablab_name')) %>
 </p>

config/locales/app.shared.en.yml

@@ -623,16 +623,16 @@ en:
             delivered: "Delivered"
           confirm: 'Confirm'
           confirmation_required: "Confirmation required"
-          confirm_order_in_progress: "Is this order in the process of being prepared?"
+          confirm_order_in_progress_html: "Please confirm this order in being prepared."
           order_in_progress_success: "Order is under preparation"
-          confirm_order_ready: "Is this order ready?"
+          confirm_order_ready_html: "Please confirm this order is ready."
-          order_ready_note: 'Leave your message'
+          order_ready_note: 'You can leave a message to the customer about withdrawal instructions'
           order_ready_success: "Order is ready"
-          confirm_order_delivered: "Is this order delivered?"
+          confirm_order_delivered_html: "Please confirm this order was delivered."
           order_delivered_success: "Order was delivered"
-          confirm_order_canceled: "Do you want to cancel this order? You can modify product stock in stock manage."
+          confirm_order_canceled_html: "<strong>Do you really want to cancel this order?</strong><p>If this impacts stock, please reflect the change in <em>edit product &gt; stock management</em>. This won't be automatic.</p>"
           order_canceled_success: "Order was canceled"
-          confirm_order_refunded: "Do you want to refund this order? You can modify product stock in stock manage."
+          confirm_order_refunded_html: "<stong>Do you really want to refund this order?</strong><p>If this impacts stock, please reflect the change in <em>edit product &gt; stock management</em>. This won't be automatic.</p>"
           order_refunded_success: "Order was refunded"
       unsaved_form_alert:
         modal_title: "You have some unsaved changes"

config/locales/mails.en.yml

@@ -378,6 +378,7 @@ en:
       subject: "Your command is ready"
       body:
         notify_user_order_is_ready: "Your command %{REFERENCE} is ready:"
+        please_contact_FABLAB: "Please contact {FABLAB, select, undefined{us} other{{FABLAB}}} for withdrawal instructions."
     notify_user_order_is_canceled:
       subject: "Your command is canceled"
       body: