From 22a2914d3e6339e3eab78ee85916e2cc3350ad35 Mon Sep 17 00:00:00 2001 From: hppanpaliya Date: Sun, 5 Jan 2025 19:51:11 -0500 Subject: [PATCH] Add FAQ page with troubleshooting guides --- .github/workflows/release.yml | 3 + CHANGELOG.md | 9 ++ faq/faq.css | 172 ++++++++++++++++++++++++ faq/faq.html | 192 +++++++++++++++++++++++++++ faq/faq.js | 90 +++++++++++++ manifest.json | 11 +- popup.css | 238 ++++++++++++++++++++++++++++++++++ popup.html | 221 ++----------------------------- popup.js | 7 + 9 files changed, 730 insertions(+), 213 deletions(-) create mode 100644 faq/faq.css create mode 100644 faq/faq.html create mode 100644 faq/faq.js create mode 100644 popup.css diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index abc6449..283e467 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -31,12 +31,15 @@ jobs: # Copy files to maintain structure cp -r _locales temp/Walmart-Invoice-Exporter/ cp -r images temp/Walmart-Invoice-Exporter/ + cp -r faq temp/Walmart-Invoice-Exporter/ cp background.js temp/Walmart-Invoice-Exporter/ cp content.js temp/Walmart-Invoice-Exporter/ cp exceljs.bare.min.js temp/Walmart-Invoice-Exporter/ cp manifest.json temp/Walmart-Invoice-Exporter/ cp popup.html temp/Walmart-Invoice-Exporter/ cp popup.js temp/Walmart-Invoice-Exporter/ + cp popup.css temp/Walmart-Invoice-Exporter/ + # Create ZIP from the temp directory cd temp diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e3540a..7b07f42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,14 @@ # Changelog +## [2.4] - January 5, 2025 + +- **Enhancement:** +Feature: Added comprehensive FAQ page with troubleshooting guides + - Step-by-step instructions for single and batch downloads + - Chrome settings configuration guide for bulk downloads + - Common issues and solutions + - Guide for merging multiple Excel files + ## [2.3] - December 19, 2024 - **Fixed:** Resolved an issue with failed invoice downloads for new in-store orders. diff --git a/faq/faq.css b/faq/faq.css new file mode 100644 index 0000000..34e3c75 --- /dev/null +++ b/faq/faq.css @@ -0,0 +1,172 @@ +:root { + --primary: #0071dc; + --danger: #e41e31; + --success: #2ecc71; + --background: #f8f9fa; + --border: #e5e7eb; + --text: #1a1a1a; + --text-secondary: #666; +} + +body { + width: 100%; + max-width: 800px; + margin: 0 auto; + padding: 20px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + color: var(--text); + background: white; + line-height: 1.6; +} + +.header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid var(--border); +} + +.header h1 { + font-size: 24px; + font-weight: 600; + color: var(--text); + margin: 0; +} + +.faq-section { + margin-bottom: 32px; +} + +.faq-item { + background: var(--background); + border: 1px solid var(--border); + border-radius: 8px; + margin-bottom: 16px; + overflow: hidden; +} + +.faq-question { + padding: 16px; + font-weight: 500; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + user-select: none; +} + +.faq-question:hover { + background: rgba(0, 0, 0, 0.02); +} + +.faq-answer { + padding: 0 16px; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out, padding 0.3s ease-out; +} + +.faq-answer.active { + padding: 16px; + max-height: 900px; + border-top: 1px solid var(--border); +} + +.faq-answer img { + max-width: 100%; + border: 1px solid var(--border); + border-radius: 4px; + margin: 8px 0; +} + +.arrow { + transition: transform 0.3s ease; +} + +.arrow.active { + transform: rotate(180deg); +} + +.step { + margin: 12px 0; + padding-left: 24px; + position: relative; +} + + + +.note { + background: #fff3cd; + border: 1px solid #ffeeba; + color: #856404; + padding: 12px; + border-radius: 4px; + margin: 12px 0; +} + +/* Add to your existing CSS */ +.copy-link-container { + display: flex; + align-items: center; + gap: 8px; + background: #f5f5f5; + padding: 8px; + border-radius: 4px; + margin: 8px 0; +} + +.copy-link { + flex: 1; + user-select: all; + font-family: monospace; + font-size: 13px; + overflow-x: auto; + white-space: nowrap; + padding: 4px; +} + +.copy-button { + background: transparent; + border: none; + cursor: pointer; + padding: 4px; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-secondary); + transition: color 0.2s; +} + +.copy-button:hover { + color: var(--primary); +} + +.toast { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + background: #333; + color: white; + padding: 12px 24px; + border-radius: 4px; + font-size: 14px; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, visibility 0.3s; + z-index: 1000; + display: flex; + align-items: center; + gap: 8px; +} + +.toast.show { + opacity: 1; + visibility: visible; +} + +.toast svg { + stroke: #4caf50; +} \ No newline at end of file diff --git a/faq/faq.html b/faq/faq.html new file mode 100644 index 0000000..bd63d09 --- /dev/null +++ b/faq/faq.html @@ -0,0 +1,192 @@ + + + + FAQ - Walmart Invoice Exporter + + + + +
+ + + + + +

Frequently Asked Questions

+
+ +
+
+
+ How to Use the Extension + + + +
+
+

Single Order Download:

+
    +
  1. Navigate to a specific Walmart order page
    2. +
  2. Click the extension icon
    3. +
  3. Click "Download Invoice"
    4. +
+ +

Batch Download:

+
    +
  1. Go to your Walmart order history page (walmart.com/orders)
    2. +
  2. Click the extension icon
    3. +
  3. Set the number of pages to crawl (0 = unlimited)
    4. +
  4. Click "Start Collection"
    5. +
  5. Wait for the order numbers to load
    6. +
  6. Select the orders you want to download
    7. +
  7. Click "Download Selected Orders"
    8. +
  8. Wait for the download to complete
    9. +
+ +
+ Note: +
    +
  1. Before downloading multiple orders, make sure you've configured the Chrome settings as described in "Required Chrome Settings for Bulk Downloads" section below.
    2. +
  2. Batch download may take a few minutes depending on the number of orders selected.
    3. +
  3. Do not close the popup or change the window while using the extension. This will stop the process and you'll have to restart from the beginning.
    4. +
+
+
+
+ +
+
+ Required Chrome Settings for Bulk Downloads + + + +
+
+

1. Configure Download Settings:

+
    +
  1. Open Chrome Settings (three dots menu → Settings)
    2. +
  2. Click on "Downloads" in the left sidebar
    3. +
  3. Turn OFF "Ask where to save each file before downloading"
    4. +
  4. Turn OFF "Show downloads when they're done"
    5. +
+ +

2. Enable Automatic Downloads:

+
    +
  1. +
    + chrome://settings/content/siteDetails?site=https%3A%2F%2Fwww.walmart.com + +
    +
    2. +
  2. Open a new Chrome tab and paste the copied link
    3. +
  3. Find "Automatic downloads" option
    4. +
  4. Set it to "Allow" (instead of Ask or Block)
    5. +
+ +

Alternative Method: (if above link doesn't work)

+
    +
  1. +
    + chrome://settings/content/automaticDownloads + +
    +
    2. +
  2. Open a new Chrome tab and paste the copied link
    3. +
  3. Under "Allowed to automatically download multiple files", click Add
    4. +
  4. Enter "[*.]walmart.com" and click Add
    5. +
+ +
+ Important: All these settings are required for bulk downloads to work properly. Make sure to add walmart.com under "Allowed to automatically download multiple files" and NOT under "Not allowed to automatically download multiple files" +
+ +
+ Note: Chrome doesn't allow direct clicking of these links. Please copy and paste them manually into a new tab. +
+
+
+ +
+
+ Download Issues & Tips + + + +
+
+

Before downloading multiple orders, make sure you've configured the Chrome settings as described in "Required Chrome Settings for Bulk Downloads" section above.

+ +
+ Important: Do not close the popup or change the window while using the extension. This will stop the process and you'll have to restart from the beginning. +
+ +

If you're experiencing download issues, it could be due to:

+ +
    +
  • Slow internet connection - try downloading fewer orders at once
    • +
  • Order age - very old orders might take longer to load
    • +
  • Browser resources - try closing other tabs and windows
    • +
+ +
+ Recommendation: For better reliability, try downloading 5-10 orders at a time instead of selecting all orders at once. +
+ +
+ Important: Most download issues are solved by correctly configuring Chrome settings. Please double-check the "Required Chrome Settings for Bulk Downloads" section if you're having problems. +
+
+
+ +
+
+ How to Merge Multiple Excel Files? + + + +
+
+

To merge multiple Excel files exported from this extension:

+ +
    +
  1. Visit https://hppanpaliya.github.io/excel-merger/
    2. +
  2. Upload your exported Excel files
    3. +
  3. Download the merged file
    4. +
+ +
+ Note: This tool is specifically designed to work with Excel files exported from this extension. +
+
+
+ +
+
+ Need Help? + + + +
+
+

If you're still experiencing issues or have questions, feel free to reach out for support:

+ +
+ Contact: harshal.hpp@gmail.com +
+
+
+
+ + + + \ No newline at end of file diff --git a/faq/faq.js b/faq/faq.js new file mode 100644 index 0000000..9fc6a2f --- /dev/null +++ b/faq/faq.js @@ -0,0 +1,90 @@ +// faq.js +document.addEventListener('DOMContentLoaded', function() { + document.querySelectorAll('.faq-question').forEach(question => { + question.addEventListener('click', () => { + const answer = question.nextElementSibling; + const arrow = question.querySelector('.arrow'); + + // Toggle current item + answer.classList.toggle('active'); + arrow.classList.toggle('active'); + + // Close other items + document.querySelectorAll('.faq-answer').forEach(otherAnswer => { + if (otherAnswer !== answer && otherAnswer.classList.contains('active')) { + otherAnswer.classList.remove('active'); + otherAnswer.previousElementSibling.querySelector('.arrow').classList.remove('active'); + } + }); + }); + }); +}); + +// Create toast element +const toastContainer = document.createElement('div'); +toastContainer.className = 'toast'; +toastContainer.innerHTML = ` + + + + Link copied to clipboard! +`; +document.body.appendChild(toastContainer); + +// Handle copy functionality +document.querySelectorAll('.copy-button').forEach(button => { + button.addEventListener('click', async () => { + const linkContainer = button.parentElement; + const linkElement = linkContainer.querySelector('.copy-link'); + const linkText = linkElement.dataset.link; + + try { + await navigator.clipboard.writeText(linkText); + + // Show toast + toastContainer.classList.add('show'); + + // Hide toast after 2 seconds + setTimeout(() => { + toastContainer.classList.remove('show'); + }, 2000); + + // Visual feedback on button + button.style.color = 'var(--success)'; + setTimeout(() => { + button.style.color = 'var(--text-secondary)'; + }, 1000); + + } catch (err) { + console.error('Failed to copy text: ', err); + toastContainer.innerHTML = ` + + + + + + Failed to copy link + `; + toastContainer.classList.add('show'); + setTimeout(() => { + toastContainer.classList.remove('show'); + }, 2000); + } + }); +}); + +// Also allow clicking the code element itself +document.querySelectorAll('.copy-link').forEach(link => { + link.addEventListener('click', async () => { + const linkText = link.dataset.link; + try { + await navigator.clipboard.writeText(linkText); + toastContainer.classList.add('show'); + setTimeout(() => { + toastContainer.classList.remove('show'); + }, 2000); + } catch (err) { + console.error('Failed to copy text: ', err); + } + }); +}); \ No newline at end of file diff --git a/manifest.json b/manifest.json index e592557..1c9daa3 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Walmart Invoice Exporter", - "version": "2.3", + "version": "2.4", "description": "Download Walmart order details in xlsx format", "permissions": ["activeTab"], "host_permissions": ["https://www.walmart.com/*"], @@ -29,5 +29,12 @@ "48": "images/icon48.png", "128": "images/icon128.png" }, - "default_locale": "en" + "default_locale": "en", + + "web_accessible_resources": [{ + "resources": ["faq.html","faq.js" + ], + "matches": ["https://www.walmart.com/*"] + }] + } diff --git a/popup.css b/popup.css new file mode 100644 index 0000000..1b1085f --- /dev/null +++ b/popup.css @@ -0,0 +1,238 @@ +:root { + --primary: #0071dc; + --danger: #e41e31; + --success: #2ecc71; + --background: #f8f9fa; + --border: #e5e7eb; + --text: #1a1a1a; + --text-secondary: #666; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 400px; + padding: 10px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + color: var(--text); + background: white; +} + +.header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 10px; +} + +.header h1 { + font-size: 16px; + font-weight: 600; + color: var(--text); +} + +.card { + background: var(--background); + border: 1px solid var(--border); + border-radius: 8px; + padding: 16px; + margin-bottom: 16px; +} + +.input-group { + margin-bottom: 16px; +} + +.input-group label { + display: block; + margin-bottom: 8px; + font-size: 12px; + color: var(--text-secondary); +} + +.input-group input { + width: 80px; + padding: 8px; + border: 1px solid var(--border); + border-radius: 6px; + font-size: 12px; +} + +.input-group input:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 2px rgba(0, 113, 220, 0.1); +} + +.button-group { + display: flex; + gap: 8px; +} + +.btn { + padding: 8px 16px; + border: none; + border-radius: 6px; + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + gap: 6px; +} + +.btn-primary { + background: var(--primary); + color: white; +} + +.btn-primary:hover { + background: #005bb0; +} + +.btn-danger { + background: var(--danger); + color: white; +} + +.btn-danger:hover { + background: #c91829; +} + +.btn-success { + background: var(--success); + color: white; + width: 100%; + justify-content: center; + margin-top: 16px; +} + +.btn-success:hover { + background: #27ae60; +} + +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +#progress { + font-size: 12px; + color: var(--text-secondary); + margin: 12px 0; + padding: 12px; + background: var(--background); + border-radius: 6px; + border: 1px solid var(--border); +} + +.checkbox-container { + padding: 8px 0; + display: flex; + align-items: center; + gap: 8px; +} + +.checkbox-container input[type="checkbox"] { + width: 14px; + height: 14px; + cursor: pointer; +} + +.checkbox-container label { + font-size: 12px; + cursor: pointer; +} + +#orderNumbersContainer { + max-height: 450px; + overflow-y: auto; + padding-right: 8px; +} + +#orderNumbersContainer h3 { + font-size: 14px; + margin-bottom: 8px; + color: var(--text); +} + +/* Custom scrollbar */ +#orderNumbersContainer::-webkit-scrollbar { + width: 4px; +} + +#orderNumbersContainer::-webkit-scrollbar-track { + background: var(--background); + border-radius: 4px; +} + +#orderNumbersContainer::-webkit-scrollbar-thumb { + background: #ccc; + border-radius: 4px; +} + +#orderNumbersContainer::-webkit-scrollbar-thumb:hover { + background: #999; +} + +#downloadProgress { + font-size: 12px; + color: var(--text-secondary); + margin: 12px 0; + padding: 12px; + background: var(--background); + border-radius: 6px; + border: 1px solid var(--border); +} + +.loading-spinner { + display: inline-block; + width: 14px; + height: 14px; + border: 2px solid #ffffff; + border-radius: 50%; + border-top-color: transparent; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} +.faq-button { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 12px; + background-color: var(--background); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text); + font-size: 12px; + font-weight: 500; + text-decoration: none; + transition: all 0.2s ease; + margin-left: auto; + cursor: pointer; +} + +.faq-button:hover { + background-color: var(--primary); + border-color: var(--primary); + color: white; +} + +.faq-button:hover svg { + stroke: white; +} + +.faq-button svg { + stroke: var(--text); + transition: stroke 0.2s ease; +} \ No newline at end of file diff --git a/popup.html b/popup.html index 4a8bafb..b9c0307 100644 --- a/popup.html +++ b/popup.html @@ -3,224 +3,23 @@ Walmart Invoice Exporter - +
- +

Walmart Invoice Exporter

+
diff --git a/popup.js b/popup.js index dfc53fa..cdb0662 100644 --- a/popup.js +++ b/popup.js @@ -10,6 +10,13 @@ document.addEventListener("DOMContentLoaded", function () { const pageLimitInput = document.getElementById("pageLimit"); progressElement.style.display = "none"; + document.getElementById('faqButton').addEventListener('click', function(e) { + e.preventDefault(); + chrome.tabs.create({ + url: chrome.runtime.getURL('faq/faq.html') + }); +}); + // Add loading spinner function function setButtonLoading(button, isLoading) { const btnText = button.querySelector(".btn-text");