meemup-library 1.0.11 → 1.0.13

package/lib/controllers/PrintContentController.js

@@ -0,0 +1,510 @@
+import PhoneController from "./PhoneController";
+export default new class {
+    constructor() {
+        this.createAddressText = (customer) => {
+            let text = "";
+            if (customer === null || customer === undefined)
+                return ["", ""];
+            if (customer.buzzer !== "") {
+                text += `buzzer ${customer.buzzer}, `;
+            }
+            if (customer.apartment !== "") {
+                text += `Apt ${customer.apartment}, `;
+            }
+            if (customer.houseNo !== "") {
+                text += `houseNo: ${customer.houseNo}, `;
+            }
+            if (customer.address !== "") {
+                if (customer.city === "")
+                    text += `${customer.address} `;
+                else {
+                    const address = customer.address
+                        .split(customer.city)[0]
+                        .split(customer.postalCode)[0];
+                    text += `${address} `;
+                    text += ` ${customer.city},`;
+                }
+            }
+            if (text === "")
+                return null;
+            if (text.substring(text.length - 1) === ",") {
+                text = text.substring(0, text.length - 1);
+            }
+            return [text, customer.postalCode];
+        };
+        this.ccyFormat = (num, pre = "") => {
+            return `${pre}${num.toFixed(2)}`;
+        };
+        this.calculatePaperSize = (paper, width) => {
+            switch (paper) {
+                case 1:
+                    return width + "mm";
+                case 2:
+                    return "210mm";
+                case 3:
+                    return "148mm";
+                case 4:
+                    return "105mm";
+                default:
+                    return width + "mm";
+            }
+        };
+        this.sortProduct = (products, sortType) => {
+            const new_product = [];
+            if (sortType === 1) {
+                return products;
+            }
+            else if (sortType === 2) {
+                products.sort((a, b) => {
+                    let nameA = a.title.toUpperCase(); // ignore upper and lowercase
+                    let nameB = b.title.toUpperCase(); // ignore upper and lowercase
+                    if (nameA < nameB) {
+                        return -1;
+                    }
+                    if (nameA > nameB) {
+                        return 1;
+                    }
+                    // names must be equal
+                    return 0;
+                }).forEach((row) => new_product.push(row));
+            }
+            else if (sortType === 3) {
+                products.sort(function (a, b) {
+                    let nameA = a.title.toUpperCase(); // ignore upper and lowercase
+                    let nameB = b.title.toUpperCase(); // ignore upper and lowercase
+                    if (nameA > nameB) {
+                        return -1;
+                    }
+                    if (nameA < nameB) {
+                        return 1;
+                    }
+                    // names must be equal
+                    return 0;
+                }).forEach((row) => new_product.push(row));
+            }
+            else if (sortType === 4) {
+                products.sort((a, b) => a.totalAmount > b.totalAmount ? 1 : -1).forEach((row) => new_product.push(row));
+            }
+            else if (sortType === 5) {
+                products.sort((a, b) => a.totalAmount < b.totalAmount ? 1 : -1).forEach((row) => new_product.push(row));
+            }
+            return new_product;
+        };
+        this.filterByCategoryList = (products, catList, onlyListCategory, productList, onlyListProduct) => {
+            if (!onlyListCategory && !onlyListProduct) {
+                return products;
+            }
+            const new_product = [];
+            if (onlyListCategory && !onlyListProduct) {
+                products.filter(x => catList.find(element => element === x.categoryId)).forEach((row) => new_product.push(row));
+            }
+            else if (!onlyListCategory && onlyListProduct) {
+                products.filter(x => productList.find(element => element === x.productId)).forEach((row) => new_product.push(row));
+            }
+            else {
+                const arr = [];
+                products.filter(x => catList.find(element => element === x.categoryId)).forEach((row) => arr.push(row));
+                arr.filter(x => productList.find(element => element === x.productId)).forEach((row) => {
+                    new_product.push(row);
+                });
+            }
+            return new_product;
+        };
+    }
+    sum(values) {
+        let sum = 0;
+        values.forEach(value => sum += value);
+        return sum;
+    }
+    convertTimeStringToDateByT(data = null) {
+        if (data instanceof Date) {
+            return data;
+        }
+        else if (typeof data === "string" && data.length > 0) {
+            try {
+                const time_ = data.split("T");
+                const parts = time_[1].split(":");
+                let dd = new Date();
+                dd.setHours(isNaN(Number(parts[0])) ? 0 : Number(parts[0]));
+                dd.setMinutes(isNaN(Number(parts[1])) ? 0 : Number(parts[1]));
+                dd.setSeconds(isNaN(Number(parts[2])) ? 0 : Number(parts[2]));
+                return dd;
+            }
+            catch (e) {
+                return null;
+            }
+        }
+        else {
+            return null;
+        }
+    }
+    formatAMPMDate(date) {
+        let datetime = this.convertTimeStringToDateByT(date);
+        if (datetime instanceof Date) {
+            let hours = datetime.getHours();
+            let minutes = datetime.getMinutes();
+            let ampm = hours >= 12 ? "PM" : "AM";
+            hours = hours % 12;
+            hours = hours ? hours : 12;
+            minutes = minutes < 10 ? "0" + minutes : minutes;
+            return (hours < 10 ? "0" + hours : hours) + ":" + minutes + " " + ampm;
+        }
+        else {
+            return "";
+        }
+    }
+    formatDateTime(dateTime, mode = "full") {
+        try {
+            let dt = Date.parse(dateTime);
+            let time_ = this.formatAMPMDate(dateTime);
+            if (mode !== "full") {
+                return time_;
+            }
+            return (new Intl.DateTimeFormat("en-GB", {
+                weekday: "short",
+                year: "2-digit",
+                month: "short",
+                day: "2-digit"
+                // hour: "2-digit",
+                // minute: "2-digit"
+            }).format(dt ? dt : Date.now()) +
+                " " +
+                time_);
+        }
+        catch (e) {
+            return dateTime;
+        }
+    }
+    weekDayName(date) {
+        const days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+        try {
+            return days[new Date(date).getDay()];
+        }
+        catch (e) {
+            return days[0];
+        }
+    }
+    formatDate(date) {
+        let d = new Date(date), month = "" + (d.getMonth() + 1), day = "" + d.getDate(), year = d.getFullYear();
+        if (month.length < 2)
+            month = "0" + month;
+        if (day.length < 2)
+            day = "0" + day;
+        return [year, month, day].join("-");
+    }
+    substring(value, start, end) {
+        try {
+            if (!value)
+                return "";
+            return value.substring(start, end);
+        }
+        catch (e) {
+            return "";
+        }
+    }
+    defaultLayout(account, detail, template, symbol = "$") {
+        var _a, _b;
+        const { rootUrl } = account;
+        const { order, company, customer, products, paymentInfo } = detail;
+        const { printOnlyCertainCategoriesList, printOnlyCertainCategories, printOnlyCertainProductsList, printOnlyCertainProducts, customerAddressFontSize, showCustomerInfo, orderInfo, showPrices, textAfterAddress, textAfterAddressCenter, nameAddressShow, nameAddressCenter, font, fontSize, marginBottom, marginLeft, marginRight, marginTop, logoAvailable, logoCenter, logoUrl, sortProducts, textBeforeProducts, textBeforeProductsCenter, customerOnlinePaymentAgrementSection, id, promotionCodeNote, promotionId, qrCodeOrderDetails, showCategoryTitle, showProductKitchenName, textEnd, textEndCenter, width, paper } = template;
+        const address = this.createAddressText(customer);
+        return (`
+      <div style="font-family: ${font}; font-weight: 500; font-size: ${fontSize + "px"}; min-width: ${this.calculatePaperSize(paper, width)}; width: ${this.calculatePaperSize(paper, width)}; padding : ${marginTop + "mm"} ${marginRight + "mm"} ${marginBottom + "mm"} ${marginLeft + "mm"};">
+      <img alt="" style=" display : ${logoAvailable ? "block" : "none"}; margin : ${logoCenter ? "auto" : "0"}; width: 200px; min-height : 50px;" src="${rootUrl}${company.id}/${logoUrl}" /> 
+      <p style=" margin: 5px 0; line-height: 1; display: ${nameAddressShow ? "block" : "none"}; text-align:${nameAddressCenter ? "center" : "start"};">
+           ${company.title}
+      </p>
+      <p style="margin:5px 0; display:${nameAddressShow ? "block" : "none"}; text-align:${nameAddressCenter ? "center" : "start"};">
+          ${company.address}
+      </p>
+      <p style="margin: 5px 0; line-height: 1; display: ${nameAddressShow ? "block" : "none"}; text-align:${nameAddressCenter ? "center" : "start"};">
+          ${PhoneController.formatPhoneNumber(company.phone)}
+      </p>
+      <p style="margin: 5px 0; line-height: 1; display: ${textAfterAddress ? "block" : "none"}; text-align:${textAfterAddressCenter ? "center" : "start"};">
+          ${textAfterAddress}
+      </p>
+
+    <div style=" display:${order.orderTypeString ? "flex" : "none"}; flex-direction: column; align-items: center; justify-content: center; margin: 8px 0;" >
+   
+      <p style=" font-size: x-large; font-weight: bold; text-align: center;line-height: 0.7;  margin: 5px 0;"> #${order.orderNumber}&nbsp;&nbsp;&nbsp;${order.orderTypeString} </p>
+      
+      <strong style="font-size: x-large; text-align: center;">
+        &#9201;${order.asSoonAsPossible && "ASAP"}&nbsp;${this.formatDateTime(order.desiredDate, "time")}
+      </strong>
+      
+      ${order.estimatedTime ? `<strong style="display:block; font-size:x-large; text-align:center;">Est. Time ${this.substring(order.estimatedTime, 0, order.estimatedTime.length - 3)}</strong>` : ""}     
+    </div>
+ 
+  
+   <div style="display: ${showPrices ? "block" : "none"}; border-top: 1px solid black;">
+      <strong style="display : block; margin: 5px 0; line-height: 1;">PAY INFORMATION: </strong>
+      <strong style="font-size: large; margin: 0 0 16px 0; line-height: 1.5;">${order.paymentTypeString + (order.paymentType === 2 ? `: ${this.ccyFormat(order.totalAmount, symbol)} ` : " ") + " - " + order.paymentStateString}</strong>
+  
+      <p style="margin: 5px 0; line-height: 1;  display: ${order.paymentType === 1 ? "block" : "none"};">Credit Card : <strong>**** **** **** ${order.lastFourDigits}</strong></p>
+ 
+    </div>
+    
+    <p style="display:${orderInfo ? "block" : "none"}; margin: 5px 0; line-height: 1;"> Order number : <strong>#${order.orderNumber}</strong> </p>
+    <p style="display:${orderInfo ? "block" : "none"};  margin: 5px 0; line-height: 1;">
+     ${order.orderTypeString}:<span style="font-size: x-large;">&#9201;</span><strong>on ${this.formatDateTime(order.desiredDate)}</strong>
+    </p>
+
+    ${order.estimatedTime ? `<p style="display: block; margin: 5px 0; line-height: 1;">Estimated Time : <strong>${(_a = order.estimatedTime) === null || _a === void 0 ? void 0 : _a.substring(0, order.estimatedTime.length - 3)}</strong></p>` : ""}
+
+    <p style="display:block; margin: 5px 0; line-height: 1;">Reg. Date:<strong>${this.formatDateTime(order.registrationDate)}</strong> </p>
+
+    <div style="border-top: 1px solid black;">
+   
+          <div style="display:${showCustomerInfo ? "block" : "none"}">
+  
+              <strong style="display:block; margin: 5px 0; line-height: 1;"> CUSTOMER DATA :  </strong>
+              <p style="display:${customer.fullName ? "block" : "none"}; margin: 5px 0; line-height: 1;">${customer.fullName}</p>
+              <p style="display:${customer.phoneNumber ? "block" : "none"}; margin: 5px 0; line-height: 1;">${PhoneController.formatPhoneNumber(customer.phoneNumber)}</p>
+              <p style="display:${address ? "block" : "none"}; font-size: ${customerAddressFontSize + "px"}; margin: 5px 0; line-height: 1;">
+                  ${address !== null ? address[0] : null}
+                  <br/>
+                  ${address !== null ? address[1] : null}
+              </p>
+              <p style="display:${customer.email ? "block" : "none"}; margin: 5px 0; line-height: 1;">${customer.email}</p>
+      
+          </div>
+  
+          <strong style="display:block; font-size: ${(fontSize * 1.2).toFixed(0) + "px"}; margin: 10px 0; line-height: 1;">
+                  ${this.sum(this.filterByCategoryList(this.sortProduct(products, sortProducts), printOnlyCertainCategoriesList, printOnlyCertainCategories, printOnlyCertainProductsList, printOnlyCertainProducts).map((row) => row.quantity))} ITEM
+         </strong>
+  
+         <p style="display:${textBeforeProducts ? "block" : "none"}; margin: 5px 0; padding-left : 15px; text-align : ${textBeforeProductsCenter ? "center" : "start"}; line-height: 1;"> ${textBeforeProducts} </p>
+      
+      </div>
+  
+    <div style="border-top : 1px solid black;">
+     
+      <div style="padding : 4px 1px; display : flex; flex-direction : row; border-bottom : 1px solid black; font-weight : bold;">
+  
+        <div style="width : 40px; min-width : 40px; max-width : 40px;">#</div>
+        <div style="flex-wrap : wrap; word-wrap : break-word;">Products</div>
+        <div style="flex-grow : 1; text-align: end;">Price</div>
+  
+      </div>
+  
+  
+      ${this.filterByCategoryList(this.sortProduct(products, sortProducts), printOnlyCertainCategoriesList, printOnlyCertainCategories, printOnlyCertainProductsList, printOnlyCertainProducts).map((row) => (`<div style="border-bottom : 1px solid black; padding : 0 1px; display : flex;  flex-direction : row; justify-content : flex-end;">
+              
+              <div style="width : 40px; min-width : 40px; max-width : 40px">${row.quantity}X</div>
+              
+              <div style="flex-wrap : wrap; word-wrap : break-word; text-align : left;">
+                                         
+                ${(showCategoryTitle && row.categoryTitle !== "" && row.categoryTitle !== null) ? "[" + row.categoryTitle + "]" : ""} ${showProductKitchenName && row.kitchenReceiptName !== "" ? row.kitchenReceiptName : row.title}
+                ${row.extrasNames ? row.extrasNames.split(" , ").map(i => `<div>+${i}</div>`).join("") : ""}
+                ${row.note ? `<div><span style="font-size: x-large;">&#128488;</span>{note}</div>` : ""}
+  
+              </div>
+  
+              <div style="flex-grow : 1; text-align : right;">${this.ccyFormat(row.totalAmount, symbol)}</div>
+          </div>`)).join("")}
+  
+      <div style="display : ${showPrices ? "flex" : "none"}; padding : 1px; flex-direction : row; justify-content : flex-end; border-bottom: 1px dotted black;">
+        <div style="min-width : 150px; flex-grow : 1; text-align: end;">Order Amount :</div>
+        <div style="min-width : 100px; text-align: end;">${this.ccyFormat(order.orderAmount, symbol)}</div>
+      </div>
+  
+      <div style="display : ${order.orderType === 1 && order.deliveryCosts > 0 ? "flex" : "none"}; padding : 1px; flex-direction : row; justify-content : flex-end; border-bottom: 1px dotted black;">
+        <div style="min-width : 150px; flex-grow : 1; text-align: end;">Delivery costs : </div>
+        <div style="min-width : 100px; text-align: end;">${this.ccyFormat(order.deliveryCosts, symbol)}</div>
+      </div>
+  
+      <div style="display : ${order.discountAmount > 0 ? "flex" : "none"}; padding : 1px; flex-direction : row; justify-content : flex-end; border-bottom: 1px dotted black;">
+        <div style="min-width : 150px; flex-grow : 1; text-align: end;">Discount : </div>
+        <div style="min-width : 100px; text-align: end;">${(order.discountAmount > 0 ? "- " : "") + this.ccyFormat(order.discountAmount, symbol)}</div>
+      </div>
+      
+      <div style="display : flex; padding : 1px; flex-direction : row; justify-content : flex-end; border-bottom: 1px dotted black;">
+        <div style="min-width : 150px; flex-grow : 1; text-align: end;">Subtotal : </div>
+        <div style="min-width : 100px; text-align: end;">${this.ccyFormat(order.subtotalAmount, symbol)}</div>
+      </div>
+  
+      <div style="display : ${order.hstAmount > 0 && order.serviceFee < 1 ? "flex" : "none"}; padding : 1px; flex-direction : row; justify-content : flex-end; border-bottom: 1px dotted black;">
+        <div style="min-width : 150px; flex-grow : 1; text-align: end;">HST(${this.ccyFormat(order.hstPercentage)}%) : </div>
+        <div style="min-width : 100px; text-align: end;">${this.ccyFormat(order.hstAmount, symbol)}</div>
+      </div>
+  
+      <div style="display : ${order.tipAmount > 0 ? "flex" : "none"}; padding : 1px; flex-direction : row; justify-content : flex-end; border-bottom: 1px dotted black;">
+        <div style="min-width : 150px; flex-grow : 1; text-align: end;">Tip : </div>
+        <div style="min-width : 100px; text-align: end;">${this.ccyFormat(order.tipAmount, symbol)}</div>
+      </div>
+  
+      <div style="display : flex; padding : 1px; flex-direction : row; justify-content : flex-end; border-bottom: 1px solid black;">
+        <strong style="min-width : 150px; flex-grow : 1; font-size: larger; text-align: end;">${order.paymentType === 1 ? "Total" : "Total & Still to pay"} : </strong>
+        <strong style="min-width : 100px; font-size: larger; text-align: end;">${this.ccyFormat(order.totalAmount, symbol)}</strong>
+      </div>
+  
+    </div>
+  
+    <div class="border-top : 1px solid black;">
+      <div style="margin : 5px 0; line-height: 1;">
+        <strong>Remarks customer:</strong>
+        <em style="display : ${!order.remarks ? "initial" : "none"}">There are no remarks</em>
+      </div>
+      <strong style="display : ${order.remarks ? "block" : "none"};">${order.remarks}</strong>
+    </div>
+  
+    <div style="display : ${order.paymentType === 1 && customerOnlinePaymentAgrementSection ? "block" : "none"}; border-top : 1px solid black; text-align : center;">
+  
+        <p style="margin : 5px 0; line-height: 1;"><strong>CREDIT CARD : </strong>**** **** **** ${order.lastFourDigits}</p>
+        
+        <strong style="margin : 5px 0; line-height: 1;">
+            I agree to pay above total amount according to card issuer agreement
+        </strong>
+        <br/>
+        <br/>
+        <strong style="margin : 5px 0; line-height: 1;">SIGNATURE</strong>
+    </div>
+
+    <div style="display : ${promotionId ? "block" : "none"}; border-top : 1px solid black; margin : 5px 0; line-height: 1; text-align : ${textEndCenter ? "center" : "start"}">
+        ${promotionCodeNote}
+    </div>
+  
+    <div style="margin : 0 16px; display : ${(paymentInfo !== null && order.paymentType === 8 && ((_b = paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.metadata) === null || _b === void 0 ? void 0 : _b.length) > 0) ? "block" : "none"};">
+        ${paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.metadata.map((item) => (`<div style="display : flex;  flex-direction : row; align-items : center; justify-content : flex-start; margin-bottom : 8px;">
+                 <strong style="margin : 0 16px 0 0; line-height: 1;"> ${item.text} </strong>
+                 <strong style="margin : 0 16px 0 0; line-height: 1;" > ${item.value}</strong>
+              </div>`))}
+      </div>
+
+    <div style="display : ${qrCodeOrderDetails ? "flex" : "none"}; justify-content: center; align-items: center; border-top : 1px solid black; border-bottom : 1px solid black;">
+      <img alt="" style="width: 100px; height: 100px; margin: auto;" src="${order.qrCodeDetailUrl}" />
+    </div>
+  
+    <p style="display : ${textEnd ? "block" : "none"}; text-align : ${textEndCenter ? "center" : "start"}; line-height: 1;  margin-top: 4px;">${textEnd}</p>
+  
+    <strong style="display: block; font-size : x-small; text-align : center; margin-top: 4px; ">fs-${company.id}-${order.id}-${id}</strong>
+  
+  
+</div>       
+            `);
+    }
+    labelLayout(detail, template) {
+        const { products, customer, order } = detail;
+        const { orderSummary } = template;
+        const { font, fontSize, marginBottom, marginLeft, marginRight, marginTop, showCategoryTitle, showProductKitchenName, width, paper } = template;
+        return (`
+            <div style="font-family : ${font};font-weight : normal;">
+                ${products.map((row) => (`<div>
+                        <div 
+                            style="
+                                display: block;
+                                 min-width: ${this.calculatePaperSize(paper, width)};
+                                 width: ${this.calculatePaperSize(paper, width)};
+                                padding : ${marginTop + "mm"} ${marginRight + "mm"} ${marginBottom + "mm"} ${marginLeft + "mm"};">
+                
+                                ${orderSummary ?
+            `<p style="font-size:${fontSize - 2};">
+                                     #${order.orderNumber}&nbsp;&nbsp;- &nbsp;&nbsp;
+                                      ${order.orderTypeString}
+                                    </p>` : ""}
+                    
+                                ${orderSummary ?
+            `<p style="font-size:${fontSize - 4};">
+                                    ${this.weekDayName(order.desiredDate)},&nbsp;
+                                    ${this.formatDate(order.desiredDate)}
+                                    &nbsp;&nbsp;&nbsp;
+                                    ${this.formatAMPMDate(order.desiredDate)}
+                                    </p>` : ""}
+        
+                                <p style="font-size:${fontSize - 2}; border-bottom : ${orderSummary ? "2px" : "0px"} dotted black; padding-bottom : 5px margin-bottom : 5px;">
+                                ${customer.fullName}
+                                </p>
+        
+                
+                                <p style="margin-bottom: 5px; padding-bottom: 5px; border-bottom: 2px solid black;">
+                                    ${row.quantity}X &nbsp;
+                                    ${showCategoryTitle && row.categoryTitle ? "[" + row.categoryTitle.toUpperCase() + "]" : ""}
+                                    ${showProductKitchenName && row.kitchenReceiptName !== "" ? row.kitchenReceiptName : row.title}
+                                    ${row.extrasNames !== "" && `<div>${row.extrasNames}</div>`}
+                                </p>
+                
+                
+                                ${row.note !== "" ?
+            `<p  style="margin-bottom: 5px; padding-bottom: 5px; border-bottom: 2px solid black;">
+                                        ${row.note}
+                                    </p>` : ""}
+                
+                        </div>
+        
+                        <div style="clear: both; page-break-after: always;" ></div>
+                    </div>
+                    `)).join("")}
+            </div>
+ 
+        `);
+    }
+    paymentFailed(detail, currency) {
+        var _a, _b, _c;
+        return `<div style="padding-top: 16px; padding-bottom: 16px;">
+        <div style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
+            <img alt="" src="https://beta.meemup.com/api/shop/logo/${detail.company.id}"
+                style="width: 100px; min-width: 100px; max-width: 100px; aspect-ratio: auto;">
+        </div>
+        <div
+            style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-left: 10%; margin-right: 10%; margin-top: 16px; padding-left: 16px; padding-right: 16px;">
+            <strong style="font-size: 18px;">AMOUNT</strong>
+            <strong style="font-size: 18px;">${currency} ${detail.order.totalAmount}</strong>
+        </div>
+        <div
+            style="display: flex; flex-direction: row; align-items: center; justify-content: center; border-bottom: 2px solid black; margin-left: 10%; margin-right: 10%; padding: 16px;">
+            <strong style="font-size: 18px; padding-right: 16px;"></strong>
+            <strong style="font-size: 18px;">#0</strong>
+        </div>
+        <div
+            style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 16px 10%; border-bottom: 2px solid black;">
+            <strong style="font-size: 18px;">${(_a = detail.paymentInfo) === null || _a === void 0 ? void 0 : _a.state}</strong>
+            <p style="font-size: 12px; font-weight: bold; margin-top: 8px; padding-bottom: 16px;">${(_b = detail.paymentInfo) === null || _b === void 0 ? void 0 : _b.message}</p>
+        </div>
+        <div style="margin-left: 16px; margin-right: 16px;">
+        ${(_c = detail.paymentInfo) === null || _c === void 0 ? void 0 : _c.metadata.map(i => (`<div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 8px;">
+            <strong style="font-size: 12px; margin-right: 16px;">${i.text}</strong>
+            <strong style="font-size: 12px;">${i.value}</strong>
+        </div>`))}
+            
+        </div>
+    </div>`;
+    }
+    packageLabel(detail) {
+        return `<div style="padding: 16px;">
+        <div
+            style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 2px solid black;">
+            <strong style="font-size: 22px;">${detail.order.orderTypeString}</strong>
+            <strong style="font-size: 22px;">${detail.order.orderNumber}</strong>
+        </div>
+        <div style="border-bottom: 2px solid black; padding-top: 8px; padding-bottom: 8px;">
+        ${detail.products.map((i) => (`<strong style="font-size: 16px; padding-top: 2px; padding-bottom: 2px;">${i.quantity}X ${i.title}</strong>`))}
+        </div>
+        <div
+            style="margin-top: 16px; margin-bottom: 16px; padding-bottom: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 2px solid black;">
+            <strong style="font-size: 22px;">${detail.order.orderTypeString}</strong>
+            <strong style="font-size: 42px;">${detail.order.orderNumber}</strong>
+            <strong style="font-size: 16px;">${detail.customer.fullName}</strong>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 16px; margin-left: 10%; margin-right: 10%;">
+            <strong style="font-size: 16px;">${detail.order.desiredDate}</strong>
+            <div style="display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 16px;">
+                <img alt="" src="https://beta.meemup.com/api/ordering/${detail.order.id}/${detail.company.id}/QR"
+                    style="width: 100px; min-width: 100px; max-width: 100px; aspect-ratio: auto;">
+            </div>
+        </div>
+    </div>`;
+    }
+    preview(account, detail, template, symbol = "$") {
+        switch (template.layout) {
+            case 2:
+                return this.defaultLayout(account, detail, template, symbol);
+            case 4:
+                const products = this.filterByCategoryList(this.sortProduct(detail.products, template.sortProducts), template.printOnlyCertainCategoriesList, template.printOnlyCertainCategories, template.printOnlyCertainProductsList, template.printOnlyCertainProducts);
+                if (products.length === 0)
+                    return `<div>no product </div>`;
+                return this.labelLayout(detail, template);
+            default:
+                return `<div> template.layout : ${template.layout}</div>`;
+        }
+    }
+}();

package/lib/controllers/ProductModalController.d.ts

@@ -0,0 +1,36 @@
+import EnumOrderType from "../enums/EnumOrderType";
+import IExtra from "../interfaces/IExtra";
+import ISelectedExtraItem from "../interfaces/ISelectedExtraItem";
+import ISelectedProductExtra from "../interfaces/ISelectedProductExtra";
+import ITextValue from "../interfaces/ITextValue";
+import IDExtraItem from "../interfaces/database/IDExtraItem";
+import IDExtra from "../interfaces/database/IDExtra";
+import { TBaseExtra } from "../types/TBaseExtra";
+import IOrderItem from "../interfaces/order/IOrderItem";
+import IDProduct from "../interfaces/database/IDProduct";
+import IProduct from "../interfaces/IProduct";
+import IDProductExtra from "../interfaces/database/IDProductExtra";
+declare const _default: {
+    getExtraSelectedItems(list: ISelectedProductExtra[], extraId: number): ISelectedExtraItem[];
+    canAddToBasket(product: IDProduct, selected: ISelectedProductExtra[], extras: IDExtra[]): boolean;
+    productModalToBasketItem(product: IDProduct, selectedExtraList: ISelectedProductExtra[], extras: IDExtra[], count: number, price: number, note: string): IOrderItem;
+    productName(product: IDProduct | IProduct): string;
+    productImage(product: IDProduct | IProduct): string;
+    productPrice(product: IDProduct | IProduct, orderType: EnumOrderType): number;
+    baseItem(list: ISelectedProductExtra[], extraList: IDExtra[]): TBaseExtra;
+    defaultExtraOfProductToSelectedExtras(product: IDProduct, extras: IDExtra[]): ISelectedProductExtra[];
+    defaultExtraOfProductToBasketItem(product: IDProduct, extras: IDExtra[], orderType: EnumOrderType): IOrderItem;
+    singleSelectExtraItemPrice: (extra: IExtra, base: TBaseExtra, item: IDExtraItem) => number;
+    multiSelectExtraPrice: (extra: IDExtra, base: TBaseExtra, item: IDExtraItem, selectedList?: ISelectedExtraItem[]) => number;
+    multiSelectExtraItemOptions(item: IDExtraItem, max: number, selectedList: ISelectedExtraItem[]): ITextValue[];
+    scaleSum(array?: ISelectedExtraItem[]): number;
+    calculatePrice(orderType: EnumOrderType, product: any, list: ISelectedProductExtra[], base: TBaseExtra, extraList: IDExtra[]): number;
+    plusString(first: string, second: string): string;
+    getValidateExtras(extras: IDProductExtra[], extraSelected: ISelectedProductExtra[]): IDProductExtra[];
+    getProductExtras(pExtras: IDProductExtra[], sExtras: ISelectedProductExtra[], extras: IDExtra[]): IDExtra[];
+    quantitySum(array?: ISelectedExtraItem[]): number;
+    productMinAndMaxOptions(product: IDProduct): ITextValue[];
+    sortByKey(array: any[], key: string, conditionForSort?: boolean): any[];
+    extraItemsSortAction: (a: IDExtraItem, b: IDExtraItem) => 0 | 1 | -1;
+};
+export default _default;