rajatbh2411
/
SyncMadeEasy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
SyncMadeEasy/force-app/main/default/lwc/finished/finished.html

473 lines
32 KiB
HTML
Raw Blame History

<template>
<lightning-layout >
<!-- MODAL: THIS IS USED TO SHOW ERROR MESSAGE TO THE USER AND GIVES OPTIONS TO RE-SYNC OR RE-CONFIGURE THE STORE-->
<template if:true={isModalOpen}>
<!-- 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">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleUpdateConfiguration}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
class="closeIcon"
size="small" ></lightning-icon>
<span class="slds-assistive-text">{label.Close}</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{showErrormessage}</h2>
</header>
<!-- Modal/Popup Box LWC body starts here -->
<div class="slds-modal__content slds-p-around_large__" id="modal-content-id-1">
<img src={SendingMailFalse} style="width: 80px; height: 70px;" class="slds-align_absolute-center"/><br/>
<div style="font-weight:bold; line-height:12px; font-size:16px">
<p class="slds-text-align_center" > -{label.Final_Page_First_error}</p> <br/>
<p class="slds-text-align_center">{label.for_more_help_contact_us_at}</p><br/>
<p class="slds-text-align_center" > <a href="https://support.syncmadeasy.com/">support.syncmadeasy.com</a>
</p></div>
</div>
<!-- Modal/Popup Box LWC footer starts here -->
<footer class="slds-modal__footer">
<!-- THIS BUTTON IS CALLING A ME
THOD TO RE-SYNC THE BATCH -->
<button class="slds-button slds-button_neutral" onclick={handlesyncShopify} title={label.Process_re_again}>{label.Process_re_again}</button>
<!-- THIS BUTTON IS CALLING A METHOD TO RE CONFIGURE THE STORE -->
<button class="slds-button slds-button_brand" onclick={handleUpdateConfiguration} title={label.Configure_Re_Again}>{label.Configure_Re_Again}</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
<lightning-card class="custom-form-card" style="height: auto;" >
<div class="nested-card">
<div class="sme-finish-grid">
<!-- LEFT: gradient ring panel -->
<div class="sme-finish-ring-panel">
<div class="sme-finish-store-row">
<span class="sme-finish-store-icon">
<img src={StoreLogo} alt="Store" class="sme-finish-store-logo" />
</span>
<span class="sme-finish-store-name">{storeName}</span>
</div>
<div class="sme-finish-ring-wrap">
<svg viewBox="0 0 150 150" class="sme-finish-ring-svg">
<circle cx="75" cy="75" r="65" class="sme-finish-ring-track"></circle>
<circle cx="75" cy="75" r="65" class="sme-finish-ring-fill" style={ringDashoffsetStyle}></circle>
</svg>
<div class="sme-finish-ring-center">
<span class="sme-finish-ring-pct">{progressPercent}%</span>
<span class="sme-finish-ring-label">completed</span>
</div>
</div>
<div class="sme-finish-status-pill">
<span class="sme-finish-status-dot"></span>
<span class="sme-finish-status-text">Sync {batchConfiguredMessage}</span>
</div>
</div>
<!-- RIGHT: thank-you / stop-sync / email panel -->
<div class="sme-finish-info-panel">
<div class="sme-finish-info-top">
<div>
<H1 class="thankyouHeader1" style="max-width: 100%;">{label.Thank_you_for_using}</H1>
<H1 class="thankyouHeader2" style="max-width: 100%;">{label.Sync_Made_Easy}</H1>
</div>
<button onclick={handleAbortClick} class="abort-btn">
<span class="sme-finish-stop-icon"></span>Stop Sync
</button>
</div>
<span class="sendEmailMessage sme-finish-body-copy">
Your sync is running in the background. You'll get a notification at the address below the moment it's complete — feel free to close this page. It may take a while depending on your data size.
</span>
<div class="sme-finish-email-block">
<b class="thankyouHeader1 sme-finish-eyebrow">Notification email</b>
<template for:each={emailList} for:item="email">
<div key={email.key} class="emailCard">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#5fa832" stroke-width="1.9" class="sme-finish-email-svg">
<rect x="3" y="5" width="18" height="14" rx="2"></rect>
<path d="M3 7l9 6 9-6"></path>
</svg>
<span class="emailCardText">{email.value}</span>
<span class="sme-finish-verified-badge">Verified</span>
</div>
</template>
</div>
</div>
</div>
</div>
<!-- THIS DIV IS SHOWING THE MESSAGE AND STATUS OF EACH OBJECT WITH CURRENT STATE OF RECORDS-->
<!-- OBJECT STATUS CARDS -->
<div class="mainContainer slds-theme_default slds-p-around_medium__ slds-shadow" style="height: auto;" >
<div class="header">
<h1>Progress Highlights</h1>
</div>
<lightning-layout multiple-rows horizontal-align="center" class="sme-prohress-hightlight-wrap" style="margin-top: 1.4rem;">
<template for:each={objectStatusList} for:item="object">
<lightning-layout-item key={object.Id} class="sme-progress-highlight-card" lwc:if={object.showCard}>
<div class="sme-porogress-card-head">
<div class="sme-progress-card-icon">
<!-- Object icon. LWC cannot bind raw SVG markup from a JS
string, so the right icon is picked by the per-record
is*Icon flag set in finished.js. stroke="currentColor"
means it inherits the status colour (grey -> green)
from .sme-progress-card-icon. -->
<template lwc:if={object.isProductIcon}>
<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>
</template>
<template lwc:elseif={object.isVariantIcon}>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</template>
<template lwc:elseif={object.isAccountIcon}>
<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>
</template>
<template lwc:elseif={object.isContactIcon}>
<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="5" cy="7.5" r="2.3"></circle>
<path d="M2 19c0-2.7 1.7-4.5 4-4.5 1.2 0 2.2.4 3 1.2"></path>
<circle cx="12" cy="5.5" r="3.2"></circle>
<path d="M8 20c0-4 1.7-6 4-6s4 2 4 6"></path>
<circle cx="19" cy="7.5" r="2.3"></circle>
<path d="M22 19c0-2.7-1.7-4.5-4-4.5-1.2 0-2.2.4-3 1.2"></path>
</svg>
</template>
<template lwc:elseif={object.isDraftOrderIcon}>
<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>
</template>
<template lwc:elseif={object.isOrderIcon}>
<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>
</template>
<template lwc:elseif={object.isOpportunityIcon}>
<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="M4 7l4 4 4-7 4 7 4-4-2 11H6L4 7Z"></path>
<path d="M6 18h12"></path>
</svg>
</template>
<template lwc:elseif={object.isCollectionIcon}>
<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>
</template>
<template lwc:elseif={object.isSmartCollectionIcon}>
<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="M3 4h18l-7 8.5V20l-4-2v-5.5L3 4z"></path>
</svg>
</template>
<template lwc:elseif={object.isCollectIcon}>
<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="M10 13a5 5 0 0 0 7.1 0l3-3a5 5 0 0 0-7.1-7.1l-1.7 1.7"></path>
<path d="M14 11a5 5 0 0 0-7.1 0l-3 3a5 5 0 0 0 7.1 7.1l1.7-1.7"></path>
</svg>
</template>
<template lwc:elseif={object.isLocationIcon}>
<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>
</template>
<template lwc:elseif={object.isInventoryIcon}>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="4" width="20" height="5" rx="1"></rect>
<path d="M4 9v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9"></path>
<path d="M10 13h4"></path>
</svg>
</template>
<template lwc:else>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
<path d="M8 12h8"></path>
</svg>
</template>
</div>
<div class="sme-progress-card-label">
<h2 class="sme-progress-title">{object.name}</h2>
<p class={object.statusColorClass}><span class="sme-text-bullet">● </span>{object.status} ({object.dataPercentage}%)</p>
</div>
</div>
<div class="sme-progress-track">
<div class="sme-progress-fill" style={object.progressStyle}></div>
</div>
<div class="sme-progress-body">
<div class="sme-progress-count"><span class="progress">{object.count}</span><span>/{object.totalCount}</span></div>
<a onclick={openReport} data-id={object.objectName} class="sme-progress-report-btn">View Report</a>
</div>
<!-- <div class={object.ColorClass} style=" border:0.5px solid rgba(0,0,0,0.20) ; border-radius: 0.9rem;box-shadow: 0 2px 10px 0 rgba(0,0,0,0.20);width: 100%;">
<lightning-card class=" slds-theme_default slds-shadow equal-card" >
<div slot="title" >
<span class="title-content">
<lightning-icon icon-name="utility:border_all" class="iconColor2" size="large"></lightning-icon>
<span class="title-content2">
<p>{object.name}</p>
<p class={object.statusColorClass}>●
<span class={object.statusColorClass} style="font-size: 0.8rem; font-weight: 500;">{object.status} ({object.dataPercentage}%)</span>
</p>
</span>
</span>
</div>
<div style="display:flex;align-items: center;justify-content: space-between;">
<h6 class="count-text">{object.count}/{object.totalCount}</h6>
<div slot="actions" class="tooltip">
<a onclick={openReport} data-id={object.objectName} class="view-report-link">
View Report &gt;
</a>
</div>
</div>
</lightning-card>
</div> -->
</lightning-layout-item>
</template>
<template if:true={isobjectStatusListSecond}>
<template for:each={objectStatusListSecond} for:item="object">
<lightning-layout-item key={object.Id} class="sme-progress-highlight-card" lwc:if={object.showCard}>
<div class="sme-porogress-card-head">
<div class="sme-progress-card-icon">
<!-- Object icon. LWC cannot bind raw SVG markup from a JS
string, so the right icon is picked by the per-record
is*Icon flag set in finished.js. stroke="currentColor"
means it inherits the status colour (grey -> green)
from .sme-progress-card-icon. -->
<template lwc:if={object.isProductIcon}>
<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>
</template>
<template lwc:elseif={object.isVariantIcon}>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</template>
<template lwc:elseif={object.isAccountIcon}>
<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>
</template>
<template lwc:elseif={object.isContactIcon}>
<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="5" cy="7.5" r="2.3"></circle>
<path d="M2 19c0-2.7 1.7-4.5 4-4.5 1.2 0 2.2.4 3 1.2"></path>
<circle cx="12" cy="5.5" r="3.2"></circle>
<path d="M8 20c0-4 1.7-6 4-6s4 2 4 6"></path>
<circle cx="19" cy="7.5" r="2.3"></circle>
<path d="M22 19c0-2.7-1.7-4.5-4-4.5-1.2 0-2.2.4-3 1.2"></path>
</svg>
</template>
<template lwc:elseif={object.isDraftOrderIcon}>
<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>
</template>
<template lwc:elseif={object.isOrderIcon}>
<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>
</template>
<template lwc:elseif={object.isOpportunityIcon}>
<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="M4 7l4 4 4-7 4 7 4-4-2 11H6L4 7Z"></path>
<path d="M6 18h12"></path>
</svg>
</template>
<template lwc:elseif={object.isCollectionIcon}>
<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>
</template>
<template lwc:elseif={object.isSmartCollectionIcon}>
<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="M3 4h18l-7 8.5V20l-4-2v-5.5L3 4z"></path>
</svg>
</template>
<template lwc:elseif={object.isCollectIcon}>
<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="M10 13a5 5 0 0 0 7.1 0l3-3a5 5 0 0 0-7.1-7.1l-1.7 1.7"></path>
<path d="M14 11a5 5 0 0 0-7.1 0l-3 3a5 5 0 0 0 7.1 7.1l1.7-1.7"></path>
</svg>
</template>
<template lwc:elseif={object.isLocationIcon}>
<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>
</template>
<template lwc:elseif={object.isInventoryIcon}>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="4" width="20" height="5" rx="1"></rect>
<path d="M4 9v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9"></path>
<path d="M10 13h4"></path>
</svg>
</template>
<template lwc:else>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
<path d="M8 12h8"></path>
</svg>
</template>
</div>
<div class="sme-progress-card-label">
<h2 class="sme-progress-title" style="letter-spacing: -2%;">{object.name}</h2>
<p class={object.statusColorClass} ><span class="sme-text-bullet">● </span>{object.status} ({object.dataPercentage}%)</p>
</div>
</div>
<div class="sme-progress-track">
<div class="sme-progress-fill" style={object.progressStyle}></div>
</div>
<div class="sme-progress-body">
<div class="sme-progress-count"><span class="progress">{object.count}</span></div>
<a onclick={openReport} data-id={object.objectName} class="sme-progress-report-btn">View Report</a>
</div>
<!-- <div class={object.ColorClass} style=" border:0.5px solid rgba(0,0,0,0.20) ; border-radius: 0.9rem;box-shadow: 0 2px 10px 0 rgba(0,0,0,0.20);height:100%;">
<lightning-card class=" slds-theme_default slds-shadow equal-card" style="height: 100%;">
<div slot="title" style="height: 50%;">
<span class="title-content">
<lightning-icon icon-name="utility:border_all" class="iconColor2" size="large"></lightning-icon>
<span class="title-content2">
<p>{object.name}</p>
<p class={object.statusColorClass}>●
<span class={object.statusColorClass} style="font-size: 0.8rem; font-weight: 500;">{object.status} ({object.dataPercentage}%)</span>
</p>
</span>
</span>
</div>
<div style="display:flex;align-items: center;justify-content: space-between;height: 50%;">
<h6 class="count-text">{object.count}</h6>
<div slot="actions" class="tooltip">
<a onclick={openReport} data-id={object.objectName} class="view-report-link">
View Report &gt;
</a>
</div>
</div>
</lightning-card>
</div> -->
</lightning-layout-item>
</template>
</template>
</lightning-layout>
</div>
<br>
<hr lwc:if={isobjectStatusListSecond}>
<div class="sme-plan-wrap">
<div class="sme-plan-card sme-plan-card-col">
<div class="sme-plan-title-row">
<div class="sme-plan-icon-badge sme-plan-icon-badge-green">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1" class="sme-plan-icon-star">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
</div>
<h2 class="sme-plan-title">Loved Our App?</h2>
</div>
<p class="sme-plan-sub-title">Enjoying Sync Made Easy?</p>
<!-- <p class="sme-plan-desc">A quick review helps other Shopify merchants find us — and takes less than a<br/>minute.</p> -->
<p class="sme-plan-desc">Your AppExchange review helps others discover Sync Made Easy <br/>and helps us continue improving</p>
<div class="sme-plan-rating-row">
<span class="sme-star-group">
<svg width="24" height="24" viewBox="0 0 24 24" class="sme-star-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg width="24" height="24" viewBox="0 0 24 24" class="sme-star-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg width="24" height="24" viewBox="0 0 24 24" class="sme-star-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg width="24" height="24" viewBox="0 0 24 24" class="sme-star-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg width="24" height="24" viewBox="0 0 24 24" class="sme-star-outline"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
<span class="sme-plan-ratings">Rated 4.8 on AppExchange</span>
</div>
<div>
<a href="https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMdKyUAL&tab=r" class="sme-plan-btn" target="_blank">Rate Us Now</a>
</div>
</div>
<div class="sme-plan-card sme-plan-card-col sme-plan-card-pro">
<img src={SyncProImg} alt="" class="sme-plan-pro-logo">
<div class="sme-plan-title-row">
<div class="sme-plan-icon-badge sme-plan-icon-badge-white">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class="sme-plan-icon-pro">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
</div>
<h2 class="sme-plan-title sme-plan-title-pro">Upgrade to <span class="sme-plan-pro-badge">PRO</span></h2>
</div>
<p class="sme-plan-sub-title sme-plan-sub-title-pro">Sync more, faster, hands-free</p>
<!-- <p class="sme-plan-desc sme-plan-desc-pro">Get real-time sync, custom field mapping, and priority<br/>support — built for growing stores.</p> -->
<p class="sme-plan-desc sme-plan-desc-pro">Transform the way you manage data with<br/> Sync Made Easy. From bi-directional <br> to advanced capabilities, unlock a smarter</br>and more efficient way to keep your data connected.</p>
<div>
<a href="https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000JFgkpUAD" class="sme-plan-btn" target="_blank">Get It Now</a>
</div>
</div>
</div>
<!-- THIS DIV IS SHOWING THE SOCIAL MEDIA URLS RELATED TO SME APPS AND PAGES-->
<div>
<!-- <div class="slds-align_absolute-center linkCss"> -->
<!-- <a href={YouTubeUrl} class = "IconClass" target="_blank"><img src={logo.Youtube_sync} class="social-icon"/></a> -->
<!-- <a href={instagramUrl} class = "IconClass" target="_blank"><img src={logo.Instagram_Sync} class="social-icon"/></a> -->
<!-- <a href={twitterUrl} class = "IconClass" target="_blank"><img src={logo.Twitter_sync} class="social-icon"/></a> -->
<!-- <a href={linkedinUrl} class = "IconClass" target="_blank"><img src={logo.LinkedIn_Sync} class="social-icon"/></a><br/> -->
<!-- <a href={YouTubeUrl} class = "IconClass" target="_blank"><img src={Youtube_sync} class="social-icon"/></a>
<a href={instagramUrl} class = "IconClass" target="_blank"><img src={Instagram_Sync} class="social-icon"/></a>
<a href={twitterUrl} class = "IconClass" target="_blank"><img src={Twitter_sync} class="social-icon"/></a>
<a href={linkedinUrl} class = "IconClass" target="_blank"><img src={LinkedIn_Sync} class="social-icon"/></a><br/>
</div> -->
<!-- <div style="margin-top: 2rem;">
<p class="slds-align_absolute-center sme-footer-line">
<span class="sme-footer-text">Copyright {currentYear} Product of&nbsp;</span>
<a class="sme-footer-text sme-footer-link" href="https://hicglobalsolutions.com/" target="_blank" rel="noopener">HIC Global Solutions</a>
<span class="sme-footer-text">&nbsp;All Rights Reserved</span>
</p>
</div> -->
</div>
</lightning-card>
</lightning-layout>
</template>
Reference in New Issue View Git Blame Copy Permalink