814 lines
90 KiB
HTML
814 lines
90 KiB
HTML
<!--
|
||
@description :
|
||
@author : ChangeMeIn@UserSettingsUnder.SFDoc
|
||
@group :
|
||
@last modified on : 07-31-2025
|
||
@last modified by : ChangeMeIn@UserSettingsUnder.SFDoc
|
||
-->
|
||
<template>
|
||
<!-- Custom in-component toasts (success = green→teal gradient, error = red). -->
|
||
<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>
|
||
|
||
<lightning-card>
|
||
<div>
|
||
<lightning-layout>
|
||
<!-- SPACE -->
|
||
<!-- Component Container -->
|
||
<lightning-layout-item size="12" style="max-width: 1800px; margin-inline: auto;padding-inline:30px;">
|
||
<lightning-layout multiple-rows="true">
|
||
|
||
<!-- TOP BRAND BAR — restyled to match the reference HTML wizard
|
||
mockup's shell header. Purely presentational; the real
|
||
progress/navigation state (optionList, the six *Color
|
||
trackers) now drives the left step nav further below. -->
|
||
<!-- <lightning-layout-item size="12">
|
||
<div class="sw-topbar">
|
||
<div class="sw-topbar-left">
|
||
<div class="sw-topbar-icon">
|
||
<img src={SMELOGO} alt="Sync made easy" class="sw-topbar-icon-img" />
|
||
</div>
|
||
<div>
|
||
<div class="sw-topbar-title"><strong>Sync</strong> <span class="sw-topbar-title_accent"> made easy</span></div>
|
||
<div class="sw-topbar-tagline">Your Shopify sync with Salesforce made easy</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</lightning-layout-item> -->
|
||
|
||
<!-- OLD SVG PROGRESS INDICATOR (removed — purely decorative,
|
||
no click handlers; replaced by the left step nav below,
|
||
which is wired to the same real setupColor/credentialColor/
|
||
objectColor/fieldColor/recordColor/finishColor trackers). -->
|
||
<lightning-layout-item size="12" style="display:none">
|
||
<div class="slds-m-around_medium"
|
||
style="margin-right: 7% !important; margin-left: 7% !important;">
|
||
<lightning-progress-indicator current-step={usercurrentvalue} type="path"
|
||
variant="shaded">
|
||
|
||
<!-- SETUP SVG -->
|
||
<div class={setupColor} label='Setup' data-id=1>
|
||
<svg width="50" height="50" viewBox="0 0 154 154" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="77" cy="77" r="74.5" />
|
||
<path
|
||
d="M126.397 61.6135L124.764 54.849L119.686 56.0221C118.843 54.3137 117.71 52.8001 116.362 51.5185L119.108 47.1705L113.066 43.5166L110.319 47.8646C108.544 47.2579 106.655 46.9415 104.717 46.9686L103.518 42L96.6047 43.596L97.8026 48.5656C96.0566 49.3902 94.5107 50.499 93.1999 51.8188L88.7564 49.1311L85.0222 55.0438L89.4657 57.7305C88.8457 59.4671 88.5234 61.3162 88.5511 63.2134L83.4722 64.3865L85.1043 71.151L90.1832 69.9779C91.0259 71.6863 92.1591 73.2 93.5068 74.4815L90.7611 78.8295L96.8028 82.4834L99.5496 78.1354C101.324 78.7421 103.214 79.0575 105.153 79.0303L106.351 84L113.264 82.404L112.065 77.4344C113.811 76.6098 115.358 75.501 116.668 74.1812L121.111 76.8689L124.846 70.9562L120.402 68.2695C121.022 66.5329 121.344 64.6838 121.317 62.7866L126.397 61.6135Z" />
|
||
<path
|
||
d="M113.191 61.1623C114.267 65.4611 111.444 69.7692 106.883 70.7842C102.323 71.7991 97.7547 69.1371 96.6782 64.8373C95.6018 60.5385 98.4251 56.2304 102.986 55.2154C107.545 54.2015 112.114 56.8636 113.191 61.1623Z" />
|
||
<path
|
||
d="M85.7821 87.8918V77.7943H78.3767C77.7829 75.1031 76.7207 72.5938 75.2861 70.34L80.5285 65.0884L73.4006 57.9479L68.1582 63.1995C65.9094 61.7634 63.4045 60.6994 60.718 60.1035V52.686H50.6383V60.1035C47.9518 60.6994 45.447 61.7634 43.1972 63.1995L37.9548 57.9479L30.8268 65.0884L36.0692 70.34C34.6347 72.5938 33.5735 75.1031 32.9787 77.7943H25.5742V87.8918H32.9787C33.5735 90.583 34.6347 93.0923 36.0692 95.345L30.8268 100.597L37.9548 107.737L43.1972 102.486C45.447 103.923 47.9518 104.987 50.6383 105.582V113H60.718V105.582C63.4045 104.987 65.9094 103.923 68.1582 102.486L73.4006 107.737L80.5285 100.597L75.2861 95.345C76.7207 93.0923 77.7818 90.583 78.3767 87.8918H85.7821Z" />
|
||
<path
|
||
d="M66.94 82.8424C66.94 89.0732 61.8986 94.1235 55.6788 94.1235C49.4599 94.1235 44.4175 89.0732 44.4175 82.8424C44.4175 76.6126 49.4589 71.5613 55.6788 71.5613C61.8976 71.5613 66.94 76.6126 66.94 82.8424Z" />
|
||
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- SETUP AND CREDETIALS SVG LINE -->
|
||
<div class="slds-align_absolute-center removeMarginLine">
|
||
<div class={credentialColor}>
|
||
|
||
<svg width="100%" height="3%" viewBox="0 0 100 2" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<line x1="2.18557e-07" y1="2.50006" x2="279" y2="2.50009"
|
||
stroke-width="5" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SHOPIFY CREDENTIAL SVG -->
|
||
<div class={credentialColor} id="shopifyCredentials" value="Shopify Credentials">
|
||
<svg width="50" height="50" viewBox="0 0 154 154" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg" label='Shopify Credentials'>
|
||
<circle cx="77" cy="77" r="74.5" />
|
||
<path
|
||
d="M50.3504 75.8577C48.1098 73.3066 47.0623 70.4038 47.4375 67.0752C47.7621 64.1995 49.074 61.816 51.2702 59.9303C55.2879 56.4802 61.4742 56.5078 65.4452 59.9894C67.7793 62.0359 69.0838 64.6113 69.2621 67.7098C69.4405 70.8049 68.3834 73.4945 66.4207 75.716C67.7573 76.8608 69.1373 77.87 70.3096 79.08C73.3057 82.174 74.6845 85.9724 74.7616 90.2449C74.81 92.9243 74.7858 95.6049 74.7672 98.2848C74.7549 100.074 73.6365 101.201 71.847 101.203C62.8322 101.215 53.8174 101.214 44.8025 101.204C43.1307 101.202 41.9071 100.137 41.8992 98.5611C41.8835 95.2437 41.7834 91.9117 42.0432 88.6113C42.4505 83.4426 45.036 79.449 49.3063 76.5362C49.6281 76.3168 49.9589 76.112 50.3504 75.8577ZM69.283 95.6819C69.283 93.7479 69.319 91.8673 69.2762 89.9884C69.1496 84.4248 64.9018 79.8878 59.3197 79.3168C54.0041 78.7729 48.8484 82.3332 47.7503 87.6741C47.2204 90.2528 47.3706 92.9716 47.2091 95.6819C54.6803 95.6819 61.9136 95.6819 69.283 95.6819ZM58.2902 62.8359C55.3064 62.8595 52.8402 65.3465 52.8481 68.323C52.856 71.3022 55.3329 73.7791 58.3121 73.7876C61.3235 73.796 63.8397 71.2595 63.7998 68.2549C63.7604 65.2683 61.2633 62.8122 58.2902 62.8359Z" />
|
||
<path
|
||
d="M96.795 73.7948C101.333 73.7948 105.871 73.7813 110.409 73.801C112.516 73.81 113.854 75.6613 113.141 77.5149C112.73 78.5849 111.756 79.2571 110.503 79.2701C108.553 79.2903 106.604 79.2768 104.655 79.2768C97.528 79.2768 90.401 79.2836 83.2741 79.2729C81.0954 79.2695 79.7256 77.4429 80.4501 75.5567C80.881 74.4355 81.8767 73.7993 83.2719 73.797C87.7796 73.7903 92.2873 73.7948 96.795 73.7948Z" />
|
||
<path
|
||
d="M96.7385 90.2425C92.2308 90.2425 87.7231 90.2549 83.2154 90.2375C81.0615 90.229 79.6821 88.3282 80.4758 86.4701C80.9855 85.278 81.9548 84.7566 83.2385 84.7583C87.8677 84.7639 92.4975 84.7599 97.1267 84.7605C101.543 84.7605 105.959 84.7487 110.375 84.7661C112.529 84.7746 113.909 86.676 113.115 88.5335C112.605 89.7256 111.636 90.247 110.352 90.2453C105.815 90.2392 101.277 90.2431 96.7385 90.2425Z" />
|
||
<path
|
||
d="M96.8885 95.7264C101.396 95.7264 105.904 95.7129 110.412 95.7326C112.518 95.7422 113.855 97.5952 113.142 99.4483C112.729 100.519 111.758 101.189 110.502 101.202C108.431 101.221 106.36 101.208 104.288 101.208C97.2834 101.208 90.278 101.215 83.2731 101.204C81.0949 101.201 79.7257 99.3718 80.4519 97.4855C80.8834 96.3649 81.8791 95.7304 83.2748 95.7281C87.8123 95.7219 92.3504 95.7264 96.8885 95.7264Z" />
|
||
<path
|
||
d="M91.3123 62.8285C93.9619 62.8285 96.6115 62.8229 99.2611 62.8302C101.121 62.8352 102.363 63.9412 102.363 65.5687C102.364 67.1967 101.121 68.3066 99.2622 68.3088C93.963 68.315 88.6638 68.315 83.3646 68.3088C81.5048 68.3066 80.2627 67.1984 80.2627 65.5703C80.2621 63.9423 81.5042 62.8358 83.3635 62.8302C86.0131 62.8229 88.6627 62.8285 91.3123 62.8285Z" />
|
||
<path
|
||
d="M124 104.71C123.467 106.015 123.124 107.445 122.361 108.597C120.837 110.9 118.502 111.902 115.772 111.996C115.59 112.002 115.409 111.998 115.227 111.998C90.0728 111.998 64.9186 111.997 39.7639 112C36.2207 112.001 33.4434 110.614 31.8965 107.342C31.3576 106.203 31.049 104.841 31.0445 103.579C30.9892 87.3328 30.9919 71.0866 31.0177 54.8403C31.0255 49.8994 34.5888 46.4172 39.5649 46.4082C48.3732 46.3925 57.182 46.4037 65.9903 46.4037C66.3509 46.4037 66.7109 46.4037 67.1911 46.4037C66.7182 44.4828 66.2665 42.6422 65.8108 40.8032C65.2132 38.3905 64.5938 35.9834 64.0197 33.5656C63.5478 31.5797 64.747 30.0178 66.7713 30.0128C73.9147 29.9954 81.0588 29.9965 88.2022 30.0116C90.2779 30.0161 91.4709 31.5719 90.9739 33.6206C89.9872 37.6855 88.9653 41.7415 87.9601 45.8014C87.9177 45.9735 87.9009 46.1519 87.8601 46.4037C88.2637 46.4037 88.6232 46.4037 88.9832 46.4037C97.7915 46.4037 106.6 46.3953 115.409 46.4076C118.925 46.4127 121.589 47.9152 123.173 51.1125C123.568 51.9122 123.73 52.8286 123.999 53.6917C124 70.6985 124 87.7041 124 104.71ZM68.5502 51.8702C68.2024 51.8702 67.9028 51.8702 67.6031 51.8702C58.3426 51.8702 49.082 51.8696 39.8215 51.8707C37.445 51.8707 36.4572 52.8595 36.4572 55.2374C36.456 71.2072 36.4566 87.1763 36.4572 103.146C36.4572 105.538 37.4383 106.532 39.8019 106.532C64.951 106.532 90.0996 106.532 115.249 106.532C117.554 106.532 118.55 105.523 118.551 103.194C118.552 87.1943 118.552 71.1943 118.551 55.1942C118.551 52.8763 117.548 51.8713 115.235 51.8707C105.974 51.869 96.7136 51.8702 87.4531 51.8702C87.1244 51.8702 86.7957 51.8702 86.4519 51.8702C86.1829 52.9346 85.9398 53.9346 85.6776 54.9289C85.2454 56.5688 84.2973 57.3254 82.6123 57.3321C79.2229 57.345 75.8334 57.3433 72.4439 57.3332C70.6997 57.3276 69.7666 56.5845 69.3228 54.8874C69.0634 53.897 68.8146 52.9043 68.5502 51.8702ZM70.1652 35.496C70.1898 35.6873 70.1932 35.809 70.2217 35.9245C71.498 41.0662 72.7687 46.2091 74.0797 51.3418C74.1372 51.5667 74.5632 51.8399 74.8237 51.8466C76.5763 51.8915 78.3312 51.8416 80.0832 51.8853C80.7038 51.901 80.8877 51.6604 81.0241 51.0956C81.8895 47.5052 82.7985 43.9254 83.6913 40.3422C84.0893 38.7449 84.484 37.1466 84.8932 35.496C79.925 35.496 75.0926 35.496 70.1652 35.496Z" />
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
<!-- SHOPIFY CREDENTIAL AND OBJECT SETUP SVG LINE -->
|
||
<div class="slds-align_absolute-center removeMarginLine">
|
||
<div class={objectColor}>
|
||
<svg width="100%" height="3%" viewBox="0 0 100 2" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<line x1="2.18557e-07" y1="2.50006" x2="279" y2="2.50009"
|
||
stroke-width="5" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OBJECT SETUP SVG -->
|
||
<div class={objectColor}>
|
||
<svg width="50" height="50" viewBox="0 0 154 154" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="77" cy="77" r="74.5" stroke="#AFAFAF" stroke-width="5" />
|
||
<path
|
||
d="M123.771 103.99C127.463 104.434 128.975 106.402 128.485 109.91C127.506 116.905 122.143 121.642 115.069 121.647C89.0494 121.665 63.0298 121.664 37.0085 121.647C30.0197 121.642 24.5787 116.936 23.6083 110.154C23.0719 106.402 24.3309 104.686 28.2857 103.926C28.2857 103.472 28.2857 102.989 28.2857 102.509C28.2857 87.4789 28.2943 72.4488 28.2806 57.4205C28.2772 53.766 29.6422 50.8323 32.9461 49.1439C34.27 48.4675 35.8947 48.0671 37.3843 48.0637C63.1392 48.0007 88.8957 48.0024 114.651 48.0297C120.127 48.0348 123.763 51.8255 123.768 57.3983C123.78 72.4284 123.771 87.4585 123.773 102.487C123.771 102.969 123.771 103.451 123.771 103.99ZM119.359 104.066C119.359 103.572 119.359 103.206 119.359 102.838C119.359 87.6953 119.36 72.5511 119.357 57.4085C119.357 54.0608 117.717 52.4235 114.345 52.4235C88.8154 52.4201 63.2844 52.4201 37.755 52.4235C34.3144 52.4235 32.6984 54.0454 32.6984 57.4767C32.6967 72.5817 32.6967 87.6885 32.6967 102.794C32.6967 103.19 32.6967 103.589 32.6967 104.066C33.3048 104.066 33.7524 104.066 34.2 104.066C42.3573 104.066 50.5163 104.117 58.6719 104.037C61.3061 104.012 63.4962 104.685 65.1704 106.77C65.9084 107.69 66.8736 108.009 68.0609 107.998C73.1209 107.957 78.1827 107.918 83.2428 108.015C84.9375 108.048 86.217 107.586 87.3189 106.317C88.7402 104.681 90.5989 104.042 92.7702 104.053C100.135 104.09 107.499 104.066 114.864 104.066C116.297 104.066 117.731 104.066 119.359 104.066ZM124.036 108.46C123.578 108.46 123.1 108.46 122.62 108.46C112.988 108.46 103.355 108.492 93.7235 108.428C92.0852 108.417 90.809 108.809 89.7174 110.036C88.1987 111.743 86.2478 112.419 83.9484 112.392C78.6987 112.331 73.4472 112.322 68.1975 112.396C65.7273 112.43 63.6773 111.726 62.0937 109.799C61.2702 108.797 60.2367 108.431 58.9145 108.438C49.0557 108.48 39.1969 108.46 29.3381 108.46C28.8956 108.46 28.4549 108.46 27.8484 108.46C27.9424 109.234 27.9577 109.867 28.1029 110.47C29.1245 114.721 32.6112 117.272 37.427 117.273C63.1494 117.28 88.8735 117.28 114.596 117.261C115.681 117.26 116.8 117.163 117.842 116.883C121.597 115.876 124.398 112.08 124.036 108.46Z" />
|
||
<path
|
||
d="M62.8384 25.9906C62.0252 26.7913 61.3026 27.5018 60.4826 28.3076C61.1694 29.2498 61.8271 30.2021 62.5377 31.1119C63.3031 32.0898 63.3304 33.0473 62.7684 34.1513C62.2251 35.2178 61.7861 36.3457 61.3966 37.4803C61.0549 38.4736 60.4638 39.0784 59.4132 39.2403C58.1866 39.4277 56.9634 39.6372 55.6395 39.8536C55.6395 40.4652 55.6702 41.0258 55.6327 41.5829C55.5541 42.7891 54.6692 43.6443 53.5177 43.6699C52.3304 43.6955 51.355 42.8095 51.3225 41.559C51.2986 40.5879 51.2474 39.5708 51.4899 38.6474C52.0964 36.3423 53.9072 35.4955 56.099 35.3541C57.1428 35.286 57.6844 34.8805 58.0465 33.8821C58.3147 33.1444 58.3301 32.6384 57.8074 32.0626C57.4298 31.6469 57.1121 31.1698 56.8063 30.6962C55.6907 28.9635 55.8359 26.9021 57.2282 25.3772C58.067 24.4589 58.9502 23.5764 59.871 22.7416C61.4051 21.348 63.4568 21.2083 65.201 22.3191C65.5512 22.5423 65.8775 22.7995 66.2141 23.0432C67.4441 23.9359 68.0676 23.9632 69.3301 23.1062C69.5129 22.9818 69.6461 22.7109 69.6957 22.4843C69.8477 21.7858 69.9229 21.072 70.0749 20.3735C70.5327 18.2506 72.1334 16.8911 74.3013 16.811C75.4322 16.7684 76.5683 16.7735 77.6992 16.8093C79.9234 16.8792 81.5173 18.2387 81.9939 20.4331C82.0657 20.7636 82.1118 21.0992 82.1579 21.4349C82.3681 22.9546 82.8754 23.5406 84.3412 23.7672C84.6487 23.8149 85.0741 23.6173 85.3286 23.3975C88.2328 20.9033 90.6979 20.7909 93.6072 24.1216C94.0274 24.6038 94.528 25.0178 94.9397 25.5067C96.1714 26.9702 96.3166 28.9209 95.3292 30.5565C95.0969 30.9432 94.8184 31.3027 94.5502 31.6656C93.5901 32.9689 93.5491 33.4153 94.4152 34.7544C94.569 34.9929 94.9363 35.1548 95.2335 35.2246C95.8554 35.3712 96.5011 35.4189 97.1315 35.5347C99.2396 35.9232 100.676 37.5775 100.743 39.702C100.763 40.3783 100.784 41.0615 100.721 41.7345C100.616 42.8521 99.6769 43.6665 98.5784 43.6699C97.48 43.6716 96.5387 42.8538 96.4311 41.7413C96.3747 41.1484 96.4208 40.5453 96.4208 39.8485C95.2694 39.6696 94.2034 39.4652 93.1272 39.3493C91.7144 39.1977 90.8961 38.4923 90.5202 37.0987C90.2486 36.0935 89.8061 35.1139 89.309 34.1939C88.694 33.0558 88.7487 32.0677 89.5516 31.0608C90.2315 30.2089 90.8499 29.3077 91.5555 28.3485C90.7133 27.6363 89.8916 26.9412 88.9793 26.1695C88.2584 26.6942 87.3051 27.3621 86.3809 28.0691C85.4738 28.7625 84.5769 28.8306 83.5366 28.3212C82.392 27.7607 81.1962 27.2922 79.9969 26.8526C79.0146 26.4932 78.415 25.8866 78.2732 24.8355C78.1416 23.8661 78.0323 22.8864 77.7914 21.9426C77.7129 21.6359 77.2653 21.2304 76.9578 21.2032C74.3287 20.9766 74.2432 20.9919 74.0143 23.5577C73.8384 25.5238 73.114 26.8049 71.0316 27.1951C70.2047 27.3501 69.4172 27.8186 68.6638 28.2395C67.579 28.8443 66.6053 28.8051 65.623 28.0333C64.7364 27.3399 63.807 26.6976 62.8384 25.9906Z" />
|
||
<path
|
||
d="M75.9739 30.5873C81.8181 30.56 86.7945 35.3031 86.9209 41.0208C86.9568 42.6325 86.1539 43.6394 84.8094 43.6666C83.5264 43.6939 82.6962 42.7841 82.5783 41.2218C82.3289 37.9251 80.0329 35.436 76.8725 35.0374C73.7206 34.6404 70.7942 36.4582 69.8307 39.4619C69.6257 40.0973 69.5471 40.7822 69.4788 41.4501C69.3404 42.8011 68.4658 43.6939 67.246 43.6666C65.9733 43.6376 65.1311 42.6716 65.1311 41.2439C65.1311 35.4939 70.0955 30.6145 75.9739 30.5873Z" />
|
||
<path
|
||
d="M58.1286 99.7252C53.9364 99.7252 49.7441 99.732 45.5519 99.7235C42.2804 99.7167 40.3995 97.8699 40.4183 94.6226C40.4286 92.8951 40.3483 91.1317 40.6558 89.4485C41.4468 85.1228 44.9164 81.9113 49.2675 81.3286C49.8791 81.2469 50.6239 81.4683 51.1791 81.7784C55.8975 84.4192 60.5681 84.3851 65.2917 81.7682C65.9186 81.4206 66.8189 81.2911 67.5313 81.4121C72.4069 82.2418 75.9072 86.3563 76.0166 91.28C76.0439 92.4845 76.0371 93.6907 76.0234 94.8969C75.9927 97.754 74.0503 99.7031 71.1564 99.7184C66.8155 99.7423 62.4712 99.7252 58.1286 99.7252ZM44.6652 95.3484C45.3417 95.3484 45.7842 95.3484 46.2284 95.3484C54.196 95.3484 62.1637 95.3484 70.1297 95.3484C70.3569 95.3484 70.5841 95.3314 70.8096 95.3501C71.4297 95.3995 71.7013 95.1559 71.6774 94.5068C71.6381 93.4539 71.7133 92.3942 71.6467 91.3447C71.4946 88.9306 70.3381 87.1553 68.136 86.0786C67.5193 85.777 67.0017 85.806 66.3457 86.1297C61.1609 88.6835 55.8668 88.8386 50.6444 86.3648C49.1667 85.6646 48.0529 85.8537 47.1116 86.8503C46.2369 87.7754 45.3417 88.8999 45.0377 90.0857C44.6277 91.6888 44.7729 93.4317 44.6652 95.3484Z" />
|
||
<path
|
||
d="M66.7899 70.6293C66.7967 75.3656 62.9974 79.175 58.25 79.1921C53.4615 79.2091 49.5733 75.3383 49.6143 70.5952C49.6553 65.8879 53.5384 62.0409 58.2295 62.0596C62.9547 62.0784 66.7831 65.91 66.7899 70.6293ZM54.015 70.5799C53.9928 72.9463 55.8651 74.8545 58.2055 74.8527C60.4862 74.851 62.3995 72.9702 62.4285 70.7025C62.4576 68.3497 60.5904 66.4671 58.2175 66.4603C55.8839 66.4552 54.0372 68.2645 54.015 70.5799Z" />
|
||
<path
|
||
d="M97.3213 67.5848C93.5117 67.5848 89.7004 67.5813 85.8908 67.5882C84.941 67.5899 84.0817 67.411 83.5282 66.5472C82.7612 65.3512 83.3266 63.748 84.6916 63.3442C85.187 63.1977 85.7337 63.1841 86.2564 63.1841C93.6877 63.1739 101.121 63.1773 108.552 63.1773C108.854 63.1773 109.157 63.1636 109.457 63.1926C110.785 63.3153 111.615 64.1399 111.635 65.3393C111.656 66.5898 110.809 67.52 109.432 67.5609C107.32 67.6239 105.207 67.5831 103.094 67.5848C101.168 67.5865 99.2449 67.5848 97.3213 67.5848Z" />
|
||
<path
|
||
d="M97.3281 73.5274C101.175 73.5274 105.022 73.5206 108.87 73.5359C109.351 73.5376 109.866 73.5734 110.305 73.7437C111.304 74.1322 111.743 74.9414 111.611 75.9909C111.48 77.0455 110.841 77.6725 109.784 77.8446C109.526 77.8872 109.257 77.8872 108.994 77.8872C101.262 77.8889 93.5288 77.894 85.7969 77.8854C84.1432 77.8837 83.2019 77.0745 83.1985 75.7234C83.1968 74.3809 84.1722 73.5342 85.7866 73.5308C89.6338 73.5206 93.481 73.5274 97.3281 73.5274Z" />
|
||
<path
|
||
d="M97.4492 94.2189C101.184 94.2189 104.918 94.2172 108.652 94.2223C109.066 94.2223 109.488 94.2172 109.891 94.2939C110.892 94.4847 111.492 95.1168 111.613 96.1219C111.739 97.1714 111.307 97.9824 110.31 98.3725C109.87 98.5446 109.355 98.5855 108.875 98.5855C101.255 98.5974 93.6345 98.594 86.0153 98.594C85.7146 98.594 85.4072 98.6059 85.1116 98.5599C83.9209 98.3759 83.147 97.4406 83.2017 96.2821C83.2547 95.1559 84.0251 94.3501 85.2278 94.2564C86.0153 94.1951 86.8114 94.2206 87.6024 94.2206C90.8858 94.2172 94.1675 94.2189 97.4492 94.2189Z" />
|
||
<path
|
||
d="M97.4563 88.2302C93.5715 88.2302 89.6868 88.2354 85.8003 88.2285C84.174 88.2251 83.2002 87.4057 83.1934 86.0682C83.1866 84.7257 84.1552 83.8943 85.7815 83.8926C93.551 83.8858 101.322 83.8858 109.092 83.8943C110.72 83.896 111.661 84.7359 111.634 86.1074C111.608 87.4261 110.677 88.2251 109.111 88.2285C105.226 88.2371 101.341 88.2302 97.4563 88.2302Z" />
|
||
<path
|
||
d="M76.0404 61.1209C75.0222 61.1209 74.0041 61.1498 72.9893 61.1141C71.6414 61.0681 70.7651 60.1668 70.7873 58.9146C70.8078 57.7135 71.6756 56.8224 72.9637 56.7986C74.9983 56.7611 77.0329 56.7611 79.0676 56.7969C80.4069 56.8207 81.2901 57.7493 81.2696 59.0032C81.2491 60.2043 80.3881 61.0664 79.0932 61.1141C78.0767 61.1498 77.0586 61.1192 76.0404 61.1209Z" />
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- OBJECT SETUP AND FIELD MAPPING SVG LINE -->
|
||
<div class="slds-align_absolute-center removeMarginLine">
|
||
<div class={fieldColor}>
|
||
|
||
<svg width="100%" height="3%" viewBox="0 0 100 2" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<line x1="2.18557e-07" y1="2.50006" x2="279" y2="2.50009"
|
||
stroke-width="5" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FIELD MAPPING SVG LINE -->
|
||
<div class={fieldColor}>
|
||
|
||
<svg width="50" height="50" viewBox="0 0 154 154" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="77" cy="77" r="74.5" stroke="#AFAFAF" stroke-width="5" />
|
||
<path
|
||
d="M125.87 116.717C125.781 116.389 125.684 116.062 125.602 115.733C124.008 109.248 116.84 106.141 111.03 109.421C110.843 109.526 110.654 109.629 110.396 109.772C109.145 108.505 107.921 107.236 106.654 106.01C106.304 105.672 105.856 105.345 105.399 105.228C104.549 105.011 103.835 105.377 103.405 106.142C102.95 106.952 103.09 107.74 103.726 108.4C104.801 109.51 105.896 110.599 106.999 111.682C107.244 111.924 107.554 112.101 107.837 112.31C106.518 114.436 105.918 116.544 106.134 118.858C106.548 123.308 109.792 126.884 114.179 127.707C114.359 127.741 114.53 127.821 114.706 127.881C115.588 127.881 116.472 127.881 117.355 127.881C117.524 127.818 117.69 127.734 117.865 127.696C120.727 127.086 123.001 125.582 124.428 123.03C125.089 121.846 125.4 120.468 125.87 119.178C125.87 118.357 125.87 117.537 125.87 116.717ZM122.081 117.955C122.094 121.297 119.382 124.059 116.053 124.092C112.669 124.125 109.886 121.397 109.861 118.019C109.834 114.66 112.63 111.855 115.989 111.873C119.331 111.891 122.068 114.622 122.081 117.955Z" />
|
||
<path
|
||
d="M95.1354 52.2997C93.0386 54.3965 90.9478 56.4873 88.854 58.5811C79.5338 50.8815 66.9277 52.2684 59.5109 58.5543C56.42 55.4575 53.3336 52.3652 50.1624 49.188C52.158 46.1805 52.777 42.7473 51.6386 39.0969C50.7919 36.3811 49.1118 34.2516 46.6816 32.753C41.7663 29.7202 35.5906 30.6994 31.7779 35.0938C28.1037 39.3306 28.0665 45.7072 31.7095 50.0392C35.3882 54.4143 41.8869 55.706 47.1355 52.194C50.2636 55.3206 53.3738 58.4278 56.4661 61.5172C49.5076 71.2273 49.4615 81.046 56.6075 90.9689C56.4557 91.1312 56.2504 91.3633 56.0316 91.5821C53.2012 94.4155 50.3588 97.237 47.5448 100.087C47.0894 100.548 46.7784 100.676 46.1236 100.34C42.5372 98.4989 39.0237 98.7326 35.8331 101.2C32.7348 103.596 31.5666 106.874 32.403 110.691C33.2586 114.596 35.7885 117.077 39.6814 117.904C43.4985 118.715 46.7724 117.507 49.1415 114.388C51.5032 111.279 51.7488 107.864 50.0567 104.331C49.9213 104.05 49.7621 103.779 49.646 103.566C52.9541 100.285 56.234 97.0316 59.5243 93.7681C68.1971 100.993 80.7049 100.502 88.9165 93.6C90.0177 94.7042 91.1249 95.8158 92.2335 96.926C92.7901 97.484 93.3452 98.0436 93.9062 98.5986C94.991 99.6731 96.1235 99.7966 96.9584 98.9394C97.7887 98.0867 97.6444 96.9825 96.5536 95.8843C94.9524 94.2741 93.3481 92.6684 91.7469 91.0597C91.7037 91.0166 91.6799 90.9541 91.6799 90.9555C98.7992 81.0862 98.765 71.2675 91.7752 61.4666C93.8139 59.4279 95.8988 57.3415 98.0566 55.1837C101.219 57.3921 104.834 58.1555 108.756 57.1629C111.817 56.3891 114.233 54.648 116.029 52.069C119.641 46.8858 118.868 39.8648 114.237 35.5239C109.654 31.2277 102.683 30.9286 97.6771 34.7977C93.1324 38.3172 90.6561 45.5867 95.1354 52.2997ZM86.4997 61.7166C92.735 66.7346 94.8809 76.034 91.6799 83.558C88.3763 91.3276 80.1915 96.1387 72.0588 95.097C63.4053 93.9869 56.6879 87.5894 55.3218 79.2156C54.0732 71.5621 57.9751 64.4816 61.7773 61.8982C61.7773 62.7271 61.755 63.5098 61.7818 64.2926C61.877 67.0754 63.8369 69.0442 66.6093 69.0606C71.6228 69.0903 76.6364 69.0903 81.6499 69.0606C84.4729 69.0442 86.4476 67.0337 86.4968 64.2182C86.5116 63.4414 86.4997 62.6631 86.4997 61.7166ZM105.567 35.887C110.52 35.9019 114.527 39.9243 114.511 44.8664C114.495 49.7981 110.438 53.825 105.511 53.8012C100.567 53.7774 96.5461 49.7371 96.5625 44.8099C96.5789 39.8737 100.616 35.8721 105.567 35.887ZM40.5684 34.7932C44.875 34.7828 48.4049 38.2963 48.4094 42.6C48.4138 46.8963 44.8616 50.441 40.5758 50.4172C36.2974 50.3934 32.8092 46.9171 32.7869 42.6551C32.7631 38.3484 36.2721 34.8052 40.5684 34.7932ZM74.2166 65.2867C71.788 65.2867 69.3609 65.2926 66.9322 65.2837C65.8712 65.2792 65.5735 64.992 65.5616 63.9473C65.5468 62.5916 65.5825 61.2345 65.5453 59.8803C65.5304 59.3267 65.7119 59.0335 66.2268 58.8103C71.5187 56.5171 76.7971 56.5186 82.0844 58.8237C82.5562 59.029 82.7407 59.2954 82.7258 59.8193C82.6886 61.1735 82.7199 62.5306 82.7109 63.8863C82.7035 64.9995 82.4267 65.2792 81.3091 65.2837C78.9474 65.2926 76.5828 65.2867 74.2166 65.2867ZM35.9477 108.623C35.9671 105.463 38.5639 102.898 41.6919 102.947C44.7932 102.995 47.3334 105.56 47.3379 108.651C47.3439 111.788 44.7545 114.373 41.616 114.364C38.4552 114.354 35.9284 111.795 35.9477 108.623Z" />
|
||
<path
|
||
d="M100.35 104.237C101.423 104.24 102.249 103.398 102.228 102.324C102.209 101.319 101.354 100.474 100.357 100.471C99.3721 100.468 98.4911 101.327 98.4629 102.315C98.4316 103.358 99.2932 104.234 100.35 104.237Z" />
|
||
<path
|
||
d="M84.6113 80.6312C84.586 74.8855 79.8374 70.1725 74.1006 70.1978C68.3668 70.2231 63.6241 75.0015 63.6643 80.7145C63.7045 86.4632 68.4561 91.1776 74.184 91.1463C79.9326 91.1181 84.6351 86.3739 84.6113 80.6312ZM80.827 80.6788C80.824 84.3381 77.7897 87.368 74.1348 87.365C70.4815 87.3605 67.4427 84.3188 67.4472 80.6698C67.4516 77.018 70.4934 73.9807 74.1453 73.9836C77.8001 73.9851 80.83 77.0224 80.827 80.6788Z" />
|
||
<path
|
||
d="M80.827 80.6786C80.83 77.0222 77.8001 73.9864 74.1438 73.9819C70.4919 73.979 67.4501 77.0163 67.4457 80.6681C67.4412 84.3171 70.48 87.3603 74.1334 87.3633C77.7897 87.3677 80.824 84.3364 80.827 80.6786Z" />
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- FIELD MAPPING AND RECORD TYPE SVG LINE -->
|
||
<div class="slds-align_absolute-center removeMarginLine">
|
||
<div class={recordColor}>
|
||
|
||
<svg width="100%" height="3%" viewBox="0 0 100 2" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<line x1="2.18557e-07" y1="2.50006" x2="279" y2="2.50009"
|
||
stroke-width="5" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RECORD TYPE SVG -->
|
||
<div class={recordColor}>
|
||
|
||
<svg width="50" height="50" viewBox="0 0 154 154 " fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="77" cy="77" r="74.5" stroke="#AFAFAF" stroke-width="5" />
|
||
<path
|
||
d="M70.185 20.5866C70.9187 20.7877 71.6733 20.9375 72.3849 21.2011C75.7611 22.4522 78.0165 24.8061 79.0555 28.2531C79.2746 28.9827 79.5895 29.1727 80.2969 29.1547C82.0627 29.1089 83.8298 29.1283 85.597 29.1436C87.2823 29.1589 88.0119 29.9051 88.0383 31.6002C88.0466 32.1592 88.0397 32.7182 88.0397 33.3923C90.2632 33.3923 92.3868 33.3562 94.5091 33.4006C98.1072 33.4741 100.998 34.9722 103.131 37.8754C104.52 39.766 105.129 41.9257 105.138 44.2505C105.156 48.3188 105.144 52.3858 105.144 56.4542C105.144 56.5873 105.145 56.7219 105.133 56.8537C105.012 58.1575 104.126 59.0217 102.941 58.9912C101.797 58.9621 100.917 58.1131 100.866 56.8481C100.807 55.3833 100.845 53.9144 100.844 52.4468C100.841 49.6463 100.876 46.8444 100.83 44.0452C100.775 40.6454 98.4734 38.0196 95.0903 37.7325C92.8127 37.5397 90.5046 37.6964 88.0411 37.6964C88.0411 38.2679 88.0438 38.8186 88.0411 39.3693C88.0147 43.5292 85.3667 46.1883 81.2276 46.191C72.9605 46.1966 64.692 46.198 56.4249 46.191C52.3718 46.1869 49.6712 43.482 49.6351 39.4137C49.6295 38.8574 49.6337 38.3026 49.6337 37.8116C46.9497 37.8116 44.3697 37.5799 41.8493 37.8726C39.0141 38.2013 37.0097 40.8826 36.8433 43.9231C36.8239 44.2893 36.8308 44.6569 36.8308 45.0231C36.8308 62.9957 36.8294 80.967 36.8322 98.9396C36.8322 102.373 38.548 104.875 41.5206 105.68C42.3112 105.893 43.1657 105.954 43.9896 105.956C53.3914 105.974 62.7917 105.967 72.1935 105.968C72.5597 105.968 72.9286 105.958 73.2921 105.992C74.4253 106.093 75.1993 106.917 75.2243 108.025C75.2493 109.124 74.5044 110.027 73.4114 110.188C73.084 110.236 72.7455 110.218 72.4126 110.218C62.8777 110.219 53.3428 110.149 43.8093 110.244C37.5562 110.307 33.3395 105.797 32.7319 101.26C32.7208 101.174 32.6321 101.097 32.5793 101.016C32.5793 81.5412 32.5793 62.0678 32.5793 42.5929C32.6459 42.4126 32.7361 42.2378 32.7735 42.0519C33.2216 39.8326 34.2425 37.9253 35.8848 36.3662C37.9294 34.4243 40.3748 33.4311 43.192 33.3978C45.3129 33.3729 47.4338 33.3923 49.6337 33.3923C49.6337 32.8111 49.6323 32.3506 49.6337 31.8901C49.6434 29.8455 50.3495 29.1436 52.4121 29.1394C54.3748 29.1353 56.3376 29.1381 58.3336 29.1381C58.4293 28.844 58.5139 28.5943 58.5902 28.3446C59.6361 24.9435 61.8194 22.5826 65.1193 21.2718C65.8517 20.9819 66.6298 20.8099 67.3872 20.5852C68.3179 20.5866 69.2514 20.5866 70.185 20.5866ZM83.766 33.5199C83.637 33.4616 83.5788 33.4131 83.5219 33.4131C81.7894 33.4034 80.0569 33.3951 78.3258 33.3937C75.9345 33.3909 75.4102 32.9137 75.1993 30.5376C74.8955 27.1337 71.5762 24.4621 68.1917 24.8991C64.8821 25.3263 62.782 27.6122 62.438 31.1618C62.2924 32.671 61.5503 33.3645 60.0467 33.3909C59.6139 33.3992 59.1811 33.3923 58.7469 33.3923C57.1601 33.3923 55.5733 33.3923 53.9309 33.3923C53.9309 35.3606 53.9296 37.1902 53.9309 39.0197C53.9337 41.2876 54.5843 41.9437 56.8383 41.9451C64.8335 41.9465 72.8302 41.9465 80.8254 41.9424C81.2554 41.9424 81.6965 41.9326 82.114 41.8453C83.0697 41.6441 83.705 40.9991 83.7383 40.0587C83.8187 37.8712 83.766 35.6796 83.766 33.5199Z" />
|
||
<path
|
||
d="M79.5424 95.2235C79.5895 79.8878 92.0151 67.5107 107.318 67.5592C122.638 67.6078 135.037 80.0514 135 95.34C134.962 110.633 122.474 123.071 107.202 123.028C91.8986 122.984 79.4952 110.516 79.5424 95.2235ZM130.744 95.2693C130.74 82.3526 120.161 71.7885 107.248 71.8079C94.3039 71.8273 83.7813 82.3609 83.7897 95.2929C83.798 108.218 94.3621 118.783 107.27 118.774C120.179 118.765 130.747 108.182 130.744 95.2693Z" />
|
||
<path
|
||
d="M68.8824 54.7509C75.682 54.7509 82.4815 54.7509 89.2811 54.7523C89.6473 54.7523 90.0162 54.7426 90.3797 54.7772C91.4824 54.8827 92.2966 55.7524 92.3202 56.8288C92.3424 57.8469 91.5948 58.7693 90.5642 58.9607C90.2729 59.0148 89.9663 59.0023 89.6667 59.0023C75.8013 59.0037 61.9358 59.0051 48.0704 58.9982C47.6446 58.9982 47.1951 58.9732 46.7957 58.8428C45.8566 58.5363 45.2976 57.6166 45.3947 56.6651C45.4959 55.6664 46.2672 54.8868 47.2867 54.7828C47.6501 54.7453 48.0191 54.755 48.3853 54.755C55.2181 54.7495 62.051 54.7509 68.8824 54.7509Z" />
|
||
<path
|
||
d="M62.3811 71.8065C57.5485 71.8065 52.7158 71.8356 47.8845 71.7732C47.2215 71.7649 46.3657 71.475 45.9634 71.0034C45.5695 70.5415 45.4654 69.6593 45.5514 69.0018C45.6569 68.1973 46.3365 67.7146 47.173 67.5967C47.5336 67.5453 47.904 67.5564 48.2702 67.5564C57.7343 67.5551 67.1999 67.5551 76.6641 67.5551C76.7639 67.5551 76.8638 67.5537 76.9637 67.5551C78.5561 67.5745 79.552 68.4178 79.5187 69.7175C79.4854 70.9951 78.5158 71.8024 76.9775 71.8037C72.113 71.8107 67.247 71.8065 62.3811 71.8065Z" />
|
||
<path
|
||
d="M58.2282 80.3623C61.7223 80.3637 65.2178 80.3498 68.7119 80.3706C70.0685 80.379 70.9937 81.2875 70.9798 82.4998C70.9659 83.7066 70.02 84.5708 68.6703 84.611C68.637 84.6124 68.6037 84.611 68.5704 84.611C61.6474 84.611 54.7244 84.6068 47.8028 84.6151C46.775 84.6165 45.9843 84.2545 45.5612 83.2794C45.2048 82.461 45.3074 81.619 45.9732 81.0864C46.4712 80.6869 47.2077 80.4039 47.8458 80.3928C51.3038 80.3262 54.766 80.3609 58.2282 80.3623Z" />
|
||
<path
|
||
d="M102.778 100.825C106.616 96.4387 110.254 92.2788 113.894 88.1203C114.683 87.2187 115.456 86.299 116.271 85.421C117.174 84.4486 118.384 84.3515 119.297 85.1283C120.224 85.919 120.326 87.2312 119.442 88.2451C114.543 93.8712 109.631 99.4862 104.704 105.087C103.679 106.252 102.435 106.261 101.313 105.15C98.5913 102.455 95.8851 99.7428 93.1858 97.0255C92.1316 95.9643 92.0664 94.6452 92.9805 93.7602C93.8627 92.9044 95.1499 92.9779 96.175 93.9905C98.1419 95.9324 100.092 97.8924 102.038 99.8565C102.293 100.116 102.485 100.438 102.778 100.825Z" />
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- RECORD TYPE AND FINISHED SVG LINE -->
|
||
<div class="slds-align_absolute-center removeMarginLine">
|
||
<div class={finishColor}>
|
||
|
||
<svg width="100%" height="3%" viewBox="0 0 100 2" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<line x1="2.18557e-07" y1="2.50006" x2="279" y2="2.50009"
|
||
stroke-width="5" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FINISHED SVG -->
|
||
<div class={finishColor}>
|
||
|
||
<svg width="50" height="50" viewBox="0 0 154 157" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="77" cy="77" r="74.5" stroke="#AFAFAF" stroke-width="5" />
|
||
<path
|
||
d="M65.125 78.2305C61.6 78.529 58.3405 78.775 55.087 79.09C52.822 79.309 50.569 79.654 48.3055 79.8865C47.662 79.9525 47.4295 80.2165 47.3245 80.8225C47.0485 82.3945 46.681 83.95 46.4035 85.5235C46.2295 86.5045 45.706 87.109 44.7625 87.367C37.837 89.2615 30.91 91.1545 23.9845 93.0475C23.128 93.2815 22.261 93.1345 21.889 92.353C21.604 91.7545 21.517 90.8485 21.7615 90.253C22.303 88.933 23.0815 87.703 23.821 86.47C24.169 85.891 24.124 85.477 23.671 84.9895C23.0455 84.316 22.447 83.6125 21.9085 82.8715C20.9575 81.565 21.5065 80.0785 23.086 79.744C24.8815 79.3645 26.692 79.0435 28.5055 78.763C29.905 78.547 30.8545 79.1965 31.003 80.3545C31.1425 81.4345 30.412 82.2925 29.104 82.552C28.4785 82.678 27.8485 82.7755 26.947 82.9315C28.7725 84.5275 28.825 86.2255 27.5215 88.1035C30.7405 87.2245 33.9565 86.3455 37.291 85.435C37.057 85.123 36.8905 84.8785 36.7015 84.6535C35.4985 83.2225 34.8715 81.574 34.864 79.705C34.8505 76.627 34.8505 73.549 34.8625 70.4695C34.8685 69.0415 35.383 68.3785 36.778 68.1925C44.65 67.1455 52.5295 66.1315 60.403 65.107C60.67 65.0725 60.937 65.044 61.4095 64.987C60.727 63.5605 60.196 62.1835 59.452 60.934C55.4815 54.2815 51.4675 47.656 47.4445 41.035C46.6315 39.6985 46.129 38.314 46.288 36.7285C46.549 34.1575 48.2995 32.0335 50.7415 31.3405C53.2315 30.6325 55.9855 31.495 57.421 33.6775C59.482 36.8125 61.411 40.0375 63.3565 43.2475C63.9835 44.281 63.655 45.4075 62.701 45.946C61.7995 46.4545 60.736 46.1845 60.1015 45.2215C59.4235 44.1925 58.7995 43.129 58 41.833C56.929 42.9715 55.921 43.9765 55.012 45.064C54.841 45.268 54.9415 45.8755 55.1215 46.1755C56.8195 49.024 58.642 51.7975 60.265 54.6865C61.963 57.709 63.4645 60.841 65.0905 63.9055C65.278 64.2595 65.7085 64.7365 66.016 64.732C68.5675 64.684 71.116 64.5355 73.8205 64.408C73.279 63.6745 72.712 63.106 72.3865 62.4235C71.9455 61.498 71.326 60.442 71.4295 59.515C71.671 57.3505 70.4635 56.5675 68.8795 55.591C67.177 54.541 65.722 53.0455 64.279 51.6235C63.3025 50.662 63.4225 49.411 64.333 48.6805C65.194 47.9875 66.292 48.1645 67.1785 49.15C67.8895 49.9405 68.5885 50.743 69.388 51.6475C69.388 48.109 69.3805 44.9335 69.3895 41.758C69.4045 36.0565 73.513 31.753 78.943 31.738C84.4285 31.723 88.5535 36.0325 88.5685 41.8105C88.5775 44.9605 88.57 48.109 88.57 51.2605C90.055 50.1895 91.2505 48.673 92.2765 47.005C94.894 42.754 97.4935 38.4925 100.129 34.2535C101.764 31.6255 104.596 30.538 107.349 31.4155C111.262 32.6635 112.888 37.0285 110.724 40.6615C108.373 44.6065 105.913 48.487 103.561 52.4305C101.517 55.8565 99.544 59.3275 97.567 62.794C97.1965 63.4435 96.949 64.162 96.5755 65.0095C98.599 65.2 100.491 65.3125 102.364 65.563C108.574 66.3955 114.781 67.255 120.982 68.155C122.691 68.4025 123.097 68.9935 123.102 70.75C123.109 72.9085 123.109 75.067 123.115 77.2255C123.115 77.3035 123.15 77.38 123.201 77.593C125.686 78.0505 128.224 78.52 130.764 78.9865C132.099 79.231 133.44 79.444 134.767 79.7215C136.489 80.083 137.041 81.5755 135.978 82.9765C135.423 83.7085 134.748 84.3535 134.244 85.114C134.04 85.423 133.98 86.017 134.137 86.3455C134.722 87.568 135.409 88.744 136.084 89.92C136.558 90.7465 136.746 91.5685 136.108 92.3755C135.483 93.166 134.68 93.235 133.734 92.9725C126.928 91.093 120.115 89.236 113.302 87.385C112.309 87.1165 111.739 86.5345 111.559 85.501C111.291 83.968 110.905 82.4545 110.659 80.9185C110.544 80.1925 110.248 79.909 109.524 79.8535C108.411 79.771 107.304 79.5865 106.197 79.435C104.758 79.24 104.037 78.4825 104.134 77.287C104.23 76.114 105.102 75.4375 106.557 75.625C110.319 76.105 114.07 76.657 117.825 77.182C118.257 77.2435 118.689 77.3035 119.196 77.374C119.196 75.478 119.196 73.6525 119.196 71.71C92.3815 67.048 65.5855 67.0495 38.6935 71.728C38.6935 73.372 38.6905 74.9245 38.6965 76.477C38.698 76.75 38.743 77.023 38.7745 77.371C41.311 76.993 43.7905 76.603 46.276 76.258C59.083 74.4865 71.9515 73.6975 84.8785 74.086C88.9915 74.209 93.0985 74.4805 97.207 74.692C97.7245 74.719 98.2465 74.7625 98.7535 74.866C99.802 75.082 100.33 75.769 100.308 76.828C100.285 77.8315 99.487 78.6145 98.413 78.589C96.8575 78.5515 95.3035 78.403 93.748 78.31C93.52 78.2965 93.2875 78.3325 92.878 78.3535C92.7235 80.578 92.539 82.7575 92.4265 84.94C92.335 86.746 91.7425 87.3805 89.932 87.382C83.578 87.388 77.224 87.3835 70.87 87.3835C70.4335 87.3835 69.9985 87.3835 69.388 87.3835C69.388 87.901 69.388 88.363 69.388 88.8235C69.388 98.257 69.388 107.693 69.3865 117.127C69.3865 117.527 69.4255 117.935 69.355 118.324C69.1675 119.356 68.527 119.983 67.4695 119.983C66.412 119.983 65.77 119.36 65.584 118.325C65.5135 117.937 65.5525 117.527 65.5525 117.128C65.551 106.733 65.578 96.34 65.5315 85.945C65.5225 83.4475 65.2735 80.941 65.125 78.2305ZM84.0145 64.4035C86.689 64.5265 89.1145 64.6 91.5355 64.771C92.3185 64.8265 92.608 64.537 92.9365 63.8665C94.3555 60.967 95.7745 58.0615 97.3615 55.2535C99.088 52.195 100.999 49.243 102.832 46.246C103.105 45.802 103.426 45.433 102.874 44.902C101.899 43.9645 101.001 42.9475 99.9595 41.8465C98.5285 44.1715 97.1755 46.2835 95.908 48.448C93.814 52.021 91.036 54.8455 87.292 56.6875C87.0085 56.827 86.6725 57.2545 86.686 57.535C86.797 60.1285 86.059 62.3995 84.0145 64.4035ZM73.2295 43.3C73.2295 45.304 73.1965 47.212 73.237 49.117C73.3 52.102 75.619 54.538 78.538 54.7525C81.529 54.97 84.31 52.8835 84.6295 49.8745C84.8605 47.722 84.673 45.5245 84.673 43.3C80.8645 43.3 77.1295 43.3 73.2295 43.3ZM88.546 83.491C88.723 81.6715 88.8925 79.933 89.0785 78.025C82.3045 78.025 75.628 78.025 68.8675 78.025C69.058 79.9555 69.229 81.6925 69.406 83.491C75.7735 83.491 82.1035 83.491 88.546 83.491ZM120.798 85.4725C124.002 86.3425 127.216 87.214 130.876 88.2085C129.139 86.2165 129.171 84.52 131.028 82.93C128.166 82.4125 125.586 81.946 123.12 81.502C122.329 82.855 121.594 84.112 120.798 85.4725ZM84.2935 39.3685C83.353 36.805 80.8435 35.2855 78.292 35.6155C76.0375 35.9065 73.972 37.636 73.8145 39.3685C77.272 39.3685 80.7295 39.3685 84.2935 39.3685ZM82.723 57.8275C80.173 58.8895 77.695 58.804 75.2185 57.8545C75.031 60.5755 76.693 62.4865 79.06 62.4385C81.376 62.3905 82.9735 60.448 82.723 57.8275ZM102.174 38.251C103.39 39.4675 104.499 40.576 105.604 41.6815C106.098 40.876 106.683 39.928 107.265 38.977C107.368 38.8075 107.472 38.6365 107.556 38.455C108.135 37.2445 107.791 35.9635 106.723 35.3155C105.646 34.6645 104.325 34.93 103.564 36.019C102.997 36.832 102.514 37.7005 102.174 38.251ZM55.9255 38.4505C55.42 37.648 54.919 36.742 54.3085 35.9125C53.5585 34.8955 52.252 34.687 51.2155 35.3245C50.2405 35.923 49.7815 37.1875 50.3215 38.2495C50.9635 39.5065 51.7555 40.6885 52.5055 41.9395C53.6995 40.7215 54.7795 39.619 55.9255 38.4505ZM43.4605 80.578C41.9365 80.8225 40.5865 81.0385 39.217 81.2575C39.8275 82.8955 41.293 83.7115 42.913 83.3665C43.0765 82.531 43.2445 81.676 43.4605 80.578ZM115.063 83.4205C116.865 83.644 118.306 82.777 118.689 81.2365C117.33 81.0265 115.977 80.8165 114.507 80.59C114.718 81.676 114.894 82.5595 115.063 83.4205Z"
|
||
fill="#AFAFAF" />
|
||
<path
|
||
d="M80.899 115.224C80.899 120.444 80.9005 125.556 80.899 130.666C80.899 132.883 80.344 133.447 78.166 133.45C74.8105 133.452 71.4565 133.453 68.101 133.45C66.202 133.447 65.5645 132.82 65.5555 130.963C65.5495 129.804 65.5255 128.644 65.566 127.486C65.671 124.471 68.0875 122.035 71.104 121.951C73.051 121.896 75.001 121.941 77.0635 121.941C77.0635 121.708 77.0635 121.278 77.0635 120.846C77.0635 113.253 77.0635 105.663 77.0635 98.0696C77.0635 97.7891 77.056 97.5086 77.065 97.2311C77.107 95.9126 77.848 95.0816 78.9745 95.0786C80.1025 95.0756 80.884 95.9066 80.8915 97.2221C80.9125 100.777 80.8945 104.335 80.902 107.892C80.9035 108.369 80.8945 108.859 80.9965 109.32C81.421 111.243 83.2585 112.543 85.174 112.318C87.1 112.092 88.5505 110.49 88.5625 108.45C88.5895 103.696 88.5715 98.9396 88.573 94.1846C88.573 93.8651 88.5595 93.5456 88.579 93.2261C88.6495 92.0171 89.443 91.2146 90.5335 91.2386C91.573 91.2626 92.338 92.0411 92.401 93.1886C92.4385 93.8651 92.4115 94.5476 92.4115 95.2256C92.4115 99.3011 92.215 103.387 92.458 107.451C92.821 113.581 87.1045 118.117 80.899 115.224ZM77.062 129.567C77.062 128.929 77.077 128.413 77.059 127.899C77.011 126.505 76.303 125.805 74.884 125.778C73.7305 125.755 72.574 125.761 71.4205 125.779C70.315 125.796 69.592 126.358 69.43 127.452C69.328 128.136 69.412 128.848 69.412 129.568C72.007 129.567 74.4625 129.567 77.062 129.567Z"
|
||
fill="#AFAFAF" />
|
||
</svg>
|
||
</div>
|
||
</lightning-progress-indicator>
|
||
</div>
|
||
</lightning-layout-item>
|
||
|
||
<!-- OLD PROGRESS PATH (removed from view — the real,
|
||
functional navigation it depended on, optionList +
|
||
pathHandler, now drives the new left step nav in the
|
||
grid below via the navSteps getter and handleNavClick,
|
||
which simply calls this SAME pathHandler with a
|
||
synthetic { target: { value } } event). Kept in the
|
||
DOM (hidden) rather than deleted, as a zero-risk
|
||
fallback — no functionality was altered. -->
|
||
<lightning-layout-item size="12" style="display:none">
|
||
<div class="slds-m-around_small">
|
||
<lightning-progress-indicator current-step={usercurrentvalue} type="path"
|
||
variant="shaded">
|
||
<template for:each={optionList} for:item="optn">
|
||
<lightning-progress-step key={optn.label} label={optn.label} value={optn.value}
|
||
onclick={pathHandler}></lightning-progress-step>
|
||
</template>
|
||
</lightning-progress-indicator>
|
||
</div>
|
||
</lightning-layout-item>
|
||
</lightning-layout>
|
||
<lightning-layout multiple-rows="true">
|
||
<div class="slds-grid slds-gutters slds-p-around_medium slds-grid_align-stretch sw-shell-grid" style="width: 100%;padding-right:0;">
|
||
|
||
<!-- NEW LEFT STEP NAV — restyled to match the reference HTML
|
||
wizard mockup's left stepper. Reuses the real optionList
|
||
and setupColor/credentialColor/objectColor/fieldColor/
|
||
recordColor/finishColor trackers via the navSteps getter,
|
||
and navigates via the real, untouched pathHandler(event)
|
||
(called through handleNavClick with a synthetic
|
||
{ target: { value } } object — same shape the old
|
||
lightning-progress-step onclick passed). -->
|
||
<div class="slds-col sw-nav-col">
|
||
<nav class="sw-nav">
|
||
<!-- Setup Progress bar (display-only) -->
|
||
<div class="sw-progress-wrap">
|
||
<div class="sw-progress-label-row">
|
||
<span class="sw-progress-label">Setup Progress</span>
|
||
<span class="sw-progress-count">{setupProgressLabel}</span>
|
||
</div>
|
||
<div class="sw-progress-track">
|
||
<div class="sw-progress-fill" style={setupProgressBarStyle}></div>
|
||
</div>
|
||
</div>
|
||
<template for:each={navSteps} for:item="step">
|
||
<div key={step.key} class="nav-item" data-value={step.value} onclick={handleNavClick}>
|
||
<div class="nav-item-rail">
|
||
<div class={step.topLineClass}></div>
|
||
<div class={step.circleClass}>
|
||
<template if:true={step.done}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 6L9 17l-5-5"></path>
|
||
</svg>
|
||
</template>
|
||
<template if:true={step.active}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M6 9l6 6 6-6"></path>
|
||
</svg>
|
||
</template>
|
||
<template if:true={step.showIcon}>
|
||
<template if:true={step.isShield}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 3l7 3v5c0 4.2-2.8 7.6-7 8.7-4.2-1.1-7-4.5-7-8.7V6l7-3z"></path>
|
||
<path d="M9.3 12l1.8 1.8L15 10"></path>
|
||
</svg>
|
||
</template>
|
||
<template if:true={step.isBag}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M5 8h14l-1 12H6L5 8z"></path>
|
||
<path d="M8.5 8V6a3.5 3.5 0 0 1 7 0v2"></path>
|
||
</svg>
|
||
</template>
|
||
<template if:true={step.isLayers}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 3l9 5-9 5-9-5 9-5z"></path>
|
||
<path d="M3 12l9 5 9-5"></path>
|
||
</svg>
|
||
</template>
|
||
<template if:true={step.isGrid}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M6 5v14M18 5v14"></path>
|
||
<path d="M6 8h5M13 8h5M6 16h5M13 16h5"></path>
|
||
</svg>
|
||
</template>
|
||
<template if:true={step.isTag}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 4h8l8 8-8 8-8-8V4z"></path>
|
||
<path d="M8 8h.01"></path>
|
||
</svg>
|
||
</template>
|
||
<template if:true={step.isCheck}>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z"></path>
|
||
<path d="M8.5 12l2.3 2.3L16 9"></path>
|
||
</svg>
|
||
</template>
|
||
</template>
|
||
</div>
|
||
<div class={step.lineClass}></div>
|
||
</div>
|
||
<div class={step.labelWrapClass}>
|
||
<span class={step.chipClass}>{step.label}</span>
|
||
<div class={step.titleClass}>{step.title}</div>
|
||
<div class="nav-desc">{step.desc}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="sw-nav-footer">
|
||
Made with <span class="sw-nav-footer-heart">♥</span> by <a href="https://syncmadeasy.com/" target="_blank" rel="noopener" class="sw-nav-footer-link">Sync Made Easy</a>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="slds-col slds-size_2.6-of-4 tall-column">
|
||
<!-- SHOPIFY IMAGES AND STORE NAME BUTTONS FOR PAGE NAVIGATION AT TOP -->
|
||
<template lwc:if={showStoreFromObjectSetupOnward}>
|
||
<div class="sw-hero-bar">
|
||
<div class="sw-hero-side">
|
||
<span class="sw-hero-icon sw-hero-icon_shopify">
|
||
<img src={StoreLogo} alt="Shopify" class="sw-hero-icon-img" />
|
||
</span>
|
||
<div>
|
||
<div class="sw-hero-name">Shopify</div>
|
||
<div class="sw-hero-sub">{storeName}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sw-hero-mid">
|
||
<div class="sw-hero-line-row">
|
||
<span class="sw-hero-line sw-hero-line_left"></span>
|
||
<span class="sw-hero-conn-pill">
|
||
<span class="sw-hero-conn-dot"></span>Connected & syncing
|
||
</span>
|
||
<span class="sw-hero-line sw-hero-line_right"></span>
|
||
</div>
|
||
<template lwc:if={showLastSynced}>
|
||
<div class="sw-hero-note">{lastSyncedText}</div>
|
||
</template>
|
||
</div>
|
||
|
||
<div class="sw-hero-side sw-hero-side_right">
|
||
<div class="sw-hero-text_right">
|
||
<div class="sw-hero-name">Salesforce</div>
|
||
<div class="sw-hero-sub">Source org</div>
|
||
</div>
|
||
<span class="sw-hero-icon sw-hero-icon_sf">
|
||
<img src={SFLogo} alt="Salesforce" class="sw-hero-icon-img" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<!-- CHILD COMPONENT SECTION -->
|
||
<lightning-layout-item>
|
||
<div lwc:if={processing} class="sw-loading-wrap">
|
||
<img style="max-width:30%;max-height:auto" src={pageLoadingGif} />
|
||
</div>
|
||
|
||
<!-- SETUP COMPONENT -->
|
||
<c-setup lwc:if={setupComponent} store-name={storeName} lwc:ref="setup"
|
||
onsave={childSaveEvent} onclosespinner={spinnerHandlerFalse}
|
||
onshowspinner={spinnerHandlerTrue}>
|
||
</c-setup>
|
||
|
||
<!-- SHOPIFY CREDENTIALS COMPONENT -->
|
||
<c-shopify-credentials lwc:if={shopifyCredentialComponent}
|
||
onmultistoreenableonhome={childHandler} lwc:ref="shopifyCredentials"
|
||
onsave={childSaveEvent} store-name={storeName} is-automatic={isAutomatic}
|
||
onexistingmultistore={checkExistingStoreHandler}
|
||
store-select-type={storeSelectionType}
|
||
shopify-credential-multi-store={shopifyCredentialMultiStore}
|
||
onclosespinner={spinnerHandlerFalse} onshowspinner={spinnerHandlerTrue}
|
||
onautomation={changeConfigurationType} onback={previousPage}>
|
||
|
||
</c-shopify-credentials>
|
||
<!-- OBJECT MAPPING COMPONENT -->
|
||
<c-object-mapping lwc:if={objectMappingComponent} lwc:ref="objectMapping"
|
||
onsave={childSaveEvent} store-name={storeName}
|
||
onback={previousPage}
|
||
onclosespinner={spinnerHandlerFalse} onshowspinner={spinnerHandlerTrue}>
|
||
</c-object-mapping>
|
||
|
||
<!-- FIELD MAPPING COMPONENT -->
|
||
<c-field-mapping-parent lwc:if={fieldMappingComponent} lwc:ref="fieldMappingParent"
|
||
onsave={childSaveEvent} store-name={storeName}
|
||
store-selection-type={storeSelectionType} is-new-store={isNewStore}
|
||
onback={previousPage}
|
||
onclosespinner={spinnerHandlerFalse} onshowspinner={spinnerHandlerTrue}>
|
||
</c-field-mapping-parent>
|
||
|
||
<!-- RECORD TYPE MAPPING COMPONENT -->
|
||
<c-record-type-mapping lwc:if={recordyTypeComponent} store-name={storeName}
|
||
lwc:ref="recordTypeMapping" onsave={childSaveEvent}
|
||
onclosespinner={spinnerHandlerFalse} onshowspinner={spinnerHandlerTrue}
|
||
store-selection-type={storeSelectionType}>
|
||
</c-record-type-mapping>
|
||
|
||
<!-- FINISHED PAGE COMPONENT -->
|
||
<c-finished lwc:if={finishedComponent} store-name={storeName} lwc:ref="finished"
|
||
onsave={finishedSaveEvent} onbatchcompleted={handleBatchCompleted}
|
||
oncheckbatchstatus={handleFinishBatchStatus}>
|
||
</c-finished>
|
||
<!-- BOTTOM NAVIGATION BUTTONS -->
|
||
<template lwc:if={spinnerClosed}>
|
||
|
||
<!-- HIDE BOTTOM BUTTONS -->
|
||
<lightning-layout-item size="12" class="sw-actions-wrap"
|
||
lwc:if={hideBottomButtons} ></lightning-layout-item>
|
||
<lightning-layout-item size="12" class="sw-actions-wrap" lwc:else>
|
||
<div class="sw-actions-global">
|
||
|
||
<!-- HIDE BACKWARD NAVIGATION BUTTON -->
|
||
<div lwc:if={hideLeftButton}></div>
|
||
<button lwc:else class="sw-btn-back" disabled={PreDisableButton} onclick={previousPage}>
|
||
<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>
|
||
{label.Back}
|
||
</button>
|
||
|
||
<!-- HIDE FORWARD NAVIGATION BUTTON -->
|
||
<div lwc:if={hideRightButton}></div>
|
||
<button lwc:else class="sw-btn-save" onclick={handleNextButton} disabled={GoDisableButton} title={label.Go_To_Next_Step_Button}>
|
||
{label.Go_To_Next_Step_Button}
|
||
<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>
|
||
</lightning-layout-item>
|
||
</template>
|
||
|
||
<!-- Global copyright footer shown at the bottom of every step -->
|
||
<div class="sw-copyright">
|
||
Copyright {currentYear} Product of <a href="https://hicglobalsolutions.com/" target="_blank" rel="noopener" class="sw-copyright-link">HIC Global Solutions</a> All Rights Reserved
|
||
</div>
|
||
</lightning-layout-item>
|
||
</div>
|
||
<div class="slds-col slds-size_1.4-of-4 tall-column-img sme-contact-support" style="padding-right:0;">
|
||
<!-- Shopify Images And Links -->
|
||
<lightning-layout-item size="4" class="slds-m-around_small sticky-box" style="margin-right:0;">
|
||
<div class="slds-grid slds-grid_align-end">
|
||
<div class="rail-card sme-panel" style="width: 300px;margin-right:0;margin-top: -19px; ">
|
||
|
||
<!-- Header banner -->
|
||
<!-- <div class="sme-panel-header">
|
||
<div class="sme-panel-header-icon">
|
||
<img src={SMELOGO} alt="Sync made easy" class="sme-panel-header-logo" />
|
||
</div>
|
||
<div class="sme-panel-header-text">
|
||
<div class="sme-panel-title"><b>Sync</b> made easy</div>
|
||
<div class="sme-panel-tagline">Your Shopify sync with Salesforce made easy</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="sme-panel-header">
|
||
<img src={SMELogoPNG} alt="Sync Made Easy" class="sme-panel-header-logo" />
|
||
</div>
|
||
|
||
<div class="slds-p-around_medium slds-text-align_center sme-box">
|
||
<!-- Support Person Avatar -->
|
||
<div class="sme-panel-avatar-wrap">
|
||
<img src={SupportAgent} alt="Support Agent" class="sme-panel-avatar" />
|
||
</div>
|
||
|
||
<!-- Greeting -->
|
||
<p class="contact-us-header">Hello, {greetingName}</p>
|
||
<p class="contact-us-text" style="margin-bottom: 1rem;">How can we assist you today?</p>
|
||
|
||
<!-- Online status pill -->
|
||
<div class="sme-online-pill">
|
||
<span class="sme-online-dot"></span>
|
||
<!-- Our team is online — we'll be with you shortly -->
|
||
We’re online — connect you shortly.
|
||
</div>
|
||
|
||
<!-- Links -->
|
||
<div class="custom-container" style="margin-top: 1.25rem;">
|
||
<!-- Store Link -->
|
||
<div class="link-row">
|
||
<lightning-icon icon-name="standard:store" alternative-text="Store"
|
||
size="small" class="custom-icon">
|
||
</lightning-icon>
|
||
<div class="sme-link-text-wrap">
|
||
<span class="sme-link-eyebrow">Multi-store</span>
|
||
<a class="custom-link" onclick={multipleStores}>
|
||
Having more than one store?
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Support Link -->
|
||
<div class="link-row">
|
||
<lightning-icon icon-name="action:web_link"
|
||
alternative-text="Web Link" size="x-small" class="custom-icon">
|
||
</lightning-icon>
|
||
<div class="sme-link-text-wrap">
|
||
<span class="sme-link-eyebrow">Need help? Reach out to us</span>
|
||
<a class="custom-link sme-link-teal" href="https://support.syncmadeasy.com/"
|
||
target="_blank">
|
||
support.syncmadeasy.com
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex;justify-content: center;align-items: center;gap:10px;"
|
||
class="slds-m-top_medium slds-align_absolute-center support-btn">
|
||
<!-- Contact Support Button -->
|
||
<button class="custom-support-button" onclick={openContactSupport}>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="sme-btn-icon"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
|
||
{label.Contact_support}
|
||
</button>
|
||
|
||
<!-- Reset Button -->
|
||
<button
|
||
class="custom-reset-button slds-button slds-grid"
|
||
onclick={resetDefaults}>
|
||
<span style="display:inline-flex;align-items:center;color:rgb(47, 107, 74);">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"></path><path d="M3 3v5h5"></path></svg>
|
||
</span>
|
||
{label.Reset_Default_Setting}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Upgrade to PRO Section -->
|
||
<div class="sme-upgrade-box">
|
||
<div class="sme-upgrade-icon">
|
||
<img src={SMEPRO} alt="Sync Made Easy PRO" class="sme-upgrade-icon-img" />
|
||
</div>
|
||
<div class="sme-upgrade-text">
|
||
<div class="sme-upgrade-title">Upgrade to <span class="sme-plan-pro-badge sme-upgrade-pro-badge">PRO</span></div>
|
||
<div class="sme-upgrade-sub">Move beyond simple data sync and accentuate the power of Sync Made Easy app with the bi-directional, and many more features: <a href="https://support.syncmadeasy.com/support/solutions/articles/1130000043885-complete-list-of-sme-pro-features" target="_blank" class="sme-upgrade-article-link">Article</a></div>
|
||
</div>
|
||
<a href="https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000JFgkpUAD"
|
||
target="_blank" class="sme-upgrade-chevron">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</lightning-layout-item>
|
||
</div>
|
||
</div>
|
||
|
||
</lightning-layout>
|
||
</lightning-layout-item>
|
||
</lightning-layout>
|
||
|
||
<template lwc:if={isModalOpen}>
|
||
<section style="display:flex;justify-content:center;align-items:center;position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10000;">
|
||
<div style="-ms-overflow-style:none;scrollbar-width:none;background:#ffffff;width:31.25rem;max-width:90vw;max-height:90vh;border-radius:22px;overflow:visible;box-shadow:0 24px 60px -18px rgba(23,43,32,.55), 0 0 0 1px rgba(95,168,50,.12);text-align:center;font-family:'Inter',sans-serif;">
|
||
|
||
<!-- Gradient Header -->
|
||
<div style="position:relative;background:linear-gradient(115deg,#84c25c 0%,#5fa832 55%,#3f9a86 100%);height:104px;border-radius:22px 22px 0 0;">
|
||
<!-- Store Icon Circle -->
|
||
<div style="position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);width:92px;height:92px;border-radius:50%;background:#fff;box-shadow:0 12px 26px -8px rgba(23,43,32,.35),0 0 0 6px rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;">
|
||
<img src={Store} alt="Store" style="width:44px;height:44px;object-fit:contain;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Store Selection -->
|
||
<div style="padding:54px 2rem 0;text-align:left;background:linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);" class="sme-reset-button-style">
|
||
<label style="display:block;font-size:14px;font-weight:600;color:#37453d;margin-bottom:8px;">Select a Store</label>
|
||
|
||
<lightning-combobox
|
||
label="Select a Store"
|
||
variant="label-hidden"
|
||
placeholder="Select a store"
|
||
value={selectedStore}
|
||
options={storeOptions}
|
||
onchange={handleStoreChange}>
|
||
</lightning-combobox>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- Footer Buttons -->
|
||
<div style="display:flex;justify-content:center;gap:1rem;padding:28px 2rem 30px;background:linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);border-radius:0 0 22px 22px;">
|
||
<button
|
||
style="font-family:'Inter',sans-serif;font-weight:700;font-size:14px;border-radius:10px;border:1px solid #e2e6e2;background:#f1f3f1;color:#37453d;padding:11px 28px;cursor:pointer;transition:all 0.2s ease;"
|
||
onclick={closeCertificateModal}>
|
||
{label.Cancel}
|
||
</button>
|
||
|
||
<button
|
||
style="font-family:'Inter',sans-serif;font-weight:700;font-size:14px;border:none;border-radius:10px;background:linear-gradient(120deg,#5fa832,#2f8fb0);color:#ffffff;padding:11px 32px;cursor:pointer;transition:all 0.2s ease;box-shadow:0 8px 22px -8px rgba(23,43,32,.45);"
|
||
onclick={handleCopyMapping}>
|
||
Save
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<!-- CONTACT SUPPORT MODAL -->
|
||
<template lwc:if={contactModel}>
|
||
|
||
<!-- Modal/Popup Box starts here -->
|
||
<section style="display:flex;justify-content:center;align-items:center;position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10000;">
|
||
<div class="cs-modal-card" style="width:37.5rem;max-width:90vw;max-height:92vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 24px 60px -18px rgba(23,43,32,.55), 0 0 0 1px rgba(95,168,50,.12);font-family:'Inter',sans-serif;">
|
||
<!-- Gradient top bar -->
|
||
<div style="height:6px;background:linear-gradient(90deg,#5fa832 0%,#3f9a86 50%,#2f8fb0 100%);"></div>
|
||
|
||
<!-- Body -->
|
||
<div style="padding:28px 32px 30px;background:linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);">
|
||
<h2 style="margin:0 0 22px;font-size:24px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(100deg,#5fa832,#2f8fb0);-webkit-background-clip:text;background-clip:text;color:transparent;">{label.Contact_support}</h2>
|
||
|
||
<template lwc:if={contactSupport}>
|
||
<label style="display:block;font-size:13.5px;font-weight:600;color:#37453d;margin-bottom:8px;"><span style="color:#c23934;margin-right:3px;">*</span>{label.Issue}</label>
|
||
<textarea rows="5"
|
||
placeholder={label.Please_write_your_issue_here}
|
||
oninput={issueHandler}
|
||
style="width:100%;box-sizing:border-box;font:inherit;font-size:14px;color:#26332b;background:#fff;border:1px solid #dce8e2;border-radius:11px;padding:13px 16px;resize:vertical;box-shadow:0 6px 18px -12px rgba(23,43,32,.22);height:122px;min-height:122px;max-height:calc(92vh - 230px);"></textarea>
|
||
|
||
<!-- Footer -->
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:22px;">
|
||
<button style="font-family:'Inter',sans-serif;font-weight:700;font-size:14px;border-radius:10px;background:#f1f3f1;color:#37453d;border:1px solid #e2e6e2;padding:11px 28px;cursor:pointer;transition:all 0.2s ease;" onclick={closeModal}>{label.Cancel}</button>
|
||
<button onclick={submitDetails} style="background:linear-gradient(120deg,#5fa832,#2f8fb0);color:white;border:none;border-radius:10px;padding:11px 32px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px -8px rgba(23,43,32,.45);">{label.Submit}</button>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- If get Any Error In Issue -->
|
||
<div lwc:if={supportEmailError} style="text-align:center;margin:4%;">
|
||
<img src={imageLogo.SendingMailFalse} style="height: 10%; width: 12%;" height="50" />
|
||
<div style="word-wrap: break-word;">
|
||
<p><b>{label.Issue_not_sent}</b><br />
|
||
<b>{label.Try_Again_Or_Contact_Us} </b>
|
||
<a target="_Top" href="https://support.syncmadeasy.com/"><b>support.syncmadeasy.com</b></a><br />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template lwc:if={supportEmailSent}>
|
||
|
||
<!-- Modal/Popup Box LWC starts here -->
|
||
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
|
||
aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
|
||
<div class="slds-modal__container">
|
||
|
||
<!-- Modal/Popup Box LWC header here -->
|
||
<header class="slds-modal__header modalHeader">
|
||
<span style="display: flex;justify-content: center ;align-items: center;">
|
||
<h2 class="slds-text-heading_medium slds-hyphenate text-color"><b
|
||
style="font-size:1.625rem ; float:left;margin-top: 1rem;margin-left: 0.2rem;display: flex;flex-wrap: wrap;">Email Sent Successfully</b></h2>
|
||
|
||
<!-- <button class="slds-button slds-button_icon slds-button_icon-inverse"
|
||
title="Close" onclick={closeModal} style="margin-right: 1rem;">
|
||
<lightning-primitive-icon icon-name="utility:close" alternative-text="close"
|
||
variant="bare" size="small"></lightning-primitive-icon>
|
||
<span class="slds-assistive-text">{label.Close}</span>
|
||
</button> -->
|
||
</span>
|
||
</header>
|
||
|
||
<!-- Modal/Popup Box to mail Issue -->
|
||
<div class="modalbody">
|
||
|
||
<!-- Modal/Popup Box If Issue Sent Successfully-->
|
||
<div class="slds-modal__content slds-p-around_medium" >
|
||
<div style="margin: 4%; text-align: center;">
|
||
<img src={imageLogo.SendingMailTrue} style="height: 10%; width: 12%;" height="50" />
|
||
<div style=" word-wrap: break-word;">
|
||
<P style="font-size: x-large;" class="text-style">
|
||
<b>{label.Thank_You}!</b><br />
|
||
{label.Support_Email_Submitted_Message}
|
||
<a href="https://calendly.com/sync-made-easy/sync-made-easy-sales?month=2026-02" target="blank" style="text-decoration: none;">support@syncmadeasy.com</a>
|
||
</P>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal/Popup Box LWC footer starts here -->
|
||
<footer class="slds-modal__footer modalFooter" lwc:if={supportEmailSent}>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
<div class="slds-backdrop slds-backdrop_open"></div>
|
||
</template>
|
||
|
||
<!-- STORE CHANGE WARNING MODAL STARTS HERE -->
|
||
<!-- <template lwc:if={warningModel}> -->
|
||
|
||
<!-- Modal/Popup Box LWC starts here -->
|
||
<!-- <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
|
||
aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
|
||
<div class="slds-modal__container"> -->
|
||
|
||
<!-- Modal/Popup Box LWC header here -->
|
||
<!-- <header class="slds-modal__header modalHeader">
|
||
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
|
||
title="Close" onclick={closeWarningModal}>
|
||
<lightning-primitive-icon icon-name="utility:close" alternative-text="close"
|
||
variant="bare" size="small"></lightning-primitive-icon>
|
||
<span class="slds-assistive-text">{label.Close}</span>
|
||
</button>
|
||
<h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate text-color"
|
||
style="font: size 20px;">{label.Warning}!</h2>
|
||
</header> -->
|
||
|
||
<!-- Modal/Popup Box If Issue Sent Successfully-->
|
||
<!-- <div class="slds-modal__content slds-p-around_medium modalbody" id="modal-content-id-4">
|
||
<div style="margin: 4%; text-align: center;">
|
||
<div style="word-wrap: break-word;">
|
||
<P>
|
||
<b class="text-style">{label.Store_Change_Lost_Message}</b>
|
||
</P>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- Modal/Popup Box LWC footer starts here -->
|
||
<!-- <footer class="slds-modal__footer modalFooter">
|
||
<lightning-button variant="success" onclick={closeWarningModal} title={label.Cancel}
|
||
label={label.Cancel} style="float: left;"></lightning-button>
|
||
<lightning-button variant="success" onclick={configureMultiStore} title={label.OK}
|
||
label={label.OK}></lightning-button>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
<div class="slds-backdrop slds-backdrop_open"></div>
|
||
</template> -->
|
||
|
||
<template lwc:if={warningModel}>
|
||
<section style="display:flex;justify-content:center;align-items:center;position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10000;">
|
||
<div style="-ms-overflow-style: none; scrollbar-width: none;background:linear-gradient(120deg, rgb(244, 250, 238) 0%, rgb(234, 243, 251) 100%);width:28rem;max-width:90vw;max-height: 90vh;border-radius:1.25rem;overflow:auto;box-shadow:rgba(23, 43, 32, 0.28) 0px 8px 20px -6px;text-align:center;font-family:'Inter',sans-serif;">
|
||
|
||
<!-- Gradient Header -->
|
||
<div class="wa-header">
|
||
<!-- Warning Icon (overlapping) -->
|
||
<div class="wa-icon-circle">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="40" height="40">
|
||
<!-- Rounded triangle -->
|
||
<path d="M256 32 C265 32,273 36,278 44 L470 424 C479 440,470 460,452 460 H60 C42 460,33 440,42 424 L234 44 C239 36,247 32,256 32 Z"
|
||
fill="none" stroke="black" stroke-width="36" stroke-linejoin="round"/>
|
||
<!-- Exclamation mark -->
|
||
<rect x="228" y="150" width="56" height="160" rx="14" ry="14" fill="black"/>
|
||
<circle cx="256" cy="365" r="30" fill="black"/>
|
||
</svg>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div style="padding:3rem 1.75rem 1rem;margin-top:0.25rem;">
|
||
<h2 style="font-size:21px;font-weight:800;margin-top: 1rem;margin-bottom:0.5rem;font-family:'inter',sans-serif;color:#000;align-items: center;">Warning Alert!</h2>
|
||
<p style="margin:0px;font-size:13.5px;color:rgb(95, 109, 99);line-height:1.55;text-wrap:pretty;">
|
||
By clicking on "Confirm", you will see all the connected stores. Please click on the 'Store name' for which you need to make changes.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div style="display:flex;justify-content:center;gap:1rem;padding:1.25rem 0;">
|
||
<button class="wa-cancel-btn" onclick={closeWarningModal}>{label.Cancel}</button>
|
||
<button class="wa-confirm-btn" onclick={configureMultiStore}>{label.OK}</button>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<!-- MULTISTORE CONTROLLER -->
|
||
<template lwc:if={multiStoreModel}>
|
||
<c-multi-store-controller onclosemodal={closeMultiStoreModal}
|
||
onmultistoreenable={demoHandler}></c-multi-store-controller>
|
||
</template>
|
||
</div>
|
||
</lightning-card>
|
||
<!-- <button title="Test Initialize" onclick={redirectToSalesforce}>Test Initialize</button>
|
||
<lightning-button variant="Destructive" label="Brand" title="Test Initialize" onclick={redirectToSalesforce} class="slds-m-left_x-small"></lightning-button> -->
|
||
</template> |