domma-cms 0.84.1 → 0.85.0

package/plugins/shopping-cart/public/lib/money.js

@@ -0,0 +1,105 @@
+/**
+ * Money, in minor units. PURE - shared by the server, the storefront script
+ * and the admin (both load it from public/, which the CMS serves).
+ *
+ * Every amount the Cart stores or adds up is an INTEGER count of the
+ * currency's smallest unit (pence, cents, yen), so £19.99 is 1999 and no
+ * total ever drifts by a floating-point penny. Only the edges convert: what a
+ * person types, what a page shows, and what a payment provider is sent.
+ *
+ * @module shopping-cart/lib/money
+ */
+
+/** The currencies on offer, with how many decimal places each one has. */
+export const CURRENCIES = {
+    GBP: {label: 'Pound sterling', decimals: 2},
+    EUR: {label: 'Euro', decimals: 2},
+    USD: {label: 'US dollar', decimals: 2},
+    CAD: {label: 'Canadian dollar', decimals: 2},
+    AUD: {label: 'Australian dollar', decimals: 2},
+    NZD: {label: 'New Zealand dollar', decimals: 2},
+    CHF: {label: 'Swiss franc', decimals: 2},
+    SEK: {label: 'Swedish krona', decimals: 2},
+    NOK: {label: 'Norwegian krone', decimals: 2},
+    DKK: {label: 'Danish krone', decimals: 2},
+    PLN: {label: 'Polish złoty', decimals: 2},
+    ZAR: {label: 'South African rand', decimals: 2},
+    JPY: {label: 'Japanese yen', decimals: 0}
+};
+
+/** A known currency code, or GBP. */
+export function currencyOf(code) {
+    const c = String(code || '').toUpperCase();
+    return CURRENCIES[c] ? c : 'GBP';
+}
+
+export const decimalsOf = (code) => CURRENCIES[currencyOf(code)].decimals;
+
+/**
+ * Minor units from what a person typed: "19.99", "£1,299.5", 12 -> 1999, 129950, 1200.
+ * Returns null for anything that is not a sensible, non-negative amount.
+ *
+ * @param {string|number} value
+ * @param {string} currency
+ * @returns {number|null}
+ */
+export function toMinor(value, currency = 'GBP') {
+    if (value === null || value === undefined || value === '') return null;
+    const d = decimalsOf(currency);
+    let n;
+    if (typeof value === 'number') n = value;
+    else {
+        const t = String(value).replace(/[^\d.,-]/g, '').replace(/,(?=\d{3}(\D|$))/g, '').replace(',', '.');
+        if (!/^-?\d*\.?\d*$/.test(t) || t === '' || t === '.' || t === '-') return null;
+        n = Number(t);
+    }
+    if (!Number.isFinite(n) || n < 0 || n > 1e9) return null;
+    return Math.round(n * 10 ** d);
+}
+
+/** "19.99" from 1999 - for an input's value, no symbol, no grouping. */
+export function fromMinor(minor, currency = 'GBP') {
+    const d = decimalsOf(currency);
+    const n = Number(minor) || 0;
+    return (n / 10 ** d).toFixed(d);
+}
+
+/**
+ * "£19.99" from 1999. A whole amount drops its pennies when `compact` is set
+ * ("£20" on a product card), never on a total.
+ *
+ * @param {number} minor
+ * @param {string} currency
+ * @param {{compact?: boolean, locale?: string}} [opts]
+ */
+export function formatMoney(minor, currency = 'GBP', {compact = false, locale} = {}) {
+    const code = currencyOf(currency);
+    const d = CURRENCIES[code].decimals;
+    const n = (Number(minor) || 0) / 10 ** d;
+    const whole = compact && Number.isInteger(n);
+    try {
+        return new Intl.NumberFormat(locale || (code === 'GBP' ? 'en-GB' : undefined), {
+            style: 'currency', currency: code,
+            minimumFractionDigits: whole ? 0 : d, maximumFractionDigits: whole ? 0 : d
+        }).format(n);
+    } catch {
+        return `${code} ${n.toFixed(d)}`;
+    }
+}
+
+/** Percentage of an amount, rounded half up to the minor unit. */
+export function percentOf(minor, percent) {
+    return Math.round((Number(minor) || 0) * (Number(percent) || 0) / 100);
+}
+
+/**
+ * The tax held INSIDE a tax-inclusive price: £120 at 20% holds £20.
+ *
+ * @param {number} grossMinor
+ * @param {number} ratePercent
+ */
+export function includedTax(grossMinor, ratePercent) {
+    const r = Number(ratePercent) || 0;
+    if (r <= 0) return 0;
+    return Math.round((Number(grossMinor) || 0) * r / (100 + r));
+}

package/plugins/shopping-cart/public/lib/orders.js

@@ -0,0 +1,122 @@
+/**
+ * Orders. PURE - statuses and what may follow each, cleaning what a shopper
+ * types at checkout, and the countries on offer. The server enforces it; the
+ * admin builds its menus from the same table, so an action it offers is one
+ * the server will take.
+ *
+ * @module shopping-cart/public/lib/orders
+ */
+
+/**
+ * pending   - checkout started, not paid (a provider's page is open, or was abandoned)
+ * awaiting  - the shopper chose to pay offline (bank transfer, on collection)
+ * paid      - money received; stock taken
+ * fulfilled - sent, collected or delivered
+ * cancelled - never paid, and closed
+ * refunded  - paid, then given back
+ */
+export const STATUSES = ['pending', 'awaiting', 'paid', 'fulfilled', 'cancelled', 'refunded'];
+
+export const STATUS_LABEL = {
+    pending: 'Checkout started',
+    awaiting: 'Awaiting payment',
+    paid: 'Paid - to fulfil',
+    fulfilled: 'Fulfilled',
+    cancelled: 'Cancelled',
+    refunded: 'Refunded'
+};
+
+/** For shoppers: their receipt page. */
+export const STATUS_PUBLIC = {
+    pending: 'Waiting for payment',
+    awaiting: 'Waiting for payment',
+    paid: 'Paid - being prepared',
+    fulfilled: 'On its way',
+    cancelled: 'Cancelled',
+    refunded: 'Refunded'
+};
+
+/** A tone for chips: the CSS class suffix. */
+export const STATUS_TONE = {
+    pending: 'muted', awaiting: 'warning', paid: 'primary', fulfilled: 'success', cancelled: 'muted', refunded: 'danger'
+};
+
+/** What may follow each status - from the admin, by hand. Payment itself moves pending/awaiting -> paid. */
+export const NEXT = {
+    pending: ['paid', 'awaiting', 'cancelled'],
+    awaiting: ['paid', 'cancelled'],
+    paid: ['fulfilled', 'refunded'],
+    fulfilled: ['paid', 'refunded'],
+    cancelled: [],
+    refunded: []
+};
+
+export const canMove = (from, to) => (NEXT[from] || []).includes(to);
+
+/** Statuses that count as money in (revenue, stock taken). */
+export const SOLD = new Set(['paid', 'fulfilled']);
+
+/** "#1042". */
+export const orderLabel = (order) => `#${order?.number ?? '-'}`;
+
+const text = (v, max) => String(v ?? '').replace(/[\u0000-\u001f\u007f]/g, ' ').replace(/\s+/g, ' ').trim().slice(0, max);
+
+/** A plausible email: one @, a dot after it, no spaces. */
+export const isEmail = (s) => /^[^\s@<>"]{1,64}@[^\s@<>"]{1,190}\.[a-z]{2,}$/i.test(String(s || ''));
+
+/** The countries a shopper can pick, most likely first. ISO 3166-1 alpha-2. */
+export const COUNTRIES = {
+    GB: 'United Kingdom', IE: 'Ireland', US: 'United States', CA: 'Canada', AU: 'Australia', NZ: 'New Zealand',
+    FR: 'France', DE: 'Germany', ES: 'Spain', IT: 'Italy', NL: 'Netherlands', BE: 'Belgium', LU: 'Luxembourg',
+    PT: 'Portugal', AT: 'Austria', CH: 'Switzerland', DK: 'Denmark', SE: 'Sweden', NO: 'Norway', FI: 'Finland',
+    IS: 'Iceland', PL: 'Poland', CZ: 'Czechia', SK: 'Slovakia', HU: 'Hungary', SI: 'Slovenia', HR: 'Croatia',
+    RO: 'Romania', BG: 'Bulgaria', GR: 'Greece', CY: 'Cyprus', MT: 'Malta', EE: 'Estonia', LV: 'Latvia',
+    LT: 'Lithuania', JE: 'Jersey', GG: 'Guernsey', IM: 'Isle of Man', GI: 'Gibraltar', JP: 'Japan',
+    SG: 'Singapore', HK: 'Hong Kong', AE: 'United Arab Emirates', ZA: 'South Africa', IN: 'India', MX: 'Mexico', BR: 'Brazil'
+};
+
+/**
+ * What a shopper typed at checkout, cleaned. `needsAddress` when anything in
+ * the basket is shipped and the shopper is not collecting.
+ *
+ * @param {object} input - {customer: {name, email, phone}, address: {...}, note}
+ * @param {{needsAddress?: boolean, countries?: string[]}} [opts]
+ * @returns {{customer: object, address: object|null, note: string, errors: Object<string, string>}}
+ */
+export function cleanCheckout(input = {}, {needsAddress = true, countries = null} = {}) {
+    const errors = {};
+    const c = input.customer || {};
+    const customer = {
+        name: text(c.name, 120),
+        email: text(c.email, 200).toLowerCase(),
+        phone: text(c.phone, 40)
+    };
+    if (!customer.name) errors.name = 'Your name, please.';
+    if (!isEmail(customer.email)) errors.email = 'An email address we can send the receipt to.';
+
+    let address = null;
+    if (needsAddress) {
+        const a = input.address || {};
+        address = {
+            line1: text(a.line1, 160),
+            line2: text(a.line2, 160),
+            city: text(a.city, 100),
+            region: text(a.region, 100),
+            postcode: text(a.postcode, 20).toUpperCase(),
+            country: String(a.country || '').toUpperCase().slice(0, 2)
+        };
+        if (!address.line1) errors.line1 = 'The first line of the address.';
+        if (!address.city) errors.city = 'Town or city.';
+        if (!address.postcode && !['IE', 'HK', 'AE'].includes(address.country)) errors.postcode = 'Postcode.';
+        const allowed = countries?.length ? countries : Object.keys(COUNTRIES);
+        if (!allowed.includes(address.country)) errors.country = 'We do not deliver there yet.';
+    }
+    return {customer, address, note: String(input.note ?? '').trim().slice(0, 1000), errors};
+}
+
+/** An address on lines, for a receipt or a packing slip. */
+export function addressLines(a) {
+    if (!a) return [];
+    return [a.line1, a.line2, [a.city, a.region].filter(Boolean).join(', '), a.postcode, COUNTRIES[a.country] || a.country]
+        .filter(Boolean);
+}

package/plugins/shopping-cart/public/lib/products.js

@@ -0,0 +1,235 @@
+/**
+ * Products. PURE - the server cleans every write with it, the admin's editor
+ * checks as you type with the same rules, and the storefront reads stock and
+ * variants through it.
+ *
+ * A product is stored as collection entry data:
+ *
+ *   {name, slug, summary, description, price, compareAt, sku, images[],
+ *    category, tags[], status, featured, position,
+ *    trackStock, stock, optionName, variants[{id, name, price, sku, stock}],
+ *    shippable, weight, taxClass}
+ *
+ * Prices are minor units (see money.js). `variants[].price` null = the
+ * product's price. Stock is only counted when `trackStock` is on; with
+ * variants it is counted per variant, otherwise on the product.
+ *
+ * @module shopping-cart/public/lib/products
+ */
+
+import {toMinor} from './money.js';
+
+export const STATUSES = ['active', 'draft', 'archived'];
+export const STATUS_LABEL = {active: 'On sale', draft: 'Draft', archived: 'Archived'};
+export const TAX_CLASSES = ['standard', 'reduced', 'zero'];
+export const MAX_IMAGES = 12;
+export const MAX_VARIANTS = 60;
+
+/** "Blue Mug (Large)!" -> "blue-mug-large". */
+export function slugify(text) {
+    return String(text || '')
+        .normalize('NFKD').replace(/[̀-ͯ]/g, '')
+        .toLowerCase().replace(/&/g, ' and ')
+        .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '')
+        .slice(0, 80);
+}
+
+const text = (v, max) => String(v ?? '').replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f]/g, '').trim().slice(0, max);
+
+/** A picture address a page may show: site-relative or http(s). */
+export function safeImage(url) {
+    const u = String(url || '').trim();
+    if (!u) return '';
+    if (/^\/(?!\/)[^\s"'<>]*$/.test(u)) return u;
+    if (/^https?:\/\/[^\s"'<>]+$/i.test(u)) return u;
+    return '';
+}
+
+/** An amount field: a number already in minor units, or typed text in major units. */
+function amount(value, currency, {minor = false} = {}) {
+    if (value === null || value === undefined || value === '') return null;
+    if (minor) {
+        const n = Number(value);
+        return Number.isInteger(n) && n >= 0 && n <= 1e11 ? n : NaN;
+    }
+    const m = toMinor(value, currency);
+    return m === null ? NaN : m;
+}
+
+function wholeOrNull(value, {min = 0, max = 1e9} = {}) {
+    if (value === null || value === undefined || value === '') return null;
+    const n = Number(value);
+    return Number.isInteger(n) && n >= min && n <= max ? n : NaN;
+}
+
+const newId = () => Math.random().toString(36).slice(2, 10);
+
+/**
+ * Clean a product as sent by the admin. Amounts arrive in MINOR units
+ * (`minor: true`, the API's contract) or as typed text (the editor's check).
+ *
+ * @param {object} input
+ * @param {{currency?: string, minor?: boolean}} [opts]
+ * @returns {{data: object, errors: Object<string, string>}}
+ */
+export function cleanProduct(input = {}, {currency = 'GBP', minor = true} = {}) {
+    const errors = {};
+    const name = text(input.name, 140);
+    if (!name) errors.name = 'Give the product a name.';
+
+    const slug = slugify(input.slug || name);
+    if (!slug) errors.slug = 'The address needs letters or numbers.';
+
+    const price = amount(input.price, currency, {minor});
+    if (price === null) errors.price = 'Give it a price (0 for free).';
+    else if (Number.isNaN(price)) errors.price = 'Not a price.';
+
+    let compareAt = amount(input.compareAt, currency, {minor});
+    if (Number.isNaN(compareAt)) errors.compareAt = 'Not a price.';
+    else if (compareAt !== null && Number.isInteger(price) && compareAt <= price) compareAt = null;
+
+    const status = STATUSES.includes(input.status) ? input.status : 'draft';
+    const trackStock = Boolean(input.trackStock);
+    const stock = wholeOrNull(input.stock);
+    if (Number.isNaN(stock)) errors.stock = 'A whole number, 0 or more.';
+
+    const images = (Array.isArray(input.images) ? input.images : String(input.images || '').split('\n'))
+        .map(safeImage).filter(Boolean).slice(0, MAX_IMAGES);
+
+    const tags = [...new Set((Array.isArray(input.tags) ? input.tags : String(input.tags || '').split(','))
+        .map(t => text(t, 40).toLowerCase()).filter(Boolean))].slice(0, 20);
+
+    const variants = [];
+    const seen = new Set();
+    for (const [i, v] of (Array.isArray(input.variants) ? input.variants : []).slice(0, MAX_VARIANTS).entries()) {
+        const vName = text(v?.name, 80);
+        if (!vName) { errors[`variant${i}`] = 'Each option needs a name.'; continue; }
+        if (seen.has(vName.toLowerCase())) { errors[`variant${i}`] = `"${vName}" is listed twice.`; continue; }
+        seen.add(vName.toLowerCase());
+        const vPrice = amount(v.price, currency, {minor});
+        const vStock = wholeOrNull(v.stock);
+        if (Number.isNaN(vPrice)) errors[`variant${i}`] = `${vName}: not a price.`;
+        if (Number.isNaN(vStock)) errors[`variant${i}`] = `${vName}: stock is a whole number.`;
+        variants.push({
+            id: /^[a-z0-9]{4,16}$/.test(v.id || '') ? v.id : newId(),
+            name: vName,
+            price: Number.isInteger(vPrice) ? vPrice : null,
+            sku: text(v.sku, 60),
+            stock: Number.isInteger(vStock) ? vStock : null
+        });
+    }
+
+    const weight = wholeOrNull(input.weight, {max: 1e7});
+    if (Number.isNaN(weight)) errors.weight = 'Grams, a whole number.';
+
+    const data = {
+        name,
+        slug,
+        summary: text(input.summary, 300),
+        description: text(input.description, 20000),
+        price: Number.isInteger(price) ? price : 0,
+        compareAt: Number.isInteger(compareAt) ? compareAt : null,
+        sku: text(input.sku, 60),
+        images,
+        category: text(input.category, 60),
+        tags,
+        status,
+        featured: Boolean(input.featured),
+        position: Number.isFinite(Number(input.position)) ? Math.round(Number(input.position)) : 0,
+        trackStock,
+        stock: Number.isInteger(stock) ? stock : (trackStock && !variants.length ? 0 : null),
+        optionName: text(input.optionName, 40) || (variants.length ? 'Option' : ''),
+        variants,
+        shippable: input.shippable === undefined ? true : Boolean(input.shippable),
+        weight: Number.isInteger(weight) ? weight : null,
+        taxClass: TAX_CLASSES.includes(input.taxClass) ? input.taxClass : 'standard'
+    };
+    return {data, errors};
+}
+
+/** A variant of a product, or null. With no variants, the product itself (id ''). */
+export function variantOf(product, variantId = '') {
+    const vs = product?.variants || [];
+    if (!vs.length) return variantId ? null : {id: '', name: '', price: null, sku: product?.sku || '', stock: product?.stock ?? null};
+    return vs.find(v => v.id === variantId) || null;
+}
+
+/** Unit price of a product (or one of its variants), in minor units. */
+export function unitPrice(product, variantId = '') {
+    const v = variantOf(product, variantId);
+    return v && Number.isInteger(v.price) ? v.price : (product?.price || 0);
+}
+
+/**
+ * How many can be bought: Infinity when stock is not counted.
+ *
+ * @param {object} product
+ * @param {string} [variantId]
+ */
+export function available(product, variantId = '') {
+    if (!product?.trackStock) return Infinity;
+    const v = variantOf(product, variantId);
+    if (!v) return 0;
+    const n = product.variants?.length ? v.stock : product.stock;
+    return Number.isInteger(n) && n > 0 ? n : 0;
+}
+
+/** All stock of a product, summed over its variants; null when not counted. */
+export function totalStock(product) {
+    if (!product?.trackStock) return null;
+    if (product.variants?.length) return product.variants.reduce((s, v) => s + (Number(v.stock) || 0), 0);
+    return Number(product.stock) || 0;
+}
+
+/** The lowest and highest price across variants - "From £8" on a card. */
+export function priceRange(product) {
+    const prices = product?.variants?.length
+        ? product.variants.map(v => (Number.isInteger(v.price) ? v.price : product.price))
+        : [product?.price || 0];
+    return {min: Math.min(...prices), max: Math.max(...prices)};
+}
+
+/**
+ * The fields a shopper may see. Never the cost of anything internal: no
+ * position, no SKU-level stock numbers beyond "how many can I buy".
+ *
+ * @param {{id: string, data: object}} entry
+ */
+export function publicProduct(entry) {
+    const p = entry.data || {};
+    const range = priceRange(p);
+    return {
+        id: entry.id,
+        name: p.name,
+        slug: p.slug,
+        summary: p.summary || '',
+        description: p.description || '',
+        price: p.price,
+        compareAt: p.compareAt ?? null,
+        images: p.images || [],
+        category: p.category || '',
+        tags: p.tags || [],
+        featured: Boolean(p.featured),
+        optionName: p.optionName || '',
+        variants: (p.variants || []).map(v => ({
+            id: v.id, name: v.name,
+            price: Number.isInteger(v.price) ? v.price : p.price,
+            available: finite(available(p, v.id))
+        })),
+        available: finite(p.variants?.length ? totalStock(p) ?? Infinity : available(p)),
+        minPrice: range.min,
+        maxPrice: range.max,
+        shippable: p.shippable !== false
+    };
+}
+
+/** JSON has no Infinity: unlimited travels as null. */
+const finite = (n) => (n === Infinity || n === null ? null : n);
+
+/** Sort for a storefront: featured first, then the admin's position, then name. */
+export function byShelf(a, b) {
+    const pa = a.data || a, pb = b.data || b;
+    return (Number(pb.featured) - Number(pa.featured))
+        || ((pa.position || 0) - (pb.position || 0))
+        || String(pa.name).localeCompare(String(pb.name));
+}

package/plugins/shopping-cart/public/samples/candle-2.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f3e3c7"/><stop offset="1" stop-color="#d9b37c"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/><circle cx="640" cy="180" r="220" fill="#fff" opacity=".18"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+<g transform="translate(400 520) scale(1.12) translate(-400 -520)">
+<rect x="270" y="420" width="260" height="360" rx="30" fill="#fbf7ef"/>
+<rect x="270" y="420" width="260" height="360" rx="30" fill="none" stroke="#e7dcc9" stroke-width="6"/>
+<rect x="300" y="540" width="200" height="140" rx="12" fill="#2d2a32"/>
+<text x="400" y="600" text-anchor="middle" font-family="Georgia,serif" font-size="34" fill="#f3e3c7" letter-spacing="4">FIG</text>
+<text x="400" y="645" text-anchor="middle" font-family="Georgia,serif" font-size="20" fill="#d9b37c" letter-spacing="6">&amp; CEDAR</text>
+<ellipse cx="400" cy="420" rx="130" ry="22" fill="#efe6d6"/>
+<path d="M400 420v-50" stroke="#2d2a32" stroke-width="6"/>
+<path d="M400 290c35 40 30 80 0 90c-30-10-35-50 0-90z" fill="#ffb347"/>
+<path d="M400 325c15 20 12 40 0 45c-12-5-15-25 0-45z" fill="#fff3c4"/></g>
+</svg>

package/plugins/shopping-cart/public/samples/candle.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f3e3c7"/><stop offset="1" stop-color="#d9b37c"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+
+<rect x="270" y="420" width="260" height="360" rx="30" fill="#fbf7ef"/>
+<rect x="270" y="420" width="260" height="360" rx="30" fill="none" stroke="#e7dcc9" stroke-width="6"/>
+<rect x="300" y="540" width="200" height="140" rx="12" fill="#2d2a32"/>
+<text x="400" y="600" text-anchor="middle" font-family="Georgia,serif" font-size="34" fill="#f3e3c7" letter-spacing="4">FIG</text>
+<text x="400" y="645" text-anchor="middle" font-family="Georgia,serif" font-size="20" fill="#d9b37c" letter-spacing="6">&amp; CEDAR</text>
+<ellipse cx="400" cy="420" rx="130" ry="22" fill="#efe6d6"/>
+<path d="M400 420v-50" stroke="#2d2a32" stroke-width="6"/>
+<path d="M400 290c35 40 30 80 0 90c-30-10-35-50 0-90z" fill="#ffb347"/>
+<path d="M400 325c15 20 12 40 0 45c-12-5-15-25 0-45z" fill="#fff3c4"/>
+</svg>

package/plugins/shopping-cart/public/samples/mug-2.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f6d8c4"/><stop offset="1" stop-color="#e9a98b"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/><circle cx="640" cy="180" r="220" fill="#fff" opacity=".18"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+<g transform="translate(400 520) scale(1.12) translate(-400 -520)">
+<path d="M560 470c70 0 110 40 110 100s-45 105-120 105" fill="none" stroke="#2f4858" stroke-width="42" stroke-linecap="round"/>
+<path d="M230 380h340v330c0 55-45 95-100 95H330c-55 0-100-40-100-95z" fill="#2f4858"/>
+<path d="M230 380h340v70H230z" fill="#3d5d72"/>
+<ellipse cx="400" cy="380" rx="170" ry="30" fill="#24394a"/>
+<ellipse cx="400" cy="376" rx="150" ry="20" fill="#8b5a3c"/>
+<path d="M270 520c40 10 90 10 130 0s90-10 130 0" fill="none" stroke="#f6d8c4" stroke-width="10" stroke-linecap="round" opacity=".7"/>
+<path d="M350 330c-15-30 15-45 0-80M410 320c-15-30 15-45 0-80M470 330c-15-30 15-45 0-80" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" opacity=".55"/></g>
+</svg>

package/plugins/shopping-cart/public/samples/mug.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f6d8c4"/><stop offset="1" stop-color="#e9a98b"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+
+<path d="M560 470c70 0 110 40 110 100s-45 105-120 105" fill="none" stroke="#2f4858" stroke-width="42" stroke-linecap="round"/>
+<path d="M230 380h340v330c0 55-45 95-100 95H330c-55 0-100-40-100-95z" fill="#2f4858"/>
+<path d="M230 380h340v70H230z" fill="#3d5d72"/>
+<ellipse cx="400" cy="380" rx="170" ry="30" fill="#24394a"/>
+<ellipse cx="400" cy="376" rx="150" ry="20" fill="#8b5a3c"/>
+<path d="M270 520c40 10 90 10 130 0s90-10 130 0" fill="none" stroke="#f6d8c4" stroke-width="10" stroke-linecap="round" opacity=".7"/>
+<path d="M350 330c-15-30 15-45 0-80M410 320c-15-30 15-45 0-80M470 330c-15-30 15-45 0-80" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" opacity=".55"/>
+</svg>

package/plugins/shopping-cart/public/samples/notebook-2.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#d8dcf0"/><stop offset="1" stop-color="#9aa3d6"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/><circle cx="640" cy="180" r="220" fill="#fff" opacity=".18"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+<g transform="translate(400 520) scale(1.12) translate(-400 -520)">
+<g transform="rotate(-6 400 520)">
+<rect x="240" y="250" width="330" height="480" rx="18" fill="#2b2d5c"/>
+<rect x="240" y="250" width="40" height="480" rx="10" fill="#1e2046"/>
+<rect x="545" y="250" width="14" height="480" fill="#f07167"/>
+<rect x="330" y="360" width="190" height="110" rx="8" fill="none" stroke="#c9cdf2" stroke-width="5"/>
+<text x="425" y="425" text-anchor="middle" font-family="Georgia,serif" font-size="30" fill="#e7e9fb" letter-spacing="3">NOTES</text>
+<path d="M565 700l40 60 10-70" fill="#f07167"/>
+</g></g>
+</svg>

package/plugins/shopping-cart/public/samples/notebook.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#d8dcf0"/><stop offset="1" stop-color="#9aa3d6"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+
+<g transform="rotate(-6 400 520)">
+<rect x="240" y="250" width="330" height="480" rx="18" fill="#2b2d5c"/>
+<rect x="240" y="250" width="40" height="480" rx="10" fill="#1e2046"/>
+<rect x="545" y="250" width="14" height="480" fill="#f07167"/>
+<rect x="330" y="360" width="190" height="110" rx="8" fill="none" stroke="#c9cdf2" stroke-width="5"/>
+<text x="425" y="425" text-anchor="middle" font-family="Georgia,serif" font-size="30" fill="#e7e9fb" letter-spacing="3">NOTES</text>
+<path d="M565 700l40 60 10-70" fill="#f07167"/>
+</g>
+</svg>

package/plugins/shopping-cart/public/samples/print-2.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#efe7df"/><stop offset="1" stop-color="#cdbcb0"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/><circle cx="640" cy="180" r="220" fill="#fff" opacity=".18"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+<g transform="translate(400 520) scale(1.12) translate(-400 -520)">
+<rect x="215" y="200" width="370" height="560" fill="#3b3130"/>
+<rect x="245" y="230" width="310" height="500" fill="#fdfaf5"/>
+<rect x="275" y="260" width="250" height="360" fill="#f4d6b8"/>
+<circle cx="450" cy="340" r="42" fill="#e76f51"/>
+<path d="M275 620l80-120 60 70 45-50 65 100z" fill="#2a9d8f"/>
+<path d="M275 620l110-160 140 160z" fill="#264653" opacity=".85"/>
+<text x="400" y="680" text-anchor="middle" font-family="Georgia,serif" font-size="22" fill="#3b3130" letter-spacing="5">DUSK</text></g>
+</svg>

package/plugins/shopping-cart/public/samples/print.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#efe7df"/><stop offset="1" stop-color="#cdbcb0"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+
+<rect x="215" y="200" width="370" height="560" fill="#3b3130"/>
+<rect x="245" y="230" width="310" height="500" fill="#fdfaf5"/>
+<rect x="275" y="260" width="250" height="360" fill="#f4d6b8"/>
+<circle cx="450" cy="340" r="42" fill="#e76f51"/>
+<path d="M275 620l80-120 60 70 45-50 65 100z" fill="#2a9d8f"/>
+<path d="M275 620l110-160 140 160z" fill="#264653" opacity=".85"/>
+<text x="400" y="680" text-anchor="middle" font-family="Georgia,serif" font-size="22" fill="#3b3130" letter-spacing="5">DUSK</text>
+</svg>

package/plugins/shopping-cart/public/samples/tee-2.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#cfe6ea"/><stop offset="1" stop-color="#7fb5bf"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/><circle cx="640" cy="180" r="220" fill="#fff" opacity=".18"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+<g transform="translate(400 520) scale(1.12) translate(-400 -520)">
+<path d="M300 250l-150 80 60 140 70-30v360h340V440l70 30 60-140-150-80c-10 50-50 80-100 80s-90-30-100-80z" fill="#fbfbf8"/>
+<path d="M300 250c10 50 50 80 100 80s90-30 100-80" fill="none" stroke="#dde3e4" stroke-width="10"/>
+<circle cx="400" cy="540" r="70" fill="#f28f6b"/>
+<path d="M330 560h140" stroke="#fbfbf8" stroke-width="10"/>
+<path d="M345 590h110M362 620h76" stroke="#f28f6b" stroke-width="10" stroke-linecap="round"/></g>
+</svg>

package/plugins/shopping-cart/public/samples/tee.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000" width="800" height="1000">
+<defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#cfe6ea"/><stop offset="1" stop-color="#7fb5bf"/></linearGradient>
+<radialGradient id="glow" cx=".3" cy=".2" r=".8"><stop offset="0" stop-color="#fff" stop-opacity=".45"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
+<rect width="800" height="1000" fill="url(#bg)"/><rect width="800" height="1000" fill="url(#glow)"/>
+<ellipse cx="400" cy="800" rx="230" ry="26" fill="#000" opacity=".13"/>
+
+<path d="M300 250l-150 80 60 140 70-30v360h340V440l70 30 60-140-150-80c-10 50-50 80-100 80s-90-30-100-80z" fill="#fbfbf8"/>
+<path d="M300 250c10 50 50 80 100 80s90-30 100-80" fill="none" stroke="#dde3e4" stroke-width="10"/>
+<circle cx="400" cy="540" r="70" fill="#f28f6b"/>
+<path d="M330 560h140" stroke="#fbfbf8" stroke-width="10"/>
+<path d="M345 590h110M362 620h76" stroke="#f28f6b" stroke-width="10" stroke-linecap="round"/>
+</svg>