(feat) display withdrawal instructions on the show-order page

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

@@ -11,6 +11,8 @@ import { Order } from '../../models/order';
 import FormatLib from '../../lib/format';
 import OrderLib from '../../lib/order';
 import { OrderActions } from './order-actions';
+import SettingAPI from '../../api/setting';
+import { SettingName } from '../../models/setting';
 
 declare const Application: IApplication;
 
@@ -28,11 +30,15 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderId, currentUser, onSu
   const { t } = useTranslation('shared');
 
   const [order, setOrder] = useState<Order>();
+  const [settings, setSettings] = useState<Map<SettingName, string>>(null);
 
   useEffect(() => {
     OrderAPI.get(orderId).then(data => {
       setOrder(data);
     }).catch(onError);
+    SettingAPI.query(['store_withdrawal_instructions', 'fablab_name'])
+      .then(res => setSettings(res))
+      .catch(onError);
   }, []);
 
   /**
@@ -72,6 +78,17 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderId, currentUser, onSu
     return paymentVerbose;
   };
 
+  /**
+   * Text instructions for the customer
+   */
+  const withdrawalInstructions = (): string => {
+    const instructions = settings?.get('store_withdrawal_instructions');
+    if (instructions) {
+      return instructions;
+    }
+    return t('app.shared.store.show_order.please_contact_FABLAB', { FABLAB: settings?.get('fablab_name') });
+  };
+
   /**
    * Callback after action success
    */
@@ -172,6 +189,10 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderId, currentUser, onSu
           }
           <p className='total'>{t('app.shared.store.show_order.cart_total')} <span>{FormatLib.price(OrderLib.paidTotal(order))}</span></p>
         </div>
+        <div className="withdrawal-instructions">
+          <label>{t('app.shared.store.show_order.pickup')}</label>
+          <p dangerouslySetInnerHTML={{ __html: withdrawalInstructions() }} />
+        </div>
       </div>
     </div>
   );

app/frontend/src/stylesheets/modules/store/orders.scss

@@ -101,7 +101,8 @@
     align-items: flex-start;
 
     .payment-info,
-    .amount {
+    .amount,
+    .withdrawal-instructions {
       padding: 2.4rem;
       border: 1px solid var(--gray-soft);
       border-radius: var(--border-radius);

config/locales/app.shared.en.yml

@@ -592,6 +592,8 @@ en:
           gift_total: "Discount total"
           coupon: "Coupon"
           cart_total: "Cart total"
+          pickup: "Pickup your products"
+          please_contact_FABLAB: "Please contact {FABLAB, select, undefined{us} other{{FABLAB}}} for withdrawal instructions."
           state:
             cart: 'Cart'
             in_progress: 'Under preparation'