gistfile1.txt

<script>
    (function() {
        const container = document.querySelector('.frcp-section__content');

        function insertStyles() {
            const styles = `
                @media only screen and (min-width: 768px) {
                    .frcp-main-view .frcp-section__title-row {
                        padding-top: 0;
                    }
                }
                .frcp-main-view .frcp-section__content {
                    display: block;
                }
            `;

            const styleTag = document.createElement('style');
            styleTag.textContent = styles;
            document.querySelector('.frcp-main-view').appendChild(styleTag);
        }

        function setLoadingState() {
            container.innerHTML = `
                <div data-v-a21ad016="" class="frcp-section__spinner-container">
                    <span data-v-23d4f36e="" data-v-a21ad016="" class="frcp-spinner" style="width: 48px; height: 48px;"></span>
                </div>
            `;
        }

        function handleResponse({ orders }) {
            const returnsMarkup = orders.map(order => {
                const lineItemsMarkup = order.customerReturn.lineItems.map(item => `
                    <a href="#" target="_blank" class="frcp-order__line-item">
                        <span class="frcp-order__line-item-thumbnail">
                            <img src="${item.image.url}" width="72px" height="72px" loading="eager" class="frcp-order__line-item-image">
                            <span class="frcp-order__line-item-quantity">${item.quantity}</span>
                        </span>
                        <span class="frcp-order__line-item-info">
                            <span class="frcp-order__line-item-title-and_price">
                                <span title="${item.title}" class="frcp-order__line-item-title">${item.title}</span>
                                <span class="frcp-order__line-item-price">$${item.price}</span>
                            </span>
                        </span>
                    </a>
                `).join('');

                return `
                    <div data-v-4dc61928="" data-id="4621746143289" class="frcp-order frcp-card">
                        <div class="frcp-order__info-wrapper">
                            <div class="frcp-order__info">
                                Order: <span class="frcp-order__name">${order.shopify.orderNumber}</span>
                            </div>
                            <div class="frcp-order__date-and-tracking">
                                <div class="frcp-order__date">${order.return.createdAt.split('T')[0]}</div>
                            </div>
                        </div>
                        <div class="frcp-order__line-item-container">
                            ${lineItemsMarkup}
                        </div>
                        <div class="frcp-order__summary">
                            <div class="frcp-order__line-items-count">
                                Total items: ${order.customerReturn.lineItems.length}
                            </div>
                            <div class="frcp-order__price">
                                Grand total: <span>$${order.return.total}</span>
                            </div>
                        </div>
                        <div class="frcp-order__actions frcp-order__actions--two-actions">
                            <span onclick="window.location.href='#/orders/${order.shopify.orderId}/contact?order_name=${order.shopify.orderNumber}'" role="link" tabindex="0" class="frcp-order__btn frcp-order__contact-btn frcp-btn frcp-btn--secondary">
                                Contact us
                            </span>
                            <span onclick="window.location.href='${order.links.returnUrl}'" role="button" tabindex="0" class="frcp-btn frcp-order__btn--primary frcp-order__reorder-btn frcp-order__btn frcp-btn--primary">
                                <span class="frcp-btn__text">
                                    View return
                                </span>
                            </span>
                        </div>
                    </div>
                `;
            }).join('');

            container.innerHTML = orders.length ? returnsMarkup : `
                <div data-v-8a6caf68="" data-v-a21ad016="" class="frcp-empty-view">
                    <span data-v-8a6caf68="" class="frcp-icon">
                        <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                            <line x1="3" y1="6" x2="21" y2="6"></line>
                            <path d="M16 10a4 4 0 0 1-8 0"></path>
                        </svg>
                    </span>
                    <div data-v-8a6caf68="" class="frcp-empty-view__text">
                        You haven't created any returns yet
                    </div>
                    <div data-v-8a6caf68="" class="empty-order__actions-wrapper">
                        <a data-v-8a6caf68="" href="/collections/all" class="frcp-btn frcp-btn--primary">
                            Go to orders
                        </a>
                    </div>
                </div>
            `;
        }

        function fetchReturnsAndSetState() {
            fetch(`https://returns.hairtoppers.com/api/customer/${__st.cid}`)
                .then(response => {
                    if (!response.ok) throw new Error(`Network response was not ok: ${response.statusText}`);
                    return response.json();
                })
                .then(handleResponse)
                .catch(error => {
                    console.error('Error fetching returns:', error);
                    container.innerHTML = '<p>There was an issue loading your returns. Please try again later.</p>';
                });
        }

        insertStyles();
        setLoadingState();
        fetchReturnsAndSetState();
    })();
</script>