263 lines
17 KiB
HTML
263 lines
17 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 sme-field-mapping">
|
||
<lightning-layout multiple-rows="true">
|
||
|
||
<lightning-layout-item padding="around-small" size="12">
|
||
<div class="fm-section-title">{label.Customer_Settings}</div>
|
||
</lightning-layout-item>
|
||
|
||
<template lwc:if={isNotPersonAccount}>
|
||
<lightning-layout-item padding="around-none" size="6" class="fieldParent-text-color">
|
||
<div class="fm-setting-row">
|
||
<button class={syncAccountToggleClass} onclick={handleSyncAccountToggle}>
|
||
<span class="obj-toggle-knob"></span>
|
||
</button>
|
||
<span class="fm-setting-label">{label.SYNC_ALL_CONTACT}</span>
|
||
</div>
|
||
</lightning-layout-item>
|
||
|
||
<Lightning-layout-item size = "2"></Lightning-layout-item>
|
||
|
||
<lightning-layout-item size="4" class="search-col" style="float: right; vertical-align:middle;transform: translate(-26px, -4px);z-index: 6;">
|
||
<lightning-layout>
|
||
<lightning-layout-item size="12" lwc:if={configObject.HIC_ShopifySync__Default_Account__c} class="fieldParent-text-color" style="float: right;">
|
||
<template lwc:if={configObject.HIC_ShopifySync__Default_Account__c}>
|
||
<div class="slds-form-element" onmouseleave={toggleResult} data-source="lookupContainer">
|
||
<div class="slds-combobox_container slds-has-selection">
|
||
<div class="lookupInputContainer slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="false" aria-haspopup="listbox" role="combobox">
|
||
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right" role="none">
|
||
<div class="searchBoxWrapper slds-show" style="margin-top: 10px;">
|
||
<!--Lookup Input Field-->
|
||
<!-- TESTING THE SPEED OF THE PROGRAMM -->
|
||
<lightning-input
|
||
type="search"
|
||
data-source="searchInputField"
|
||
onclick={toggleResult}
|
||
onchange={fetchAccount}
|
||
is-loading={isSearchLoading}
|
||
value={searchKey}
|
||
variant="label-hidden"
|
||
placeholder={label.Search_Accounts}
|
||
></lightning-input>
|
||
</div>
|
||
<!--Lookup Selected record pill container start-->
|
||
<div class="pillDiv slds-hide" style="margin-top:10px">
|
||
<span class="slds-icon_container slds-combobox__input-entity-icon" style="margin-top: 5px">
|
||
<lightning-icon icon-name={iconName} size="x-small" alternative-text="icon" class="accountIconColor"></lightning-icon>
|
||
</span>
|
||
<input type="text"
|
||
id="combobox-id-1"
|
||
value={selectedRecord.Name}
|
||
class="slds-input slds-combobox__input slds-combobox__input-value"
|
||
readonly/>
|
||
<button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right" title="Remove selected option" style="margin-top:-2px">
|
||
<lightning-icon icon-name="utility:close" size="x-small" alternative-text="close icon" onclick={handleRemove}></lightning-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- lookup search result part start-->
|
||
<div style="margin-top:0px" id="listbox-id-5" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
|
||
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
|
||
<template for:each={accounts} for:item="obj">
|
||
<li key={obj.Id} role="presentation" class="slds-listbox__item">
|
||
<div data-recid={obj.Id} onclick={handelSelectedRecord} class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
|
||
<span style="pointer-events: none;" class="slds-media__figure slds-listbox__option-icon" >
|
||
<span class="slds-icon_container" >
|
||
<lightning-icon icon-name={iconName} size="small" alternative-text="icon" class="accountIconColor"></lightning-icon>
|
||
</span>
|
||
</span>
|
||
<span style="pointer-events: none; vertical-align: middle;" class="slds-media__body">
|
||
<span class="slds-listbox__option-text slds-listbox__option-text_entity">{obj.Name}
|
||
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</li>
|
||
|
||
</template>
|
||
<!--ERROR msg, if there is no records..-->
|
||
<template if:false={hasRecords}>
|
||
<li class="slds-listbox__item" style="text-align: center; font-weight: bold;">{label.No_Records_Found}....</li>
|
||
</template>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <template lwc:if={isAccountLookupEmpty}>
|
||
<h1 style="color:red;">{label.Please_select_any_Account}</h1>
|
||
</template> -->
|
||
</template>
|
||
</lightning-layout-item>
|
||
</lightning-layout>
|
||
|
||
<!-- tooltip removed -->
|
||
</lightning-layout-item>
|
||
</template>
|
||
|
||
<!-- <template lwc:if={configObject.HIC_ShopifySync__Default_Account__c}> -->
|
||
<!-- <lightning-layout-item size="1" class="slds-m-top_x-small slds-post"> -->
|
||
|
||
<!-- </lightning-layout-item> -->
|
||
<!-- </template> -->
|
||
|
||
<!-- <lightning-layout-item padding="around-none" size="6" class="fieldParent-text-color">
|
||
<lightning-layout>
|
||
<lightning-layout-item padding="around-small" size="8">
|
||
<div class="fieldParent-text-color" style="font-size:14px; font-weight:400;">{label.default_mapping_of_all_objects}</div>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="4">
|
||
<lightning-input message-toggle-active="" message-toggle-inactive="" type="toggle" checked={useDefault} onchange={handleSyncList} class=" myToggleClass"></lightning-input>
|
||
</lightning-layout-item>
|
||
</lightning-layout>
|
||
</lightning-layout-item> -->
|
||
|
||
|
||
<lightning-layout-item padding="around-none" size="6" class="fieldParent-text-color" style="position:relative;">
|
||
<div class="fm-setting-row">
|
||
<button class={defaultMappingToggleClass} onclick={handleDefaultMappingToggle}>
|
||
<span class="obj-toggle-knob"></span>
|
||
</button>
|
||
<span class="fm-setting-label">{label.default_mapping_of_all_objects}</span>
|
||
<c-tooltip title-value={label.Default_Mapping_Information}></c-tooltip>
|
||
</div>
|
||
</lightning-layout-item>
|
||
|
||
|
||
<!-- Iteratig over the obejcts -->
|
||
<lightning-layout-item padding="around-small" size = "12" class="fieldParent-text-color">
|
||
|
||
<div class="header-column object-table">
|
||
|
||
<template for:each={objectFieldsList} for:item="object">
|
||
<c-field-mapping-child lwc:if={object.showList} data-id={object.objectName} key={object.objectName} icon-name={object.iconName} use-default={useDefault}
|
||
open-table = {object.openTable}
|
||
object-name={object.objectName}
|
||
default-mapping={object.defaultMapping}
|
||
shopify-fields={object.shopifyFields}
|
||
salesforce-fields={object.salesforceFields}
|
||
required-mapping={object.requiredMapping}
|
||
store-name={storeName}
|
||
object-api-name={object.objectApiName}
|
||
onchangedvalues={changedvalueschildHandler}
|
||
onopportunitydefault={enableOpportunity}
|
||
ondefaultmappingchange={handleChildDefaultChange}
|
||
ondeletedrowvalues={deletedRowChildHandler}
|
||
onerrorfielddetails={showFieldErrorMsg}
|
||
specify-close-date={configObject.HIC_ShopifySync__Specify_Close_Date__c}
|
||
>
|
||
</c-field-mapping-child>
|
||
</template>
|
||
</div>
|
||
|
||
</lightning-layout-item>
|
||
|
||
<template lwc:if={isOpportunityConfigEnabled}>
|
||
<template lwc:if={oppDefault}>
|
||
<!-- OPPORTUNITY SETTINGS -->
|
||
<lightning-layout-item padding="around-small" size="12">
|
||
<div class="fm-section-title" style="margin-top:8px;">{label.Opportunity_Settings}</div>
|
||
</lightning-layout-item>
|
||
|
||
<!-- Give Default Close Date -->
|
||
<lightning-layout-item padding="around-none" size="12" class="fieldParent-text-color" >
|
||
<div class="fm-setting-row fm-closedate-row">
|
||
<span class="fm-setting-label fm-closedate-label"><abbr class="slds-required" title="required">*</abbr> {label.GIVE_DEFAULT_CLOSE_DATE}</span>
|
||
<button class={closeDateToggleClass} onclick={handleCloseDateToggle}>
|
||
<span class="obj-toggle-knob"></span>
|
||
</button>
|
||
|
||
<template lwc:if={configObject.HIC_ShopifySync__Specify_Close_Date__c}>
|
||
<div class="fm-days-wrap">
|
||
<lightning-input type="text" name="Opportunity" onchange={daysChange} value={daysValue} placeholder={label.Days} max="365" min="1" message-when-range-overflow="Maximum allowed value is 365" class="fm-days-input" variant="label-hidden"></lightning-input>
|
||
<span class="fm-tooltip-wrap">
|
||
<c-tooltip title-value={label.ClosedDateInformation}></c-tooltip>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<template lwc:if={configObject.HIC_ShopifySync__Specify_Close_Date__c}>
|
||
<template lwc:if={isAlpha}>
|
||
<h1 style="color:red; text-align: center;">Only numeric values are allowed</h1>
|
||
</template>
|
||
<template lwc:if={isDaysGreater}>
|
||
<h1 style="color:red;text-align: center;">Maximum days for a year is 365</h1>
|
||
</template>
|
||
<template lwc:if={isLeapYear}>
|
||
<h1 style="color:red;text-align: center;">Maximum days for a leap year is 365</h1>
|
||
</template>
|
||
<template lwc:if={isDaysLess}>
|
||
<h1 style="color:red;text-align: center;">Minimum days are greater than 0</h1>
|
||
</template>
|
||
</template>
|
||
</lightning-layout-item>
|
||
|
||
<br/>
|
||
|
||
<!-- SET STAGE FOR OPEN OPPORTUNITY -->
|
||
<lightning-layout-item padding="around-none" size="12" class="fieldParent-text-color">
|
||
<div class="fm-setting-row fm-stage-row">
|
||
<span class="fm-setting-label fm-stage-label"><abbr class="slds-required" title="required">*</abbr> {label.DEFAULT_STAGE}</span>
|
||
<span class="fm-toggle-spacer"></span>
|
||
<div class="fm-stage-combobox" if:true={hasStageOptions}>
|
||
<lightning-combobox
|
||
name="progress"
|
||
label={label.Status}
|
||
variant="label-hidden"
|
||
value={defaultStage}
|
||
placeholder={label.Select_status}
|
||
options={stageOptions}
|
||
onchange={changeStage}
|
||
required>
|
||
</lightning-combobox>
|
||
</div>
|
||
</div>
|
||
</lightning-layout-item>
|
||
<br/>
|
||
</template>
|
||
</template>
|
||
|
||
</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={handleSaveButton}>
|
||
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> |