/* Rivo "JavaScript" field — Reminders drawer (vanilla port of scripts/reminders/src/*) Assumes a `container` variable is provided by the host (Rivo). No dependencies. */ (function () { "use strict"; var root = container.querySelector("[data-lr-root]"); if (!root || root.dataset.lrInit) { return; } root.dataset.lrInit = "1"; var API_URL = "https://lolas-management.jjtpaulir9rbk.eu-west-2.cs.amazonlightsail.com"; var SECTION_URL = "/?section_id=reminders-display"; var FALLBACK_OCCASIONS = ["Birthday", "Anniversary", "Holiday"]; var HIDE_HOST_CONTENT = true; var MIN_YEAR = 1920; var MAX_YEAR = new Date().getFullYear(); var hostContentState = { host: null, restored: true, restore: null }; function hideHostContent() { if (!HIDE_HOST_CONTENT) { return; } var host = document.getElementById("rivo-profile-main"); if (!host) { return; } host.dataset.lrPrevDisplay = host.style.display || ""; host.style.display = "none"; hostContentState.host = host; hostContentState.restored = false; var restore = function () { if (hostContentState.restored) { return; } var h = hostContentState.host; if (h) { h.style.display = h.dataset.lrPrevDisplay || ""; } hostContentState.restored = true; window.removeEventListener("hashchange", restore); }; hostContentState.restore = restore; window.addEventListener("hashchange", restore); } var ICON_CHEVRON = '"; var ICON_CHEVRON_LEFT = '"; var ICON_CHEVRON_LEFT_DARK = '"; var ICON_SPINNER = '"; var state = { view: "loading", // loading | list | create | profile | reminder | error profiles: [], customerId: null, shop: null, occasions: FALLBACK_OCCASIONS.slice(), loading: false, viewingProfileId: null, occasionListOpen: false, apiError: null, errorMessage: "", focusTarget: null, // data-kind of an input that should be refocused after a render triggered by typing create: { name: "", occasion: "", day: "", month: "", year: "", errors: {} }, profileUi: { nameEdit: { active: false, value: "", error: false }, confirmDelete: false }, reminder: null // { profileId, id ("new" | number), occasion, day, month, year, // original: { occasion, day, month, year }, confirmDelete, errors, changed } }; function resetProfileUi() { state.profileUi = { nameEdit: { active: false, value: "", error: false }, confirmDelete: false }; state.occasionListOpen = false; state.focusTarget = null; } /* ---------------- helpers ---------------- */ function esc(v) { if (v === null || v === undefined) { return ""; } return String(v).replace(/[&<>"']/g, function (c) { return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]; }); } function ordinal(n) { var s = ["th", "st", "nd", "rd"]; var v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); } function daysUntil(dateStr) { var now = new Date(); var today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); var d = new Date(dateStr + "T00:00:00"); if (isNaN(d.getTime())) { return 0; } var candidate = new Date(today.getFullYear(), d.getMonth(), d.getDate()); var diff = Math.floor((candidate.getTime() - today.getTime()) / 86400000); if (diff < 0) { candidate = new Date(today.getFullYear() + 1, d.getMonth(), d.getDate()); diff = Math.floor((candidate.getTime() - today.getTime()) / 86400000); } return diff; } function verboseDate(dateStr) { var d = new Date(dateStr + "T00:00:00"); if (isNaN(d.getTime())) { return ""; } try { var fmt = new Intl.DateTimeFormat("en-GB", { weekday: "long", day: "numeric", month: "long" }); var parts = fmt.formatToParts(d); var weekday = "", day = "", month = ""; parts.forEach(function (p) { if (p.type === "weekday") { weekday = p.value; } if (p.type === "day") { day = p.value; } if (p.type === "month") { month = p.value; } }); return weekday + " " + ordinal(parseInt(day, 10)) + " " + month; } catch (e) { return dateStr; } } function occasionDetails(reminder) { var daysLeft = daysUntil(reminder.date); return { id: reminder.id, occasion: reminder.occasion, date: reminder.date, verboseDate: verboseDate(reminder.date), daysLeft: daysLeft }; } function sortByDaysLeft(list) { return list.slice().sort(function (a, b) { return a.daysLeft - b.daysLeft; }); } function findProfile(id) { for (var i = 0; i < state.profiles.length; i++) { if (state.profiles[i].id === id) { return state.profiles[i]; } } return null; } function normaliseProfiles(list) { return (list || []).map(function (p) { return { id: Number(p.id), name: String(p.name), reminders: (p.reminders || []).map(function (r) { return { id: Number(r.id), occasion: String(r.occasion), date: String(r.date) }; }) }; }); } function apiPost(path, body) { return fetch(API_URL + path, { method: "POST", headers: { "Content-Type": "text/plain" }, body: JSON.stringify(body) }).then(function (res) { if (!res.ok) { throw new Error("Request failed: " + res.status); } return res.json(); }); } function spinnerHtml() { return '' + ICON_SPINNER + ""; } /* ---------------- date helpers ---------------- */ function pad2(n) { n = String(n); return n.length < 2 ? ("0" + n) : n; } // Composes day/month/year strings into an ISO YYYY-MM-DD, or returns null if invalid. function composeISO(day, month, year) { if (!day || !month || !year) { return null; } var d = parseInt(day, 10); var m = parseInt(month, 10); var y = parseInt(year, 10); if (isNaN(d) || isNaN(m) || isNaN(y)) { return null; } if (String(year).length !== 4) { return null; } if (d < 1 || d > 31) { return null; } if (m < 1 || m > 12) { return null; } if (y < MIN_YEAR || y > MAX_YEAR) { return null; } var dt = new Date(y, m - 1, d); if (dt.getFullYear() !== y || dt.getMonth() !== m - 1 || dt.getDate() !== d) { return null; } return y + "-" + pad2(m) + "-" + pad2(d); } function splitISO(iso) { var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso || ""); if (!m) { return { day: "", month: "", year: "" }; } return { day: m[3], month: m[2], year: m[1] }; } // Clamps a partially-typed date part while the user types. // day: 1-31, month: 1-12, year: MIN_YEAR-MAX_YEAR (only once 4 digits are present). function clampDatePart(field, raw) { var digits = String(raw).replace(/[^0-9]/g, ""); if (field === "year") { digits = digits.slice(0, 4); if (digits.length === 4) { var y = parseInt(digits, 10); if (y < MIN_YEAR) { digits = String(MIN_YEAR); } if (y > MAX_YEAR) { digits = String(MAX_YEAR); } } return digits; } digits = digits.slice(0, 2); if (!digits.length) { return ""; } var max = field === "day" ? 31 : 12; var n = parseInt(digits, 10); if (n > max) { return String(max); } if (digits.length === 2 && n < 1) { return "01"; } return digits; } function daysToGoLabel(daysLeft) { if (daysLeft === 0) { return "Today"; } if (daysLeft === 1) { return "Tomorrow"; } return daysLeft + " Days to go"; } /* ---------------- data load ---------------- */ function loadData() { state.view = "loading"; state.apiError = null; render(); var controller = (typeof AbortController !== "undefined") ? new AbortController() : null; fetch(SECTION_URL, { credentials: "same-origin", cache: "no-store", signal: controller ? controller.signal : undefined }).then(function (res) { if (!res.ok) { throw new Error("Section fetch failed: " + res.status); } return res.text(); }).then(function (text) { parseSection(text); }).catch(function (err) { console.error("[Reminders] failed to load section", err); state.view = "error"; state.errorMessage = "Couldn't load reminders"; render(); }); return controller; } function parseSection(text) { try { var remMatch = text.match(/const liquidReminders\s*=\s*(\{[\s\S]*?\})\s*;\s*const supplementData/); var occMatch = text.match(/const predefinedOccasions\s*=\s*(\[[\s\S]*?\])\s*;/); if (!remMatch) { throw new Error("liquidReminders not found in section response"); } var liquidReminders = new Function("return (" + remMatch[1] + ")")(); var predefinedOccasions = occMatch ? new Function("return (" + occMatch[1] + ")")() : FALLBACK_OCCASIONS.slice(); var shopMatch = text.match(/shopDomain\s*=\s*"(.*?)"/); var shop = (window.Shopify && window.Shopify.shop) || (shopMatch && shopMatch[1]) || ""; var customerId = liquidReminders && liquidReminders.customer_id; if (!customerId || isNaN(customerId)) { state.view = "error"; state.errorMessage = "Please log in to see your reminders"; render(); return; } state.customerId = customerId; state.shop = shop; state.occasions = (predefinedOccasions && predefinedOccasions.length) ? predefinedOccasions : FALLBACK_OCCASIONS.slice(); state.profiles = normaliseProfiles(liquidReminders.profiles || []); state.view = "list"; render(); } catch (err) { console.error("[Reminders] failed to parse section", err); state.view = "error"; state.errorMessage = "Couldn't load reminders"; render(); } } /* ---------------- shared render helpers ---------------- */ function backButtonHtml(action) { return '"; } // Small text back link: "‹ Reminders" function backLinkHtml(action, label) { return '"; } // Back link on top, big person name underneath (profile + reminder screens) function nameHeader(name, backAction) { return '

' + backLinkHtml(backAction, "Reminders") + '

' + esc(name) + "

"; } // Inline back chevron + title on one line (create screen) function headerRow(title, backAction) { return '

' + backLinkHtml(backAction, title) + "

"; } function centeredHeader(title, subtitle) { return '

' + esc(title) + "

" + (subtitle ? ('

' + esc(subtitle) + "

") : "") + "

"; } function apiErrorBanner() { if (!state.apiError) { return ""; } return '"; } // showDropdown controls whether the attached preset-occasion chevron/list is rendered. // Per the mockups, the preset picker only appears while choosing a *new* occasion // (profile creation, or adding a new reminder) — editing an already-set occasion just // shows a plain text field. function occasionFieldHtml(value, err, showDropdown) { if (!showDropdown) { return '

' + 'Occasion title' + '" + (err ? 'Cannot be empty' : "") + "

"; } var listHtml = state.occasionListOpen ? ("

' + esc(o) + "

") : ""; return '

' + 'Occasion title' + '

' + '" + '" + listHtml + "

" + (err ? 'Cannot be empty' : "") + "

"; } function dateRowHtml(day, month, year, err) { return '

' + '

Day

" + '

Month

" + '

Year

" + "

" + (err ? 'Enter a valid date' : "") + "

"; } function daysPillHtml(iso) { if (!iso) { return ''; } return '

' + esc(daysToGoLabel(daysUntil(iso))) + "

"; } /* ---------------- views ---------------- */ function renderLoading() { return '

Loading your reminders…

'; } function renderError() { return '

' + esc(state.errorMessage || "Something went wrong, please try again.") + "

" + '

'; } function renderEmpty() { return '

' + centeredHeader("My Reminders", "Share the big days with us, and we'll make sure you never miss a moment to celebrate!") + apiErrorBanner() + '

No reminders

' + '" + "

"; } function listRowMiddleHtml(p) { var count = p.reminders.length; if (count === 0) { return 'No reminders'; } if (count === 1) { var o = occasionDetails(p.reminders[0]); return '

' + esc(o.occasion) + '' + '' + esc(daysToGoLabel(o.daysLeft)) + "

"; } return '' + count + " Reminders"; } function renderList() { var rows = state.profiles.map(function (p) { return '

' + '' + esc(p.name) + "" + listRowMiddleHtml(p) + '' + "

"; }).join(""); return '

' + centeredHeader("My Reminders", "Never miss a day with our reminders here. Add and customise them from your reminders page.") + apiErrorBanner() + '

' + rows + "

" + '" + "

"; } function renderCreate() { var iso = composeISO(state.create.day, state.create.month, state.create.year); var canSave = !!(state.create.name && state.create.occasion && iso); var title = state.profiles.length === 0 ? "Create your first Reminder" : "Add a new profile"; var nameErr = !!state.create.errors.name; var occErr = !!state.create.errors.occasion; var dateErr = !!state.create.errors.date; return '"; } function renderNameEditor(nameEdit) { return '

' + '" + (nameEdit.error ? 'Cannot be empty' : "") + '

' + '" + '" + "

"; } function renderProfile() { var profile = findProfile(state.viewingProfileId); if (!profile) { return '

Profile not found

' + '

'; } var ui = state.profileUi; var faded = ui.confirmDelete ? " lr-faded" : ""; var rowsHtml = sortByDaysLeft(profile.reminders.map(occasionDetails)).map(function (o) { return '

' + '

' + '' + esc(o.occasion) + "" + '' + esc(o.verboseDate) + '' + '' + esc(daysToGoLabel(o.daysLeft)) + "" + "

" + '" + "

"; }).join(""); var headerHtml = '

' + backLinkHtml("back-to-list", "Reminders") + (ui.nameEdit.active ? renderNameEditor(ui.nameEdit) : ('

' + esc(profile.name) + "

")) + "

"; var footer; if (ui.confirmDelete) { footer = '

' + '" + '" + "

" + '

Are you sure you want to delete this profile?

'; } else { footer = '" + '

' + '" + '" + "

"; } return '

' + headerHtml + apiErrorBanner() + '

' + rowsHtml + "

" + footer + "

"; } function renderReminder() { var rem = state.reminder; var profile = findProfile(rem.profileId); var name = profile ? profile.name : ""; var iso = composeISO(rem.day, rem.month, rem.year); var isNew = rem.id === "new"; var faded = rem.confirmDelete ? " lr-faded" : ""; var fieldsHtml = '

' + occasionFieldHtml(rem.occasion, !!rem.errors.occasion, rem.id === "new") + dateRowHtml(rem.day, rem.month, rem.year, !!rem.errors.date) + daysPillHtml(iso) + "

"; var footer; if (rem.confirmDelete) { footer = '

Are you sure you want to delete?

' + '

' + '" + '" + "

"; } else if (isNew) { var canCreate = !!(rem.occasion && iso); footer = '"; } else if (rem.changed) { footer = '" + '

"; } else { footer = '' + '

"; } return '"; } /* ---------------- top-level render ---------------- */ function render() { var view = root.querySelector("[data-lr-view]"); if (!view) { return; } switch (state.view) { case "loading": view.innerHTML = renderLoading(); break; case "error": view.innerHTML = renderError(); break; case "list": view.innerHTML = state.profiles.length ? renderList() : renderEmpty(); break; case "create": view.innerHTML = renderCreate(); break; case "profile": view.innerHTML = renderProfile(); break; case "reminder": view.innerHTML = renderReminder(); break; default: view.innerHTML = renderLoading(); } afterRender(); } function afterRender() { if (!state.focusTarget) { return; } var kind = state.focusTarget.kind; state.focusTarget = null; var el = root.querySelector('[data-kind="' + kind + '"]'); if (!el) { return; } el.focus(); try { if (typeof state._focusPos === "number") { el.setSelectionRange(state._focusPos, state._focusPos); } } catch (e) { /* not all inputs support selection ranges */ } } /* ---------------- state transitions ---------------- */ function startCreate() { state.create = { name: "", occasion: "", day: "", month: "", year: "", errors: {} }; state.occasionListOpen = false; state.apiError = null; state.view = "create"; } function computeChanged(rem) { return rem.occasion !== rem.original.occasion || rem.day !== rem.original.day || rem.month !== rem.original.month || rem.year !== rem.original.year; } function startReminder(profileId, id) { var profile = findProfile(profileId); if (!profile) { return; } if (id === "new") { state.reminder = { profileId: profileId, id: "new", occasion: "", day: "", month: "", year: "", original: { occasion: "", day: "", month: "", year: "" }, confirmDelete: false, errors: {}, changed: false }; } else { var r = null; for (var i = 0; i < profile.reminders.length; i++) { if (profile.reminders[i].id === id) { r = profile.reminders[i]; break; } } if (!r) { return; } var parts = splitISO(r.date); state.reminder = { profileId: profileId, id: id, occasion: r.occasion, day: parts.day, month: parts.month, year: parts.year, original: { occasion: r.occasion, day: parts.day, month: parts.month, year: parts.year }, confirmDelete: false, errors: {}, changed: false }; } state.occasionListOpen = false; state.apiError = null; state.view = "reminder"; } function saveReminder() { if (state.loading) { return; } var rem = state.reminder; var profile = findProfile(rem.profileId); if (!profile || !rem) { return; } var iso = composeISO(rem.day, rem.month, rem.year); var errOcc = !rem.occasion; var errDate = !iso; if (errOcc || errDate) { rem.errors = { occasion: errOcc, date: errDate }; render(); return; } var reminders; if (rem.id === "new") { reminders = profile.reminders .map(function (r) { return { id: r.id, occasion: r.occasion, date: r.date }; }) .concat([{ occasion: rem.occasion, date: iso }]); } else { reminders = profile.reminders.map(function (r) { if (r.id === rem.id) { return { id: r.id, occasion: rem.occasion, date: iso }; } return { id: r.id, occasion: r.occasion, date: r.date }; }); } state.loading = true; state.apiError = null; render(); apiPost("/customers/reminders/edit-profile", { shop: state.shop, customerId: state.customerId, profile: { id: profile.id, name: profile.name, reminders: reminders } }).then(function (data) { state.profiles = normaliseProfiles(data.reminders || []); state.loading = false; state.reminder = null; state.view = "profile"; render(); }).catch(function (err) { console.error("[Reminders] save reminder failed", err); state.loading = false; state.apiError = "Something went wrong, please try again."; render(); }); } function deleteReminder() { if (state.loading) { return; } var rem = state.reminder; var profile = findProfile(rem.profileId); if (!profile) { return; } var reminders = profile.reminders .filter(function (r) { return r.id !== rem.id; }) .map(function (r) { return { id: r.id, occasion: r.occasion, date: r.date }; }); state.loading = true; state.apiError = null; render(); apiPost("/customers/reminders/edit-profile", { shop: state.shop, customerId: state.customerId, profile: { id: profile.id, name: profile.name, reminders: reminders } }).then(function (data) { state.profiles = normaliseProfiles(data.reminders || []); state.loading = false; state.reminder = null; state.view = "profile"; render(); }).catch(function (err) { console.error("[Reminders] delete reminder failed", err); state.loading = false; state.apiError = "Something went wrong, please try again."; render(); }); } function saveName() { if (state.loading) { return; } var profile = findProfile(state.viewingProfileId); var nameEdit = state.profileUi.nameEdit; if (!profile || !nameEdit) { return; } if (!nameEdit.value) { nameEdit.error = true; render(); return; } state.loading = true; state.apiError = null; render(); apiPost("/customers/reminders/edit-profile", { shop: state.shop, customerId: state.customerId, profile: { id: profile.id, name: nameEdit.value, reminders: profile.reminders.map(function (r) { return { id: r.id, occasion: r.occasion, date: r.date }; }) } }).then(function (data) { state.profiles = normaliseProfiles(data.reminders || []); state.loading = false; resetProfileUi(); render(); }).catch(function (err) { console.error("[Reminders] save name failed", err); state.loading = false; state.apiError = "Something went wrong, please try again."; render(); }); } function doDeleteProfile() { if (state.loading) { return; } var profileId = state.viewingProfileId; if (!profileId) { return; } state.loading = true; state.apiError = null; render(); apiPost("/customers/reminders/delete-profile", { shop: state.shop, customerId: state.customerId, id: profileId }) .then(function (data) { state.profiles = normaliseProfiles(data.reminders || []); state.loading = false; state.view = "list"; state.viewingProfileId = null; resetProfileUi(); render(); }) .catch(function (err) { console.error("[Reminders] delete profile failed", err); state.loading = false; state.apiError = "Something went wrong, please try again."; render(); }); } function submitCreate() { if (state.loading) { return; } var iso = composeISO(state.create.day, state.create.month, state.create.year); var errors = {}; if (!state.create.name) { errors.name = true; } if (!state.create.occasion) { errors.occasion = true; } if (!iso) { errors.date = true; } if (Object.keys(errors).length) { state.create.errors = errors; render(); return; } state.create.errors = {}; state.loading = true; state.apiError = null; render(); apiPost("/customers/reminders/add-profile", { shop: state.shop, customerId: state.customerId, profile: { name: state.create.name, reminders: [{ occasion: state.create.occasion, date: iso }] } }).then(function (data) { state.profiles = normaliseProfiles(data.reminders || []); state.loading = false; state.view = "list"; render(); }).catch(function (err) { console.error("[Reminders] create profile failed", err); state.loading = false; state.apiError = "Something went wrong, please try again."; render(); }); } /* ---------------- event wiring ---------------- */ root.addEventListener("click", function (e) { var el = e.target.closest("[data-action]"); if (!el || !root.contains(el)) { return; } var action = el.getAttribute("data-action"); switch (action) { case "retry": loadData(); break; case "view-profile": state.viewingProfileId = Number(el.getAttribute("data-id")); state.apiError = null; state.view = "profile"; resetProfileUi(); render(); break; case "back-to-list": state.apiError = null; state.view = "list"; state.viewingProfileId = null; state.reminder = null; resetProfileUi(); render(); break; case "back-to-profile": state.apiError = null; state.reminder = null; state.view = "profile"; render(); break; case "add-new": startCreate(); render(); break; case "name-edit": { if (state.loading) { break; } var profileForName = findProfile(state.viewingProfileId); if (!profileForName) { break; } state.profileUi.nameEdit = { active: true, value: profileForName.name, error: false }; render(); break; } case "name-save": saveName(); break; case "name-cancel": state.profileUi.nameEdit = { active: false, value: "", error: false }; render(); break; case "add-reminder": startReminder(state.viewingProfileId, "new"); render(); break; case "edit-reminder": startReminder(state.viewingProfileId, Number(el.getAttribute("data-id"))); render(); break; case "delete-reminder-ask": state.reminder.confirmDelete = true; render(); break; case "cancel-delete-reminder": state.reminder.confirmDelete = false; render(); break; case "confirm-delete-reminder": deleteReminder(); break; case "cancel-reminder-edit": startReminder(state.reminder.profileId, state.reminder.id); render(); break; case "remove-profile": state.profileUi.confirmDelete = true; render(); break; case "cancel-delete-profile": state.profileUi.confirmDelete = false; render(); break; case "confirm-delete-profile": doDeleteProfile(); break; case "toggle-occasions": { state.occasionListOpen = !state.occasionListOpen; render(); var input = root.querySelector('[data-kind="form-occasion"]'); if (input) { input.focus(); } break; } case "pick-occasion": { var val = el.getAttribute("data-value"); if (state.view === "create") { state.create.occasion = val; delete state.create.errors.occasion; } else if (state.view === "reminder") { state.reminder.occasion = val; state.reminder.errors.occasion = false; state.reminder.changed = computeChanged(state.reminder); } state.occasionListOpen = false; render(); break; } default: break; } }); root.addEventListener("input", function (e) { var t = e.target; var kind = t.getAttribute && t.getAttribute("data-kind"); if (!kind) { return; } switch (kind) { case "form-name": state.create.name = t.value; delete state.create.errors.name; t.classList.remove("error"); updatePrimaryButtonDisabled(); break; case "form-occasion": if (state.view === "create") { state.create.occasion = t.value; delete state.create.errors.occasion; t.classList.remove("error"); updatePrimaryButtonDisabled(); } else if (state.view === "reminder") { state.reminder.occasion = t.value; state.reminder.errors.occasion = false; t.classList.remove("error"); reRenderIfChangedFlips("form-occasion", t.selectionStart); } break; case "form-day": case "form-month": case "form-year": { var bucket = (state.view === "create") ? state.create : state.reminder; var field = kind === "form-day" ? "day" : (kind === "form-month" ? "month" : "year"); bucket[field] = clampDatePart(field, t.value); if (bucket[field] !== t.value) { t.value = bucket[field]; } if (state.view === "create") { delete state.create.errors.date; } else if (state.view === "reminder") { state.reminder.errors.date = false; } updateDaysPill(bucket); if (state.view === "reminder") { reRenderIfChangedFlips(kind, t.selectionStart); } else { updatePrimaryButtonDisabled(); } break; } case "profile-name-input": state.profileUi.nameEdit.value = t.value; state.profileUi.nameEdit.error = false; t.classList.remove("error"); break; default: break; } }); function updateDaysPill(bucket) { var iso = composeISO(bucket.day, bucket.month, bucket.year); var pill = root.querySelector("[data-days-pill]"); if (!pill) { return; } if (iso) { pill.hidden = false; pill.textContent = daysToGoLabel(daysUntil(iso)); } else { pill.hidden = true; pill.textContent = ""; } } function updatePrimaryButtonDisabled() { var btn = root.querySelector("[data-primary-btn]"); if (!btn) { return; } if (state.view === "create") { var iso = composeISO(state.create.day, state.create.month, state.create.year); var canSave = !!(state.create.name && state.create.occasion && iso); btn.disabled = !canSave || state.loading; } else if (state.view === "reminder" && state.reminder.id === "new") { var iso2 = composeISO(state.reminder.day, state.reminder.month, state.reminder.year); var canCreate = !!(state.reminder.occasion && iso2); btn.disabled = !canCreate || state.loading; } } // For the reminder edit view, the primary button + the Save/Cancel-vs-Delete link only // need a structural change when the "changed" boolean flips; otherwise we do a fully // targeted DOM update so the caret position in the field being typed into is preserved. function reRenderIfChangedFlips(kindToRefocus, caretPos) { var rem = state.reminder; if (rem.id === "new") { updateDaysPill(rem); updatePrimaryButtonDisabled(); return; } var wasChanged = rem.changed; rem.changed = computeChanged(rem); if (rem.changed === wasChanged) { updateDaysPill(rem); return; } state.focusTarget = { kind: kindToRefocus }; state._focusPos = caretPos; render(); } root.addEventListener("keydown", function (e) { if (e.key !== "Enter" && e.key !== " " && e.key !== "Spacebar") { return; } var el = e.target.closest('[role="button"][data-action]'); if (!el || !root.contains(el)) { return; } if (e.target.tagName === "INPUT") { return; } e.preventDefault(); el.click(); }); root.addEventListener("submit", function (e) { var form = e.target; if (!(form.matches && form.matches("[data-reminder-form]"))) { return; } e.preventDefault(); if (state.view === "create") { submitCreate(); } else if (state.view === "reminder") { saveReminder(); } }); var outsideClickHandler = function (e) { if (!document.body.contains(root)) { document.removeEventListener("click", outsideClickHandler, true); if (hostContentState.restore) { hostContentState.restore(); } return; } if (!state.occasionListOpen) { return; } var selectWrap = root.querySelector(".lr-select"); if (selectWrap && !selectWrap.contains(e.target)) { state.occasionListOpen = false; render(); } }; document.addEventListener("click", outsideClickHandler, true); hideHostContent(); loadData(); })();

Your Basket

title

Enter your postcode

Enjoy our full range

Delivery on selected favourites

We're not in your area just yet

Lola's Palette Knife

ENTER YOUR POSTCODE

DELIVERY AND COLLECTION

LOLA'S DELIVERY

Courier DELIVERY

Store Collection

View our nationwide collection.

Sorry! Lola's doesn't currently service your postcode.

Lola's Delivery

Courier Delivery

Store Collection

Option: Merchandise

Would you like to remove any items?

Read Reviews

No Photo Uploaded!

We Think You'll Like

Lola's Palette Knife