@qualityunit/liveagent-help 0.0.1 → 0.0.3

package/src/lib/pages/steps/ConfigureCustomerPortal.svelte

@@ -1,171 +0,0 @@
-<script lang="ts">
-    import Step from "./Step.svelte";
-    import Heading from "../../components/common/Heading.svelte";
-    import Paragraph from "../../components/common/Paragraph.svelte";
-    import Widget from "../../components/containers/Widget.svelte";
-    import {getContext, onMount} from "svelte";
-    import Link from "../../components/common/Link.svelte";
-    import {progress} from "../../utils/progressStore.ts";
-    import { type WidgetTypeInterface} from "../../utils/types.ts";
-    import {isArticleCreated, isColorChanged, isKBCreated, isThemeChanged} from "../../utils/MockBackend.ts";
-    import {_} from 'svelte-i18n';
-
-    const iconBasePath: string = getContext<string>('iconBasePath');
-    const baseURL: string = window.location.origin;
-
-    let widgets: WidgetTypeInterface[] = [
-        {
-            id: 'theme',
-            heading: "Choose theme",
-            text: "Let’s start by choosing a customer portal theme. There are a few options to choose from. You can use the “Preview” button to check them out first.",
-            iconPath: `${iconBasePath}brush.svg`,
-            buttonAction: isThemeChanged,
-            completed: false,
-            buttonTextCompleted: "Change theme",
-            buttonTextUncompleted: "Change theme",
-            redirectPath: 'Themes'
-        },
-        {
-            id: 'colors',
-            heading: "Personalize Customer Portal",
-            text: "You can also easily customize the color scheme of your customer portal.",
-            iconPath: `${iconBasePath}palette.svg`,
-            buttonAction: isColorChanged,
-            completed: false,
-            buttonTextCompleted: "Change colors",
-            buttonTextUncompleted: "Change colors",
-            redirectPath: 'Colors'
-        },
-        {
-            id: 'article',
-            heading: "Create your first article",
-            text: "Another thing to note is how easy it is to create your own knowledge base articles for your customer portal visitors.",
-            iconPath: `${iconBasePath}edit.svg`,
-            buttonAction: isArticleCreated,
-            completed: false,
-            buttonTextCompleted: "Create article",
-            buttonTextUncompleted:  "Create article",
-            redirectPath: 'Article'
-        },
-        {
-            id: 'kb',
-            heading: "Make your Knowledgebase public",
-            text: "The last step is to enable the knowledgebase to make your articles visible on your customer portal.",
-            iconPath: `${iconBasePath}show.svg`,
-            buttonAction: isKBCreated,
-            completed: false,
-            buttonTextCompleted: "Enable knowledgebase",
-            buttonTextUncompleted: "Manage knowledgebase",
-            redirectPath: 'Knowledge-base'
-        }
-    ]
-
-    onMount(async (): Promise<void> => {
-        stepCompleted = $progress[8]?.state === 'c';
-        if (stepCompleted) {
-            widgets = widgets.map(widget => ({...widget, completed: true}));
-        } else {
-            widgets = await Promise.all(widgets.map(async card => {
-                const response = await card.buttonAction();
-                return {...card, completed: response.completionStatus};
-            }));
-        }
-    });
-
-    async function completeStep(id: string): Promise<void> {
-        const widgetIndex: number = widgets.findIndex(w => w.id === id)
-        if (widgetIndex !== -1) {
-            const response = await widgets[widgetIndex].buttonAction(true);
-            widgets[widgetIndex].completed = response.completionStatus;
-            widgets = [...widgets];
-            window.location.hash = widgets[widgetIndex].redirectPath;
-        }
-    }
-
-    $: stepCompleted = widgets.every(widget => widget.completed);
-
-</script>
-
-<Step bind:stepFinished={stepCompleted}
-      headerTitle="Configure customer portal"
-      headerIconPath="{iconBasePath}setup-customer-portal.svg"
-      nextStepCase="last"
-      nextStepUnfinishedText="Keep up the pace! Create your knowledgebase to finalize this step."
-      nextStepFinishedText="Congratulations! You've reached the end."
-      path="/configure-customer-portal"
->
-    <section class="section-top">
-        <div>
-            <Heading text="Configure Customer Portal" />
-            <Paragraph text="As the final step, let's talk about the Customer Portal, a platform where your customers can reach out, get information, and solve their problems independently. A well-maintained knowledge base can significantly reduce the load on your agents and improve customer satisfaction." />
-        </div>
-        <img src="public/assets/images/configure_customer_portal.svg" alt="Customer support portal" />
-    </section>
-    <section class="mid-section">
-        <p>
-            With LiveAgent, you can fully customize your Customer Portal design according to your brand's theme and preferences. As an example or inspiration, feel free to check our LiveAgent knowledge base available at
-            <Link text="support.liveagent.com" href="http://support.liveagent.com/"/>
-            , which is built only by this feature alone.
-        </p>
-        <p>And now let's have a look at your own Customer Portal here: <Link text={baseURL} href={baseURL} /> It might take some time until it’s also nice and shiny but don’t worry, you will get there eventually.</p>
-    </section>
-    <section class="widgets-wrapper">
-        {#each widgets as widget, index}
-            {#if index === 2}
-                <Paragraph additionalStyles="padding: 0 10px 4px 10px; margin: -3px 0 7px 0" text="you might have already noticed on the Customer Portal configuration screens, there are other more advanced options, like customizing the HTML and CSS or adding your own tracking scripts to the Customer Portal itself." />
-            {/if}
-            <Widget heading={widget.heading}
-                    text={widget.text}
-                    iconSrc={widget.iconPath}
-                    cardPadding="14px 16px"
-                    buttonAction={() => completeStep(widget.id)}
-                    buttonText={(widget.completed ? widget.buttonTextCompleted : widget.buttonTextUncompleted) ?? $_('Manage')}
-                    buttonReversed={widget.completed}
-            />
-        {/each}
-    </section>
-    <p>Once enabled, head back to your customer portal <Link text={baseURL} href={baseURL} /> and see what you achieved. Well done! 👍" </p>
-</Step>
-
-<style>
-    .section-top {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 16px;
-    }
-
-    .mid-section {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        margin-bottom: 12px;
-    }
-
-    .widgets-wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 16px 20px;
-        margin-bottom: 12px;
-        border-radius: 6px;
-        background-color: var(--background-color-grey-secondary);
-    }
-
-    p {
-        display: inline;
-        margin: 0;
-        color: var(--texts-icons-primary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 400;
-        line-height: 20px;
-    }
-
-    @media (min-width: 768px) {
-        .section-top {
-            flex-direction: row;
-        }
-    }
-</style>

package/src/lib/pages/steps/ConnectEmailAccounts.svelte

@@ -1,204 +0,0 @@
-<script lang="ts">
-    import Step from "./Step.svelte";
-    import Paragraph from "../../components/common/Paragraph.svelte";
-    import Heading from "../../components/common/Heading.svelte";
-    import {getContext, onMount} from "svelte";
-    import {
-        getBuildInEmail,
-        isIncomingEmailAccConnected,
-        isOutgoingEmailAccConnected
-    } from "../../utils/MockBackend.ts";
-    import Widget from "../../components/containers/Widget.svelte";
-    import { progress } from "../../utils/progressStore";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    const CONNECT: string = "Connect";
-    const MANAGE: string = "Manage";
-    const iconBasePath: string = getContext<string>('iconBasePath');
-
-    let stepCompleted: boolean = false;
-    let incomingCompleted: boolean = false;
-    let outgoingCompleted: boolean = false;
-    let email: string = '';
-
-    onMount(async (): Promise<void> => {
-        stepCompleted = $progress[3]?.state === 'c';
-        if (stepCompleted) {
-            incomingCompleted = true;
-            outgoingCompleted = true;
-        } else {
-            const responseIncoming = await isIncomingEmailAccConnected();
-            const responseOutgoing = await isOutgoingEmailAccConnected();
-            incomingCompleted = responseIncoming.completionStatus;
-            outgoingCompleted = responseOutgoing.completionStatus;
-        }
-
-        const response = await getBuildInEmail();
-        email = response.message;
-    });
-
-    async function handleIncomingEmailConnect(): Promise<void> {
-        const response = await isIncomingEmailAccConnected(true);
-        incomingCompleted = response.completionStatus;
-        window.location.hash = 'Incoming-Mail-Accounts';
-    }
-
-    async function handleOutgoingEmailConnect(): Promise<void> {
-        const response = await isOutgoingEmailAccConnected(true);
-        outgoingCompleted = response.completionStatus;
-        window.location.hash = 'Outgoing-Mail-Accounts';
-    }
-
-    $: stepCompleted = incomingCompleted && outgoingCompleted;
-</script>
-
-
-<Step bind:stepFinished={stepCompleted}
-      headerTitle="Connect email accounts"
-      headerIconPath="{iconBasePath}connect-email-account.svg"
-      nextStepCase="mid"
-      nextStepUnfinishedText="Connect email accounts to complete this step."
-      nextStepFinishedText="If you are done with email accounts, it’s time to have a look at social media channels."
-      path="/connect-email-accounts"
->
-    <div class="wrapper">
-        <section>
-            <Heading text="Create your new helpdesk email address" />
-            <Paragraph text="Let's begin by connecting your email accounts to LiveAgent, enabling you to receive emails as tickets and respond to them seamlessly." />
-            <Paragraph text="Two types of email accounts must be set up in LiveAgent, incoming and outgoing. The same email account is often used as both an incoming and outgoing account."/>
-            <div class="panel-wrapper">
-                <Widget heading="Incoming email accounts"
-                        text="These accounts receive your customer's emails. Each email sent to these accounts is imported into LiveAgent, creating a ticket."
-                        iconSrc="{iconBasePath}incoming.svg"
-                        cardPadding="14px 10px 14px 16px"
-                        buttonAction={handleIncomingEmailConnect}
-                        buttonText={incomingCompleted ? MANAGE : CONNECT}
-                        buttonReversed={incomingCompleted}
-                />
-                <Widget heading="Outgoing email accounts"
-                        text="These accounts receive your customer's emails. Each email sent to these accounts is imported into LiveAgent, creating a ticket."
-                        iconSrc="{iconBasePath}outgoing.svg"
-                        cardPadding="14px 10px 14px 16px"
-                        buttonAction={handleOutgoingEmailConnect}
-                        buttonText={outgoingCompleted ? MANAGE : CONNECT}
-                        buttonReversed={outgoingCompleted}
-                />
-            </div>
-        </section>
-        <section class="section2">
-            <Heading text="Your Built-in Email Account"/>
-            <div class="inner-section">
-                <Paragraph text="Every LiveAgent account has a built-in email address, serving as both an incoming and outgoing email account. We provide this mailbox free of charge, but it does contain some limitations. It is recommended for use during the initial setup of your LiveAgent account and for fundamental testing but not for communication with your clients." />
-                <img src="public/assets/images/connect-email-accounts.svg" alt="connect email accounts">
-            </div>
-
-        </section>
-        <section class="built-in-email">
-            <div class="email-wrapper">
-                <span class="text">Your built-in email address is: </span>
-                <span class="email">{email}</span>
-            </div>
-            <Paragraph text="Feel free to send a test email to this address and see LiveAgent in action!"/>
-        </section>
-    </div>
-</Step>
-
-<style>
-    .section2 {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        margin-top: 24px;
-    }
-
-    .inner-section {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .inner-section > img {
-        margin-top: 0;
-    }
-
-    .panel-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        padding: 16px 20px;
-        background: var(--background-color-grey-secondary);
-        border-radius: 6px;
-    }
-
-    .panel {
-        display: flex;
-        gap: 12px;
-        padding: 14px 10px 16px;
-        border-radius: 6px;
-        background: var(--background-color-grey-primary);
-    }
-
-    .panel-heading {
-        padding-left: 22px;
-        margin: 0 0 4px;
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .panel-right {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .text {
-        color: var(----text-color-primary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .email {
-        padding: 5px 12px;
-        color: var(--background-button-primary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 400;
-        line-height: 20px;
-        background: var(--event-surface-hover);
-        border-radius: 69px;
-    }
-
-    .email-wrapper {
-        display: inline-flex;
-        gap: 6px;
-        justify-content: center;
-        align-items: center;
-        padding-left: 12px;
-        border-radius: 69px;
-        background: var(--event-surface-gray-primary);
-    }
-
-    .built-in-email {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
-    img {
-        margin: 24px 0;
-    }
-
-    @media (min-width: 768px) {
-        .inner-section {
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-between;
-        }
-    }
-</style>

package/src/lib/pages/steps/ConnectMessagingApps.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-    import Step from "./Step.svelte";
-    import Heading from "../../components/common/Heading.svelte";
-    import Paragraph from "../../components/common/Paragraph.svelte";
-    import Widget from "../../components/containers/Widget.svelte";
-    import {getContext, onMount} from "svelte";
-    import { progress } from "../../utils/progressStore.ts";
-    import { isViberConnected, isWhatsappConnected } from "../../utils/MockBackend.ts";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    const CONNECT: string = "Connect";
-    const MANAGE: string = "Manage";
-    const iconBasePath: string = getContext<string>('iconBasePath');
-
-    let stepCompleted: boolean = false;
-    let whatsappCompleted: boolean = false;
-    let viberCompleted: boolean = false;
-
-    onMount(async (): Promise<void> => {
-        stepCompleted = $progress[5]?.state === 'c';
-
-        if (stepCompleted) {
-            whatsappCompleted = true;
-            viberCompleted = true;
-        } else {
-            const responseWhatsapp = await isWhatsappConnected();
-            const responseViber = await isViberConnected();
-            whatsappCompleted = responseWhatsapp.completionStatus;
-            viberCompleted = responseViber.completionStatus;
-        }
-    });
-
-    async function connectWhatsapp(): Promise<void> {
-        const response = await isWhatsappConnected(true);
-        whatsappCompleted = response.completionStatus;
-        window.location.hash = 'WhatsApp-Configuration';
-    }
-
-    async function connectViber(): Promise<void> {
-        const response = await isViberConnected(true);
-        viberCompleted = response.completionStatus;
-        window.location.hash = 'Viber-Configuration';
-    }
-
-    $: if (whatsappCompleted && viberCompleted) stepCompleted = true;
-</script>
-
-<Step bind:stepFinished={stepCompleted}
-      headerTitle="Connect messaging apps"
-      headerIconPath="{iconBasePath}connect-messaging-apps.svg"
-      nextStepCase="mid"
-      nextStepUnfinishedText="This step requires you to connect any messaging app you prefer."
-      nextStepFinishedText="Now, let's introduce another essential aspect of our tool - the diverse range of contact widgets that LiveAgent offers for your convenience."
-      path="/connect-messaging-apps"
->
-    <section>
-        <Heading text="Connect Messaging apps" />
-        <Paragraph text="Connecting these messaging platforms to LiveAgent enables you to respond to your customers from one single platform, eliminating the need to switch between different apps or accounts continuously." />
-    </section>
-    <section>
-        <Widget heading="Whatsapp"
-                text="Linking your WhatsApp accounts to LiveAgent will seamlessly transform all incoming WhatsApp messages into tickets within the system. This enables your agents to easily and efficiently respond to each customer query received via WhatsApp."
-                iconSrc="{iconBasePath}whatsapp_logo.svg"
-                backgroundColor="--background-color-green-primary"
-                cardPadding="16px 16px 16px 24px"
-                buttonAction={connectWhatsapp}
-                buttonText={whatsappCompleted ? MANAGE : CONNECT}
-                buttonReversed={whatsappCompleted}
-        />
-        <Widget heading="Viber"
-                text="By integrating your Viber accounts with LiveAgent, all incoming Viber messages are systematically converted into individual tickets within the platform. This allows your agents to promptly and effortlessly address each customer inquiry received through Viber."
-                iconSrc="{iconBasePath}viber_logo.svg"
-                backgroundColor="--background-color-purple-primary"
-                cardPadding="16px 16px 16px 24px"
-                buttonAction={connectViber}
-                buttonText={viberCompleted ? MANAGE : CONNECT}
-                buttonReversed={viberCompleted}
-        />
-    </section>
-</Step>
-
-<style>
-    section {
-        margin-bottom: 24px;
-    }
-</style>

package/src/lib/pages/steps/ConnectSocialMedia.svelte

@@ -1,124 +0,0 @@
-<script lang="ts">
-    import Step from "./Step.svelte";
-    import Paragraph from "../../components/common/Paragraph.svelte";
-    import Heading from "../../components/common/Heading.svelte";
-    import Widget from "../../components/containers/Widget.svelte";
-    import {getContext, onMount} from "svelte";
-    import { progress } from "../../utils/progressStore.ts";
-    import { isFacebookConnected, isInstagramConnected, isTwitterConnected } from "../../utils/MockBackend.ts";
-    import type {WidgetTypeInterface} from "../../utils/types.ts";
-
-    const iconBasePath: string = getContext<string>('iconBasePath');
-    const CONNECT: string = "Connect";
-    const MANAGE: string = "Manage";
-
-    let stepCompleted: boolean = false;
-
-    let widgets: WidgetTypeInterface[] = [
-        {
-            id: 'fb',
-            heading: 'Facebook',
-            text: 'Connect your Facebook business page and transform all posts, comments, and private messages sent to that page into tickets.',
-            iconPath: `${iconBasePath}facebook_logo.svg`,
-            backgroundColor: '--background-color-blue-primary',
-            buttonAction: isFacebookConnected,
-            completed: false,
-            redirectPath: 'Facebook-Pages'
-        },
-        {
-            id: 'ig',
-            heading: 'Instagram',
-            text: 'Connect your Instagram business page and transform all posts, comments, and private messages sent to that page into tickets.',
-            iconPath: `${iconBasePath}instagram_logo.svg`,
-            backgroundColor: '--background-color-pink-primary',
-            buttonAction: isInstagramConnected,
-            completed: false,
-            redirectPath: 'FacebookChannel'
-        },
-        {
-            id: 'x',
-            heading: 'Twitter',
-            text: 'Connect your Twitter business page and transform all posts, comments, and private messages sent to that page into tickets.',
-            iconPath: `${iconBasePath}x_logo.svg`,
-            backgroundColor: '--background-color-grey-primary',
-            buttonAction: isTwitterConnected,
-            completed: false,
-            redirectPath: 'TwitterChannel'
-        }
-    ]
-
-    onMount(async (): Promise<void> => {
-        stepCompleted = $progress[4]?.state === 'c';
-        if (stepCompleted) {
-            widgets = widgets.map(widget => ({...widget, completed: true}));
-        } else {
-            const completionChecks = widgets.map(async widget => {
-                const result = await widget.buttonAction();
-                return {...widget, completed: result.completionStatus};
-            });
-            widgets = await Promise.all(completionChecks);
-        }
-    });
-
-    async function completeStep(widget: WidgetTypeInterface): Promise<void> {
-        const widgetIndex: number = widgets.findIndex(w => w.heading === widget.heading);
-        if (widgetIndex !== -1) {
-            const response = await widgets[widgetIndex].buttonAction(true);
-            widgets[widgetIndex].completed = response.completionStatus;
-            widgets = [...widgets];
-            window.location.hash = widget.redirectPath;
-        }
-    }
-
-    $: stepCompleted = widgets.every(widget => widget.completed);
-</script>
-
-<Step bind:stepFinished={stepCompleted}
-      headerTitle="Connect social media"
-      headerIconPath="{iconBasePath}connect-social-media.svg"
-      nextStepCase="mid"
-      nextStepUnfinishedText="Connecting social media account is needed to finalize this step."
-      nextStepFinishedText="And how about connecting WhatsApp or Viber accounts? With LiveAgent, we got you covered!"
-      path="/connect-social-media"
->
-    <section>
-        <Heading text="Connect your social media accounts" />
-        <div class="points">
-            <img src="public/assets/images/connect-social-media.svg" alt="connect social media">
-            <Paragraph text="LiveAgent can be integrated with Facebook, Instagram, and X(Twitter) accounts and transform communication from these channels into tickets for better and easier management. Having all available social networks connected to LiveAgent allows you to interact and reply to your customers from a single place instead of constantly switching between your social media accounts."/>
-        </div>
-    </section>
-    <section>
-        {#each widgets as widget}
-            <Widget heading={widget.heading}
-                    text={widget.text}
-                    iconSrc={widget.iconPath}
-                    backgroundColor={widget.backgroundColor}
-                    cardPadding="16px 16px 16px 24px"
-                    buttonAction={() => completeStep(widget)}
-                    buttonText={widget.completed ? MANAGE : CONNECT}
-                    buttonReversed={widget.completed}
-            />
-        {/each}
-    </section>
-</Step>
-
-<style>
-    .points {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    img {
-        margin: 24px 0;
-    }
-
-    @media (min-width: 768px) {
-        .points {
-            flex-direction: row;
-        }
-    }
-</style>