Added functionality to easily export all names associated with an order (#97)

* Added functionality to copy all names from an order

* Added better styling and layout for name-list copy button

* removed unused import

* Added ability to split multiple names when on a single food item

Author: Yeenasour

imports/use-cases/main/screens/order/views/order-box/OrderBox.view.jsx

@@ -132,7 +132,7 @@ class OrderBox extends Component {
                                             outlined: true,
                                             upperLabel: "Nick",
                                             lowerLabel:
-                                                "Enter an identifiable name or nick"
+                                                "Enter an identifiable name or nick (multiple names should be separated by either \"+\" or \"&\")"
                                         }}
                                     />
                                 </DigitLayout.Column>

imports/use-cases/main/screens/order/views/pizzas/Pizzas.view.jsx

@@ -10,7 +10,8 @@ import {
     DigitText,
     DigitLayout,
     DigitIfElseRendering,
-    DigitDesign
+    DigitDesign,
+    DigitButton
 } from "@cthit/react-digit-components";
 
 const ItemsContainer = styled.div`
@@ -50,6 +51,20 @@ class Pizzas extends Component {
         });
     };
 
+    copyNamesToClipboard = () => {
+        const orderItems = this.props.orderItems;
+        //const nicks = orderItems.map(item => item.nick).join("\n");
+        const nicks = orderItems.flatMap(item => item.nick.split(/\s*\+\s*|\s*&\s*/)).join("\n"); 
+        try {
+            navigator.clipboard.writeText(nicks);
+            this.props.openToast({
+                text: "Copied to clipboard"
+            });
+        } catch (err) {
+            console.error("Failed to copy: ", err);
+        }
+    }
+
     undoRemoveOrderItem = orderItem => {
         const { nick, pizza, order } = orderItem;
 
@@ -104,12 +119,21 @@ class Pizzas extends Component {
                             <DigitLayout.Column marginVertical={"16px"}>
                                 <ItemsContainer>{pizzaElements}</ItemsContainer>
                                 <hr />
-                                <DigitLayout.Row>
+                                <DigitLayout.Row justifyContent="space-between">
                                     <DigitText.Text
                                         text={
                                             "Total items: " + orderItems.length
                                         }
                                     />
+                                    <DigitDesign.CardButtons reverseDirection>
+                                        <DigitButton
+                                            disabled={this.props.orderItems.length == 0}
+                                            primary
+                                            outlined
+                                            text="Copy names to clipboard"
+                                            onClick={this.copyNamesToClipboard}
+                                        />
+                                    </DigitDesign.CardButtons>
                                 </DigitLayout.Row>
                             </DigitLayout.Column>
                         )}