339 lines
19 KiB
HTML
339 lines
19 KiB
HTML
<template>
|
||
<!-- Custom in-component toasts (solid brand background). -->
|
||
<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">
|
||
<img src={pageLoadingGif} class="pageLoading-Gif">
|
||
</div>
|
||
</template>
|
||
|
||
<template lwc:else>
|
||
<lightning-card class="custom-form-card">
|
||
<div class="slds-box slds-box_xx-large slds-theme_default slds-p-around_medium slds-shadow">
|
||
<!-- Header -->
|
||
<div class="obj-header">
|
||
<div class="slds-text-heading_small">Configure Object Sync Mapping</div>
|
||
<p class="obj-subtitle">Map each Shopify object to its Salesforce counterpart and choose what to sync.</p>
|
||
</div>
|
||
|
||
<!-- Column headers -->
|
||
<div class="sme-object-setup-row1">
|
||
<div class="col-header"><span class="col-badge col-badge_shopify">S</span>{label.Shopify}</div>
|
||
<div class="col-header"><span class="col-badge col-badge_sf">SF</span>{label.Salesforce}</div>
|
||
</div>
|
||
|
||
<lightning-layout multiple-rows="true" class="object-setup-container">
|
||
|
||
<div class="obj-rows-wrap">
|
||
|
||
<!-- PRODUCT -->
|
||
<div class="sme-object-setup-row">
|
||
|
||
<lightning-layout-item class="sme-object-setup-label" padding="around-small">
|
||
<!-- <lightning-icon icon-name="standard:product" class="iconColor" alternative-text="Approved"
|
||
style="float:left;margin-top: 3px;"></lightning-icon> -->
|
||
<span class="obj-icon">
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
|
||
<path d="M3.3 7L12 12l8.7-5M12 22V12"></path>
|
||
</svg>
|
||
</span>
|
||
<div class="object-Text-Color">{label.Product}</div>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item class="sme-object-setup-toggler" padding="around-small">
|
||
<div class="locked-toggle"><div class="locked-knob"></div></div>
|
||
<div class="object-Text-Color-Shopify">{label.Product}</div>
|
||
</lightning-layout-item>
|
||
|
||
</div>
|
||
<!-- CUSTOMER -->
|
||
<div class="sme-object-setup-row">
|
||
|
||
<lightning-layout-item class="sme-object-setup-label" padding="around-small">
|
||
<!-- <lightning-icon icon-name="standard:person_account" class="iconColor"
|
||
alternative-text="Approved" style="float:left;margin-top: 3px;"></lightning-icon> -->
|
||
<span class="obj-icon">
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="12" cy="7" r="4"></circle>
|
||
</svg>
|
||
</span>
|
||
<div class="object-Text-Color" style="margin-top: 0;">{label.Customer}</div>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item class="slds-p-right_medium sme-object-setup-dropdown" padding="around-small"
|
||
>
|
||
<template lwc:if={isEditable}>
|
||
<lightning-combobox
|
||
name="progress"
|
||
value={AccountRecordTypeValue}
|
||
placeholder="Account & Contact"
|
||
options={options}
|
||
onchange={handleChange}
|
||
variant="label-hidden">
|
||
</lightning-combobox>
|
||
</template>
|
||
|
||
<!-- PILL VIEW -->
|
||
<template lwc:else>
|
||
<div class="email-row">
|
||
<div class="email-row-bar">
|
||
<span class="email-text">{AccountRecordTypeValue}</span>
|
||
</div>
|
||
|
||
<!-- ONLY EDIT ICON -->
|
||
<div class="email-row-bar-icons">
|
||
<button class="email-icon-btn" onclick={editCombo} title="Edit">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="pointer-events:none">
|
||
<path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
</lightning-layout-item>
|
||
|
||
</div>
|
||
|
||
<!-- DRAFT ORDER -->
|
||
|
||
<template lwc:if={configObject.HIC_ShopifySync__Draft_Order_Sync__c}>
|
||
|
||
<div class="sme-object-setup-row" >
|
||
<lightning-layout-item class="sme-object-setup-label" padding="around-small">
|
||
<!-- <lightning-icon icon-name="standard:return_order_line_item" class="iconColor"
|
||
alternative-text="Approved" style="float:left;margin-top: 3px;"></lightning-icon> -->
|
||
<span class="obj-icon">
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"></path>
|
||
</svg>
|
||
</span>
|
||
<div class="object-Text-Color" style="margin-top:0">{label.Draft_Order}
|
||
</div>
|
||
</lightning-layout-item>
|
||
|
||
<div class="toggler-group">
|
||
<div class="sme-object-setup-toggler">
|
||
<button class={draftOrderToggleClass} onclick={handleDraftOrderChange} disabled={disableDraftOrderButton}>
|
||
<span class="obj-toggle-knob"></span>
|
||
</button>
|
||
<div class="object-Text-Color-Shopify">Order</div>
|
||
</div>
|
||
<div class="sme-object-setup-toggler">
|
||
<button class={draftOpportunityToggleClass} onclick={handleDraftOpportunityChange} disabled={disableDraftOpportunityButton}>
|
||
<span class="obj-toggle-knob"></span>
|
||
</button>
|
||
<div class="object-Text-Color-Shopify">{label.Opportunity}</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<!-- DRAFT ORDER LINE ITEM -->
|
||
<div class=" sme-object-setup-row" style=" display: none !important;">
|
||
<template lwc:if={configObject.HIC_ShopifySync__Draft_Order_Sync__c}>
|
||
|
||
<template lwc:if={configObject.HIC_ShopifySync__Enable_Draft_Order__c}>
|
||
<div style=" display: none !important;">
|
||
<lightning-layout-item class="sme-object-setup-label" padding="around-small" >
|
||
<lightning-icon icon-name="standard:return_order" class="iconColor"
|
||
alternative-text="Approved" style="float:left;margin-top: 3px;"></lightning-icon>
|
||
<div class="object-Text-Color" style="margin-top:0">{label.Draft_Order}
|
||
{label.Line_Item}</div>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item class="sme-object-setup-toggler sme-object-setup-dropdown">
|
||
<span class="required-tag">Required</span>
|
||
<div class="locked-toggle"><div class="locked-knob"></div></div>
|
||
<div class="object-Text-Color-Shopify">{label.Order} {label.Line_Item} </div>
|
||
</lightning-layout-item>
|
||
</div>
|
||
</template>
|
||
|
||
</template>
|
||
</div>
|
||
|
||
<!-- ORDER -->
|
||
<template lwc:if={isOrderSyncEnabled}>
|
||
<div class=" sme-object-setup-row" >
|
||
|
||
<lightning-layout-item class="sme-object-setup-label" padding="around-small"
|
||
>
|
||
<!-- <lightning-icon icon-name="standard:orders" class="iconColor" alternative-text="Approved"
|
||
style="float:left;margin-top: 3px;"></lightning-icon> -->
|
||
<span class="obj-icon">
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="9" cy="21" r="1"></circle>
|
||
<circle cx="20" cy="21" r="1"></circle>
|
||
<path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"></path>
|
||
</svg>
|
||
</span>
|
||
<div class=" object-Text-Color" >{label.Order}</div>
|
||
</lightning-layout-item>
|
||
<div class="toggler-group">
|
||
<div class="sme-object-setup-toggler">
|
||
<button class={orderToggleClass} onclick={handleOrderChange} disabled={disableOrderButton}>
|
||
<span class="obj-toggle-knob"></span>
|
||
</button>
|
||
<div class="object-Text-Color-Shopify">Order</div>
|
||
</div>
|
||
<div class="sme-object-setup-toggler">
|
||
<button class={opportunityToggleClass} onclick={handleOpportunityChange} disabled={disableOpportunityButton}>
|
||
<span class="obj-toggle-knob"></span>
|
||
</button>
|
||
<div class="object-Text-Color-Shopify">{label.Opportunity}</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<!-- ORDER PRODUCT -->
|
||
<div class="sme-object-setup-row" style="display: none !important;">
|
||
|
||
<lightning-layout-item class="sme-object-setup-label" padding="around-small">
|
||
<lightning-icon icon-name="standard:product_item" class="iconColor" alternative-text="Approved"
|
||
style="float:left;margin-top: 3px;"></lightning-icon>
|
||
<div class="object-Text-Color" style="margin-top:0">{label.Order}
|
||
{label.Product}</div>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item class="sme-object-setup-toggler" padding="around-small">
|
||
<span class="required-tag">Required</span>
|
||
<div class="locked-toggle"><div class="locked-knob"></div></div>
|
||
<div class="object-Text-Color-Shopify">{label.Order} {label.Line_Item}</div>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item class="sme-object-setup-toggler" padding="around-small">
|
||
<span class="required-tag">Required</span>
|
||
<div class="locked-toggle"><div class="locked-knob"></div></div>
|
||
<div class="object-Text-Color-Shopify">{label.Opportunity} {label.Line_Item}</div>
|
||
</lightning-layout-item>
|
||
|
||
</div>
|
||
|
||
<!-- ORDER'S FULFILLMENT -->
|
||
<template lwc:if={isOrderSyncEnabled}>
|
||
<div class=" sme-object-setup-row">
|
||
|
||
<lightning-layout-item class="sme-object-setup-label" padding="around-small">
|
||
<!-- <lightning-icon icon-name="standard:work_order_item" class="iconColor"
|
||
alternative-text="Approved" style="float:left;margin-top: 3px;"></lightning-icon> -->
|
||
<span class="obj-icon">
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"
|
||
stroke="#4C9226" stroke-width="1.9"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
|
||
<path d="M8 5H6.5A1.5 1.5 0 0 0 5 6.5v13A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 17.5 5H16"></path>
|
||
|
||
<path d="M9 4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V6H9V4.5Z"></path>
|
||
|
||
<path d="M9 13l2 2 4-4"></path>
|
||
|
||
</svg>
|
||
</span>
|
||
<div class="object-Text-Color" style="margin-top:0">{label.Order_s_Fulfillment}
|
||
</div>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item class="sme-object-setup-toggler sme-object-setup-dropdown" padding="around-small">
|
||
<button class={fulfillmentToggleClass} onclick={onOrderFulfillmentChange} disabled={disabledOrderFulfillment}>
|
||
<span class="obj-toggle-knob"></span>
|
||
</button>
|
||
<span class="slds-form-element__label slds-m-bottom_none">
|
||
<div class="object-Text-Color-Shopify">{label.Order_s_Fulfillment} </div>
|
||
</span>
|
||
</lightning-layout-item>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Collection : only shown when Collection sync was
|
||
enabled on the Shopify Store Setup step (step 2).
|
||
Previously this row was always rendered with a
|
||
decorative always-on locked-toggle, so it looked
|
||
"activated" even when the step-2 toggle was off. -->
|
||
<template lwc:if={configObject.HIC_ShopifySync__Collection_Sync__c}>
|
||
<div class="sme-object-setup-row">
|
||
|
||
<lightning-layout-item class="sme-object-setup-label" padding="around-small">
|
||
<!-- <lightning-icon icon-name="standard:product_required" class="iconColor"
|
||
alternative-text="Approved" style="float:left;margin-top: 3px; "></lightning-icon> -->
|
||
<span class="obj-icon">
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 2l9 5-9 5-9-5 9-5z"></path>
|
||
<path d="M3 12l9 5 9-5M3 17l9 5 9-5"></path>
|
||
</svg>
|
||
</span>
|
||
<div class="object-Text-Color">{label.Collection}</div>
|
||
</lightning-layout-item>
|
||
|
||
<!-- RIGHT SIDE - Collection -->
|
||
<lightning-layout-item class="sme-object-setup-toggler" padding="around-small">
|
||
<div class="locked-toggle"><div class="locked-knob"></div></div>
|
||
<div class="object-Text-Color-Shopify">{label.Collection}</div>
|
||
</lightning-layout-item>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- LOCATION/INVENTORY : mirrors the step-2 toggle, same
|
||
reason as Collection above. -->
|
||
<template lwc:if={configObject.HIC_ShopifySync__Inventory_Location__c}>
|
||
<div class=" sme-object-setup-row">
|
||
|
||
<lightning-layout-item class="sme-object-setup-label" padding="around-small">
|
||
<!-- <lightning-icon icon-name="standard:location" class="iconColor" alternative-text="Approved"
|
||
style="float:left;margin-top: 3px;"></lightning-icon> -->
|
||
<span class="obj-icon">
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z"></path>
|
||
<circle cx="12" cy="10" r="3"></circle>
|
||
</svg>
|
||
</span>
|
||
<div class="object-Text-Color">{label.Location} / {label.Inventory}</div>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item class="sme-object-setup-toggler sme-object-setup-dropdown" padding="around-small">
|
||
<div class="locked-toggle"><div class="locked-knob"></div></div>
|
||
<div class="object-Text-Color-Shopify">{label.Location} / {label.Inventory}</div>
|
||
</lightning-layout-item>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
|
||
</div><!-- /obj-rows-wrap -->
|
||
</lightning-layout>
|
||
|
||
<!-- Footer actions -->
|
||
<div class="sw-actions">
|
||
<button class="sw-btn-back" onclick={handleBackStep}>
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M11 6l-6 6 6 6"></path></svg>
|
||
Back
|
||
</button>
|
||
<button class="sw-btn-save" onclick={handleSaveClick}>
|
||
Save & 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>
|
||
</div>
|
||
</div>
|
||
</lightning-card>
|
||
</template>
|
||
</template> |