https://animicausa.com/cdn/shop/t/39/assets/gc-step-1.js?v=57111207029111136531787410400

1import{OCCASIONS,SAMPLE_CONTENT}from"gc-constants";import{escapeHtml}from"gc-utils";export const step1={key:"personalize",title:"Personalize",render(container,ctx){const c=ctx.card;container.innerHTML=`
2      <div class="gc-step gc-step-personalize">
3        <div class="gc-step-heading">
4          <h2 class="gc-step-title">Create Your Greeting Card</h2>
5          <p class="gc-step-sub">Build an interactive quest map for someone you love</p>
6        </div>
7
8        <div class="gc-info">
9          <p><strong>How it works:</strong> You'll design a magical adventure map with 5 interactive stations \u2014 each one reveals a personal surprise: a message, a video, a memory game, a photo album, or your heartfelt greeting.</p>
10        </div>
11
12        <label class="gc-field">
13          <span class="gc-field-label">Recipient's Name <span class="gc-req">*</span></span>
14          <input type="text" id="gc-consignee-name" class="gc-input"
15                 autocomplete="off" maxlength="17"
16                 value="${escapeHtml(c.consigneeName||"")}"
17                 placeholder="Who is this card for?" />
18          <span class="gc-field-counter"><span id="gc-consignee-counter">${(c.consigneeName||"").length}</span>/17</span>
19        </label>
20
21        <label class="gc-field">
22          <span class="gc-field-label">Your Name <span class="gc-req">*</span></span>
23          <input type="text" id="gc-buyer-name" class="gc-input"
24                 autocomplete="off" maxlength="80"
25                 value="${escapeHtml(c.buyerName||"")}"
26                 placeholder="Who is it from?" />
27        </label>
28
29        <label class="gc-field">
30          <span class="gc-field-label">Occasion</span>
31          <div class="gc-select-wrap">
32            <select id="gc-occasion" class="gc-select">
33              <option value="">Select an occasion\u2026</option>
34              ${OCCASIONS.map(o=>`<option value="${escapeHtml(o)}"${o===c.occasion?" selected":""}>${escapeHtml(o)}</option>`).join("")}
35            </select>
36          </div>
37        </label>
38      </div>`;const bindText=(id,key)=>{const el=container.querySelector(`#${id}`);el.addEventListener("input",()=>{ctx.card[key]=el.value,ctx.refreshPreview(),ctx.persist?.()})};bindText("gc-consignee-name","consigneeName"),bindText("gc-buyer-name","buyerName");const consigneeInput=container.querySelector("#gc-consignee-name");consigneeInput.addEventListener("input",()=>{const counter=container.querySelector("#gc-consignee-counter");counter&&(counter.textContent=consigneeInput.value.length)});const occEl=container.querySelector("#gc-occasion");occEl.addEventListener("change",()=>{ctx.card.occasion=occEl.value;const samples=SAMPLE_CONTENT[occEl.value];samples&&(ctx.card.dots=ctx.card.dots||[],Object.entries(samples).forEach(([slot,sample])=>{const slotNum=Number(slot);let dot=ctx.card.dots.find(d=>d.slot===slotNum);dot||(dot={slot:slotNum},ctx.card.dots.push(dot)),dot.type=sample.type,dot.payload={...sample.payload,_sampleDefaults:{...sample.payload}}})),ctx.refreshPreview(),ctx.persist?.()})},validate(ctx){const errors=[],c=ctx.card;return(c.consigneeName||"").trim()||errors.push("Recipient's Name is required."),(c.buyerName||"").trim()||errors.push("Your Name is required."),errors.length?{ok:!1,errors}:{ok:!0}},nextLabel(){return"Next: Add Content"}};
39//# sourceMappingURL=/cdn/shop/t/39/assets/gc-step-1.js.map?v=57111207029111136531787410400