220 lines
12 KiB
HTML
220 lines
12 KiB
HTML
<!--
|
||
@description : Restyled to match the reference HTML wizard mockup's
|
||
"Salesforce Domain & Security Setup" screen. All Apex
|
||
calls and existing @track state/methods in setup.js
|
||
are unchanged — only the template/CSS and a handful
|
||
of new presentation-only getters (tasks/statusLabel/
|
||
etc., appended at the bottom of setup.js) were added.
|
||
@author : SME Team (restyle by Claude)
|
||
-->
|
||
<template>
|
||
<!-- Custom in-component toasts. Replaces ShowToastEvent (which renders
|
||
outside this component's shadow DOM and can't be restyled) so success
|
||
toasts use the brand green→teal gradient and errors use red, matching
|
||
the reference. -->
|
||
<template if:true={toasts.length}>
|
||
<div class="sw-toast-container">
|
||
<template for:each={toasts} for:item="t">
|
||
<div key={t.id} class={t.cssClass}>
|
||
<span class="sw-toast-icon">{t.iconLabel}</span>
|
||
<div class="sw-toast-body">
|
||
<div class="sw-toast-title">{t.title}</div>
|
||
<div class="sw-toast-message">{t.message}</div>
|
||
</div>
|
||
<button class="sw-toast-close" data-id={t.id} onclick={handleToastClose} title="Dismiss">×</button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<template lwc:if={isLoading}>
|
||
<div class="sw-loading-wrap">
|
||
<lightning-layout-item size="12" class="slds-align_absolute-center">
|
||
<img src={pageLoadingGif} class="pageLoading-Gif">
|
||
</lightning-layout-item>
|
||
</div>
|
||
</template>
|
||
|
||
<template lwc:else>
|
||
<div class="sw-card">
|
||
<!-- Card header -->
|
||
<div class="sw-card-header">
|
||
<div>
|
||
<h2 class="sw-title">Salesforce Domain & Security Setup</h2>
|
||
<p class="sw-subtitle">
|
||
Give Salesforce secure, authorized access to your store. Work through the
|
||
four items below, then run <strong>Check Status</strong> to verify all four
|
||
steps are configured — you'll be able to proceed to the next page only after
|
||
successful verification.
|
||
</p>
|
||
</div>
|
||
<div class={statusPillClass}>
|
||
<span class="status-dot"></span>{statusLabel}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Checklist -->
|
||
<div class="sw-checklist">
|
||
<template for:each={tasks} for:item="task">
|
||
<div key={task.key} class={task.rowClass}>
|
||
<div class={task.boxClass}>
|
||
<template if:true={task.done}>
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.5">
|
||
<path d="M20 6L9 17l-5-5"></path>
|
||
</svg>
|
||
</template>
|
||
</div>
|
||
<div class="task-body">
|
||
<div class="task-title">{task.title}</div>
|
||
<div class="task-desc">{task.desc}</div>
|
||
<!-- Action link hidden once the step is done ("Open again"
|
||
removed everywhere); only the "Click here to configure"
|
||
link renders while the step is still pending. -->
|
||
<template if:true={task.showAction}>
|
||
<a href="javascript:void(0);" class={task.actionClass} data-handler={task.handler} onclick={handleTaskAction}>
|
||
{task.actionLabel}
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
|
||
<path d="M7 17L17 7M9 7h8v8"></path>
|
||
</svg>
|
||
</a>
|
||
</template>
|
||
</div>
|
||
<div class="task-tag-wrap">
|
||
<span class={task.tagClass}>{task.tag}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- Footnote + actions -->
|
||
<div class="sw-footer">
|
||
<div class="sw-footer-row">
|
||
<div class="sw-footnote">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#a0a0a0" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<path d="M12 16v-4M12 8h.01"></path>
|
||
</svg>
|
||
<span>{doneCount} of {totalTasks} steps complete.</span>
|
||
</div>
|
||
<div class="sw-actions">
|
||
<template lwc:if={hideCheckStatus}>
|
||
<!-- Pre-auth, no refresh token yet: Initialize (below) is the
|
||
correct next action, not Check Status — see hideCheckStatus. -->
|
||
</template>
|
||
<template lwc:else>
|
||
<button class={checkButtonClass} onclick={handleCheckStatusClick} disabled={verified}>
|
||
<svg class={checkIconClass} width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 12a9 9 0 1 1-6.2-8.5"></path>
|
||
<path d="M21 3v6h-6"></path>
|
||
</svg>
|
||
{checkLabel}
|
||
</button>
|
||
</template>
|
||
|
||
<template lwc:if={showInitializeButton}>
|
||
<button class={nextButtonClass} disabled={isInitializeDisabled} onclick={handleInitializeVerify}>
|
||
{label.Initialize}
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M13 6l6 6-6 6"></path>
|
||
</svg>
|
||
</button>
|
||
</template>
|
||
<template lwc:else>
|
||
<button class={nextButtonClass} disabled={isNextDisabled} onclick={goNextPage}>
|
||
Next
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M13 6l6 6-6 6"></path>
|
||
</svg>
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- "Activate a Salesforce site" modal (checklist item: site) -->
|
||
<template if:true={siteModel}>
|
||
<div class="sw-modal-overlay" onclick={closeSiteModel}>
|
||
<div class="sw-modal" onclick={handleModalContentClick}>
|
||
<div class="sw-modal-accent"></div>
|
||
<div class="sw-modal-body">
|
||
<div class="sw-modal-head">
|
||
<h2 class="sw-modal-title">Salesforce Configuration Site</h2>
|
||
<button class="sw-modal-close" title={label.Close} onclick={closeSiteModel}>×</button>
|
||
</div>
|
||
|
||
<div class="sw-modal-field">
|
||
<label class="sw-modal-label"><span class="req">*</span> {label.Select_a_Site_URL}</label>
|
||
<template if:true={hasSites}>
|
||
<lightning-combobox
|
||
name="siteUrl"
|
||
label={label.Select_a_Site_URL}
|
||
variant="label-hidden"
|
||
value={siteValue}
|
||
placeholder={label.Select_Progress}
|
||
options={siteOptions}
|
||
onchange={handleSiteChange}
|
||
class="sw-site-field"
|
||
required="true">
|
||
</lightning-combobox>
|
||
</template>
|
||
<template if:true={noSites}>
|
||
<div class="sw-modal-note">
|
||
{label.There_is_no_activate_site_in_your_org} {label.to_create_a_new_site_or_activate_existing_site}
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<div class="sw-modal-actions">
|
||
<a href="https://www.youtube.com/watch?v=3amcuRVWhAs&list=PLoyBVlL6sr2bm3R2TZlIwRaotQ5_gsA3p&index=13" target="_blank" class="sw-modal-link">
|
||
{label.How_to} Configure Salesforce {label.Site}?
|
||
</a>
|
||
<button class={successButtonClass} disabled={successButtonDisabled} onclick={siteClassAndPageAccess}>{label.Success}</button>
|
||
<button class="sw-modal-secondary sw-sitepage-btn" onclick={redirectToSite}>
|
||
{label.Site_Page}
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" class="sw-sitepage-arrow">
|
||
<path d="M7 17L17 7"></path>
|
||
<path d="M8 7h9v9"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Notification centered below the actions row, matching
|
||
the reference mockup's centered placement. -->
|
||
<div class="sw-modal-setup-hint">{siteSavingNotification}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Certificate warning modal -->
|
||
<template if:true={isCertificate}>
|
||
<div class="sw-modal-overlay" onclick={closeCertificateModal}>
|
||
<div class="sw-modal sw-modal_narrow" onclick={handleModalContentClick}>
|
||
<div class="sw-cert-header">
|
||
<lightning-icon icon-name="utility:contract_line_outcome" size="large" class="sw-cert-icon"></lightning-icon>
|
||
</div>
|
||
<div class="sw-modal-body sw-modal-body_center sw-cert-body">
|
||
<h2 class="sw-cert-title">{label.Create_certificate}</h2>
|
||
<template lwc:if={certificateError}>
|
||
<p class="sw-cert-text">
|
||
<b>{label.No_certificate_found}!</b><br/><br/>
|
||
{label.Please_click_on_the} <b>{label.Create_certificate}</b> {label.button_to_create_certificate}
|
||
</p>
|
||
</template>
|
||
<template lwc:else>
|
||
<p class="sw-cert-text">
|
||
{label.If_you_are_a_first_time_visitor} <b>{label.Create_certificate}</b> {label.button}
|
||
</p>
|
||
</template>
|
||
<div class="sw-cert-actions">
|
||
<button class="sw-modal-secondary" onclick={closeCertificateModal}>{label.Cancel}</button>
|
||
<button class="btn-success" onclick={ReDirectCertificateSetting}>{label.Create_certificate}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</template> |