|
| 1 | +// ENgrid component: CustomPremium |
| 2 | +// Filters premium gifts based on window.EngridPageOptions.CustomPremium configuration |
| 3 | +// Rules: |
| 4 | +// - Config shape: window.EngridPageOptions.CustomPremium[frequency][productId] = minimumAmount |
| 5 | +// - On frequency or amount change, wait 500ms (allow EN to re-render), then: |
| 6 | +// - Show only gifts whose minimumAmount <= current amount; hide others |
| 7 | +// - If none visible, hide entire .en__component--premiumgiftblock |
| 8 | +// - If current selection becomes invalid, select default; if default not visible, select "No Premium" and clear transaction.selprodvariantid |
| 9 | +// - Run once 500ms after page load |
| 10 | +// - Add EnForm onSubmit hook to clear transaction.selprodvariantid when no visible premium items |
| 11 | +import { ENGrid, DonationAmount, DonationFrequency, EnForm, EngridLogger, } from "."; |
| 12 | +export class CustomPremium { |
| 13 | + constructor() { |
| 14 | + this.logger = new EngridLogger("CustomPremium", "teal", "white", "🧩"); |
| 15 | + this._amount = DonationAmount.getInstance(); |
| 16 | + this._frequency = DonationFrequency.getInstance(); |
| 17 | + this._enForm = EnForm.getInstance(); |
| 18 | + this.stylesInjected = false; |
| 19 | + this.pendingFrequencyChange = false; |
| 20 | + if (!this.shouldRun()) |
| 21 | + return; |
| 22 | + this.injectStyles(); |
| 23 | + // Initial run: execute once after 500ms |
| 24 | + window.setTimeout(() => this.run(), 500); |
| 25 | + // On changes, schedule processing and fade out immediately |
| 26 | + this._amount.onAmountChange.subscribe(() => this.scheduleRun()); |
| 27 | + this._frequency.onFrequencyChange.subscribe(() => { |
| 28 | + this.pendingFrequencyChange = true; |
| 29 | + this.scheduleRun(); |
| 30 | + }); |
| 31 | + // Clear hidden variant field on submit if there are no visible premium items |
| 32 | + this._enForm.onSubmit.subscribe(() => { |
| 33 | + if (!this.hasVisiblePremiumItems()) { |
| 34 | + this.clearVariantField(); |
| 35 | + } |
| 36 | + }); |
| 37 | + } |
| 38 | + shouldRun() { |
| 39 | + const isPremiumPage = "pageJson" in window && |
| 40 | + "pageType" in window.pageJson && |
| 41 | + window.pageJson.pageType === "premiumgift"; |
| 42 | + const hasConfig = !!ENGrid.getOption("CustomPremium"); |
| 43 | + return isPremiumPage && hasConfig; |
| 44 | + } |
| 45 | + get config() { |
| 46 | + const cfg = ENGrid.getOption("CustomPremium"); |
| 47 | + return cfg || null; |
| 48 | + } |
| 49 | + get premiumContainer() { |
| 50 | + return document.querySelector(".en__component--premiumgiftblock"); |
| 51 | + } |
| 52 | + get giftItems() { |
| 53 | + return Array.from(document.querySelectorAll(".en__pg")); |
| 54 | + } |
| 55 | + getFrequencyConfig(frequency) { |
| 56 | + const customPremiumConfig = this.config; |
| 57 | + if (!customPremiumConfig) |
| 58 | + return null; |
| 59 | + const frequencyConfig = customPremiumConfig[frequency]; |
| 60 | + if (frequencyConfig && typeof frequencyConfig === "object") |
| 61 | + return frequencyConfig; |
| 62 | + return null; |
| 63 | + } |
| 64 | + getProductsMap(frequency) { |
| 65 | + const frequencyConfig = this.getFrequencyConfig(frequency); |
| 66 | + const productsMap = {}; |
| 67 | + if (!frequencyConfig) |
| 68 | + return productsMap; |
| 69 | + // If explicit products object exists, use it |
| 70 | + if (frequencyConfig.products && |
| 71 | + typeof frequencyConfig.products === "object") { |
| 72 | + Object.entries(frequencyConfig.products).forEach(([productId, min]) => { |
| 73 | + const id = String(productId); |
| 74 | + const minAmount = Number(min); |
| 75 | + if (!isNaN(minAmount)) |
| 76 | + productsMap[id] = minAmount; |
| 77 | + }); |
| 78 | + return productsMap; |
| 79 | + } |
| 80 | + // Otherwise, treat own numeric-value keys as products, ignore 'default' |
| 81 | + Object.entries(frequencyConfig).forEach(([key, value]) => { |
| 82 | + if (key === "default") |
| 83 | + return; |
| 84 | + const minAmount = Number(value); |
| 85 | + if (!isNaN(minAmount)) |
| 86 | + productsMap[String(key)] = minAmount; |
| 87 | + }); |
| 88 | + return productsMap; |
| 89 | + } |
| 90 | + getConfiguredDefaultPid(frequency) { |
| 91 | + const frequencyConfig = this.getFrequencyConfig(frequency); |
| 92 | + if (!frequencyConfig) |
| 93 | + return null; |
| 94 | + const defaultValue = frequencyConfig.default; |
| 95 | + if (defaultValue === undefined || defaultValue === null) |
| 96 | + return "0"; // not set => No Premium by spec |
| 97 | + const id = String(defaultValue); |
| 98 | + return id; |
| 99 | + } |
| 100 | + injectStyles() { |
| 101 | + if (this.stylesInjected) |
| 102 | + return; |
| 103 | + const id = "engrid-custom-premium-style"; |
| 104 | + if (document.getElementById(id)) { |
| 105 | + this.stylesInjected = true; |
| 106 | + return; |
| 107 | + } |
| 108 | + const style = document.createElement("style"); |
| 109 | + style.id = id; |
| 110 | + style.innerHTML = ` |
| 111 | + .en__component--premiumgiftblock { transition: opacity 200ms ease-in-out; } |
| 112 | + .en__component--premiumgiftblock.engrid-premium-processing { opacity: 0; pointer-events: none; } |
| 113 | + .en__component--premiumgiftblock.engrid-premium-hidden { display: none !important; } |
| 114 | + .en__component--premiumgiftblock.engrid-premium-ready { opacity: 1; } |
| 115 | + `; |
| 116 | + document.head.appendChild(style); |
| 117 | + this.stylesInjected = true; |
| 118 | + } |
| 119 | + startProcessingVisual() { |
| 120 | + const container = this.premiumContainer; |
| 121 | + if (container) { |
| 122 | + container.classList.add("engrid-premium-processing"); |
| 123 | + container.classList.remove("engrid-premium-ready"); |
| 124 | + } |
| 125 | + } |
| 126 | + endProcessingVisual(hasVisible) { |
| 127 | + const container = this.premiumContainer; |
| 128 | + if (!container) |
| 129 | + return; |
| 130 | + container.classList.remove("engrid-premium-processing"); |
| 131 | + if (hasVisible) { |
| 132 | + container.classList.remove("engrid-premium-hidden"); |
| 133 | + container.classList.add("engrid-premium-ready"); |
| 134 | + } |
| 135 | + else { |
| 136 | + container.classList.add("engrid-premium-hidden"); |
| 137 | + container.classList.remove("engrid-premium-ready"); |
| 138 | + } |
| 139 | + } |
| 140 | + scheduleRun() { |
| 141 | + // Immediately fade out while we wait for EN to re-render |
| 142 | + this.startProcessingVisual(); |
| 143 | + if (this.debounceTimer) |
| 144 | + window.clearTimeout(this.debounceTimer); |
| 145 | + this.debounceTimer = window.setTimeout(() => this.run(), 500); |
| 146 | + } |
| 147 | + getCurrentFreq() { |
| 148 | + return (this._frequency.frequency || "onetime").toLowerCase(); |
| 149 | + } |
| 150 | + getCurrentAmount() { |
| 151 | + return this._amount.amount || 0; |
| 152 | + } |
| 153 | + getAllowedProductIds(freq, amount) { |
| 154 | + const cfg = this.config; |
| 155 | + const allowed = new Set(); |
| 156 | + if (!cfg) |
| 157 | + return allowed; |
| 158 | + const products = this.getProductsMap(freq); |
| 159 | + Object.keys(products).forEach((pid) => { |
| 160 | + const min = Number(products[pid]); |
| 161 | + if (!isNaN(min) && amount >= min) |
| 162 | + allowed.add(String(pid)); |
| 163 | + }); |
| 164 | + return allowed; |
| 165 | + } |
| 166 | + getProductId(item) { |
| 167 | + const input = item.querySelector('input[name="en__pg"]'); |
| 168 | + return input ? input.value : null; |
| 169 | + } |
| 170 | + showItem(item, show) { |
| 171 | + item.style.display = show ? "" : "none"; |
| 172 | + } |
| 173 | + selectByProductId(productId) { |
| 174 | + const radio = document.querySelector('input[name="en__pg"][value="' + productId + '"]'); |
| 175 | + if (radio) { |
| 176 | + radio.checked = true; |
| 177 | + radio.dispatchEvent(new Event("change", { bubbles: true, cancelable: true })); |
| 178 | + // Update EN's selected class if necessary |
| 179 | + const prev = document.querySelector(".en__pg--selected"); |
| 180 | + const pg = radio.closest(".en__pg"); |
| 181 | + if (prev && prev !== pg) |
| 182 | + prev.classList.remove("en__pg--selected"); |
| 183 | + if (pg) |
| 184 | + pg.classList.add("en__pg--selected"); |
| 185 | + } |
| 186 | + } |
| 187 | + clearVariantField() { |
| 188 | + ENGrid.setFieldValue("transaction.selprodvariantid", ""); |
| 189 | + } |
| 190 | + hasVisiblePremiumItems() { |
| 191 | + // Exclude the "No Premium" (value 0) from count |
| 192 | + return this.giftItems.some((item) => { |
| 193 | + const pid = this.getProductId(item); |
| 194 | + const visible = ENGrid.isVisible(item); |
| 195 | + return visible && pid !== "0"; |
| 196 | + }); |
| 197 | + } |
| 198 | + run() { |
| 199 | + const container = this.premiumContainer; |
| 200 | + if (!container) |
| 201 | + return this.logger.log("No premium container found."); |
| 202 | + const frequency = this.getCurrentFreq(); |
| 203 | + const amount = this.getCurrentAmount(); |
| 204 | + const allowedProductIds = this.getAllowedProductIds(frequency, amount); |
| 205 | + // Iterate items and toggle visibility |
| 206 | + let anyVisible = false; |
| 207 | + const items = this.giftItems; |
| 208 | + const noPremiumItems = []; |
| 209 | + items.forEach((item) => { |
| 210 | + const productId = this.getProductId(item); |
| 211 | + if (!productId) |
| 212 | + return; |
| 213 | + if (productId === "0") { |
| 214 | + // track no-premium items but don't decide visibility here — it's always available |
| 215 | + noPremiumItems.push(item); |
| 216 | + this.showItem(item, true); |
| 217 | + return; |
| 218 | + } |
| 219 | + const visible = allowedProductIds.has(productId); |
| 220 | + this.showItem(item, visible); |
| 221 | + if (visible) |
| 222 | + anyVisible = true; |
| 223 | + }); |
| 224 | + // If nothing visible (besides no-premium), hide whole container |
| 225 | + const hasVisibleGifts = anyVisible; |
| 226 | + this.endProcessingVisual(hasVisibleGifts); |
| 227 | + // Selection handling |
| 228 | + const current = document.querySelector('input[name="en__pg"]:checked'); |
| 229 | + const currentProductId = (current === null || current === void 0 ? void 0 : current.value) || null; |
| 230 | + const defaultProductId = this.getConfiguredDefaultPid(frequency); // may be "0" |
| 231 | + // If current selection is invalid after filtering, apply default logic |
| 232 | + const currentIsValid = currentProductId === "0" || |
| 233 | + (currentProductId ? allowedProductIds.has(currentProductId) : false); |
| 234 | + if (!currentIsValid) { |
| 235 | + if (defaultProductId && |
| 236 | + defaultProductId !== "0" && |
| 237 | + allowedProductIds.has(defaultProductId)) { |
| 238 | + this.selectByProductId(defaultProductId); |
| 239 | + } |
| 240 | + else { |
| 241 | + this.selectByProductId("0"); |
| 242 | + this.clearVariantField(); |
| 243 | + } |
| 244 | + } |
| 245 | + else { |
| 246 | + // Current selection is valid; only force No Premium if frequency changed and default is 0/missing |
| 247 | + if (this.pendingFrequencyChange && |
| 248 | + (!defaultProductId || defaultProductId === "0")) { |
| 249 | + if (currentProductId !== "0") { |
| 250 | + this.selectByProductId("0"); |
| 251 | + this.clearVariantField(); |
| 252 | + } |
| 253 | + } |
| 254 | + } |
| 255 | + // If container hidden (no visible gifts), select No Premium and clear hidden |
| 256 | + if (!hasVisibleGifts) { |
| 257 | + this.selectByProductId("0"); |
| 258 | + this.clearVariantField(); |
| 259 | + } |
| 260 | + this.logger.log(`Processed gifts for freq=${frequency}, amount=${amount}. Visible gifts: ${hasVisibleGifts ? "yes" : "no"}`); |
| 261 | + // Reset frequency-change flag after processing |
| 262 | + this.pendingFrequencyChange = false; |
| 263 | + } |
| 264 | +} |
0 commit comments