https://urbanplates.com/assets/js/templates/ui/items/bag-item.js

1/***************************
2 * About This File
3 ***************************/
4
5/**
6 * @module bag-item.js
7 * @description HTML template for bag items.
8 */
9
10/***************************
11 * Imports
12 ***************************/
13
14import {UrbanPlatesApi} from "../../../api/urban-plates.js";
15import {Formatter} from "../../../utils/formatter.js";
16
17/***************************
18 * Contents
19 ***************************/
20
21/**
22 * Generates HTML for a bag item.
23 * @param item
24 * @param options
25 * @returns {string}
26 */
27export function bagItemHTML(item, {baseClassName = "bagItem", hasSurcharge = false, showActions = true, editUrl = null} = {}) {
28    const getFullPrice = (item) => {
29        let total = item.extended_price;
30
31        if (item.child_items) {
32            for (const child of item.child_items) {
33                total += getFullPrice(child);
34            }
35        }
36
37        return total;
38    }
39
40    const childrenHTML = () => {
41        if (!item.child_items || item.child_items.length === 0) return "";
42
43        const grandchildrenHTML = (childItem) => {
44            if (!childItem.child_items || childItem.child_items.length === 0) return "";
45
46            return `
47                <div class="${baseClassName}DetailsChildItemsItemGrandchildItems">
48                    ${childItem.child_items.map(grandchild => `
49                        <div class="${baseClassName}DetailsChildItemsItemGrandchildItemsItem">
50                            <span class="${baseClassName}DetailsChildItemsItemGrandchildItemsItemQuantity">${grandchild.quantity}x -</span>
51                            <span class="${baseClassName}DetailsChildItemsItemGrandchildItemsItemName">${grandchild.item_name}</span>
52                            ${grandchild.extended_price > 0 ? `<span class="${baseClassName}DetailsChildItemsItemGrandchildItemsItemPrice">+${Formatter.money(grandchild.extended_price, {surcharge: hasSurcharge})}</span>` : ""}
53                        </div>
54                    `).join("")}
55                </div>
56            `;
57        }
58
59        return `
60            <div class="${baseClassName}DetailsChildItems">
61                ${item.child_items.map(child => `
62                    <div class="${baseClassName}DetailsChildItemsItem">
63                        <span class="${baseClassName}DetailsChildItemsItemQuantity">${child.quantity}x -</span>
64                        <div class="${baseClassName}DetailsChildItemsItemInfo">
65                                <span class="${baseClassName}DetailsChildItemsItemName">${child?.size ? `${child.size.name}` : ""} ${child?.style ? `${child.style.name}` : ""} ${child.item_name}</span>
66                                ${child.extended_price > 0 ? `<span class="${baseClassName}DetailsChildItemsItemPrice">+${Formatter.money(child.extended_price, {surcharge: hasSurcharge})}</span>` : ""}
67                        </div>
68                        ${grandchildrenHTML(child)}
69                    </div>
70                `).join("")}
71            </div>
72        `;
73    }
74
75    return `
76        <div class="${baseClassName}" data-order-item-id="${item.order_item_id}">
77            <div class="${baseClassName}Details">
78                <div class="${baseClassName}DetailsImageWrapper">
79                    <img class="${baseClassName}DetailsImage" src="${UrbanPlatesApi.getCachedURL(item.image_urls.thumbnail)}" alt="${item.item_name}">
80                </div>
81                <div class="${baseClassName}DetailsName">${item.item_name}</div>
82                <div class="${baseClassName}DetailsSizeStyle">${item?.size ? `${item.size.name}` : ''} ${item?.size && item?.style ? "|" : ""} ${item?.style ? `${item.style.name}` : ''}</div>
83                ${childrenHTML()}
84                <div class="${baseClassName}DetailsPrice">${Formatter.money(getFullPrice(item), {surcharge: hasSurcharge})}</div>
85                ${showActions ?
86        `<div class="${baseClassName}DetailsActions">
87                    <mt-quantity-selector class="${baseClassName}DetailsActionsQuantity" min="0" max="50" id="${item.order_item_id}" value="${item.quantity}"></mt-quantity-selector>
88                    <div class="${baseClassName}DetailsActionsButtons">
89                        ${editUrl ? `<a class="${baseClassName}DetailsActionsEditLink" href="${editUrl}">Edit</a>` : ``}
90                        <button class="${baseClassName}DetailsActionsRemoveButton" type="button">Remove</button>
91                    </div>
92                 </div>` : ``}
93            </div>
94        </div>
95    `;
96}
97
98/***************************
99 * Exports
100 ***************************/
101