@qualityunit/liveagent-help 0.0.1 → 0.0.3

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

@@ -1,170 +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 Point from "../../components/containers/Point.svelte";
-    import Widget from "../../components/containers/Widget.svelte";
-    import {getContext, onMount} from "svelte";
-    import { progress } from "../../utils/progressStore.ts";
-    import { isCallCenterConnected } from '../../utils/MockBackend.ts';
-    import { push } from "svelte-spa-router";
-
-    interface PointData {
-        heading: string;
-        text: string;
-    }
-
-    const iconBasePath: string = getContext<string>('iconBasePath');
-    const imageBasePath: string = getContext<string>('imageBasePath');
-    const pointsData: PointData[] = [
-        {
-            heading: "Integration possibilities with many VoIP providers worldwide",
-            text: "If your desired provider is not on the list, the general integration method can always be used, but feel free to let us know! We will do our best to add them."
-        },
-        {
-            heading: "Unlimited call recording",
-            text: "With unlimited call recordings, you can capture every phone interaction, providing a valuable resource for quality assurance and continual agent training."
-        },
-        {
-            heading: "IVR (interactive voice response)",
-            text: "This feature lets you play customized greetings or informational recordings to engage callers. It provides options for data collection during the call interaction and enables callers to interact through touch-tone signaling. Callers can invoke various actions by pressing numbers, such as being routed to the correct agent or department or requesting a callback."
-        },
-        {
-            heading: "Call Devices",
-            text: "If you prefer not to handle calls through your PC browser, you can seamlessly link an external hardware phone to LiveAgent. This function allows you to make or answer calls easily, offering an alternative method for managing phone interactions that best suits your convenience."
-        },
-        {
-            heading: "Mobile apps",
-            text: "To provide you with added convenience, we offer free mobile applications for both Android and iOS platforms. These apps allow you to manage your LiveAgent phone calls effortlessly while on the go."
-        },
-        {
-            heading: "Call queue",
-            text: "Our Call queue feature ensures no calls are missed even when all agents are occupied. Incoming calls enter a queue and await their turn until the next available agent can handle the call."
-        }
-    ]
-
-    let stepCompleted: boolean = false;
-
-    onMount(async (): Promise<void> => {
-        const status = await isCallCenterConnected();
-        stepCompleted = status.completionStatus || $progress[7]?.state === 'c';
-    });
-
-    async function handleCallCenter(): Promise<void> {
-        const response = await isCallCenterConnected(true);
-        stepCompleted = response.completionStatus;
-        push('/configuration/call_center');
-    }
-</script>
-
-<Step bind:stepFinished={stepCompleted}
-      headerTitle="Create a call center"
-      headerIconPath="{iconBasePath}add-voice-support.svg"
-      nextStepCase="mid"
-      nextStepUnfinishedText="To complete this step, connect your phone number from VoIP."
-      nextStepFinishedText="We're nearly there. Just one last step remains! Let’s have a look at the Customer Portal and what it offers."
-      path="/create-call-center"
->
-    <section class="top-section">
-        <div class="left">
-            <Heading text="Create a call center" />
-            <Paragraph text="LiveAgent provides an integrated call center solution that allows you to receive, answer, and log phone calls as tickets. So, with a few steps, you can turn your helpdesk into a dynamic call center, eliminating the need for third-party calling solutions." />
-        </div>
-        <img class="image" src="{imageBasePath}create_call_center.svg" alt="Create call center" />
-    </section>
-    <section>
-        <Heading text="What we offer?" />
-        <div class="points-wrapper">
-            {#each pointsData as point}
-                <Point heading={point.heading} text={point.text} />
-            {/each}
-        </div>
-        <div class="info-panel">
-            <div class="info-panel-header">
-                <img src="{iconBasePath}warning.svg" alt="warning icon">
-                <h5>What do you need?</h5>
-            </div>
-            <ul>
-                <li>Obtain a phone number from a VoIP (voice-over-internet provider).</li>
-                <li>Connect it with your LiveAgent account</li>
-            </ul>
-        </div>
-        <Widget heading="Call center"
-                text="Upgrade your helpdesk to a active call center"
-                iconSrc="{iconBasePath}calls.svg"
-                cardPadding="14px 10px"
-                textPadding="24px"
-                buttonAction={handleCallCenter}
-                buttonText={stepCompleted ? "Manage" : "Connect"}
-                buttonReversed={stepCompleted}
-        />
-    </section>
-</Step>
-
-<style>
-    .top-section {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 24px;
-    }
-
-    .points-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-        align-items: flex-start;
-        padding: 0 10px;
-        margin-bottom: 12px;
-    }
-
-    .info-panel {
-        padding: 6px 10px;
-        margin-bottom: 12px;
-        border: 1px solid var(--event-blue-store);
-        border-radius: 6px;
-        background-color: var(--background-color-orange-primary);
-    }
-
-    .info-panel-header {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 6px;
-    }
-
-    h5 {
-        margin: 0;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .image {
-        margin-bottom: 24px;
-    }
-
-    ul {
-        margin: 0;
-    }
-
-    li {
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 12px;
-        line-height: 20px;
-    }
-
-    @media (min-width: 768px) {
-        .top-section {
-            flex-direction: row;
-        }
-
-        li {
-            font-size: 13px;
-        }
-    }
-</style>

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

@@ -1,131 +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 {
-        isCallButtonCreated,
-        isChatButtonCreated,
-        isChatInvitationCreated,
-        isContactFormCreated,
-        isVideoCallButtonCreated
-    } from "../../utils/MockBackend.ts";
-    import type {WidgetTypeInterface} from "../../utils/types.ts";
-
-    let stepCompleted: boolean = false;
-    const iconBasePath: string = getContext<string>('iconBasePath');
-
-    let widgets: WidgetTypeInterface[] = [
-        {
-            id: 'chatButtons',
-            heading: 'Chat buttons',
-            text: 'These are easily customizable and allow your customers to instantly initiate a live chat with your agents right from your webpage. There are many types and pre-defined designs available. Make sure to check them out!',
-            iconPath: `${iconBasePath}chat_buttons.svg`,
-            buttonAction: isChatButtonCreated,
-            completed: false,
-            redirectPath: 'Chat-Buttons;'
-        },
-        {
-            id: 'chatInvitations',
-            heading: 'Chat invitations',
-            text: 'Proactively engage your customers by sending automated chat invitations based on specific criteria, like pages visited or time spent on a page.',
-            iconPath: `${iconBasePath}invitations.svg`,
-            buttonAction: isChatInvitationCreated,
-            completed: false,
-            redirectPath: 'Invitations'
-        },
-        {
-            id: 'contactForms',
-            heading: 'Contact forms',
-            text: 'This widget enables customers to quickly send their inquiries or feedback as tickets directly from your webpage by simply clicking a button or filling out an in-page form.',
-            iconPath: `${iconBasePath}form.svg`,
-            buttonAction: isContactFormCreated,
-            completed: false,
-            redirectPath: 'Contact-Button'
-        },
-        {
-            id: 'callButtons',
-            heading: 'Call buttons',
-            text: 'These simple buttons let your customers start a direct call from their web browser with an available agent from your team in LiveAgent.',
-            iconPath: `${iconBasePath}calls.svg`,
-            buttonAction: isCallButtonCreated,
-            completed: false,
-            redirectPath: 'Call-Configuration'
-        },
-        {
-            id: 'videoCallButtons',
-            heading: 'Video call buttons',
-            text: 'As the name suggests, this button offers an opportunity for face-to-face interaction, allowing customers and agents to connect even more personally.',
-            iconPath: `${iconBasePath}videocall.svg`,
-            buttonAction: isVideoCallButtonCreated,
-            completed: false,
-            redirectPath: 'Video-Call-Configuration'
-        }
-    ];
-
-    onMount(async (): Promise<void> => {
-        stepCompleted = $progress[6]?.state === 'c';
-        if (stepCompleted) {
-            widgets = widgets.map(widget => ({...widget, completed: true}));
-        } else {
-            widgets = await Promise.all(widgets.map(async widget => {
-                const result = await widget.buttonAction();
-                return {...widget, completed: result.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="Create contact widget"
-      headerIconPath="{iconBasePath}add-chat-button.svg"
-      nextStepCase="mid"
-      nextStepUnfinishedText="You can finish this step by creating any contact widget."
-      nextStepFinishedText="Were you aware that with LiveAgent, you're able to manage actual phone calls too?"
-      path="/create-contact-widget">
-    <Heading text="Create contact widgets for your website" />
-    <Paragraph text="LiveAgent provides various contact widgets that aim to enhance your interactive customer-service experience and streamline communication. Each of these widgets offers a unique path to connect with customers, ultimately improving their experience and boosting your customer service performance." />
-    <img src="public/assets/images/contact-widgets.svg" alt="contact widgets">
-    <section>
-        {#each widgets as widget}
-            <Widget heading={widget.heading}
-                    text={widget.text}
-                    iconSrc={widget.iconPath}
-                    cardPadding="14px 10px 14px 16px"
-                    buttonAction={() => completeStep(widget.id)}
-                    buttonText={widget.completed ? "Manage" : "Create"}
-                    buttonReversed={widget.completed} />
-        {/each}
-    </section>
-</Step>
-
-<style>
-    section {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 10px;
-        padding: 16px 20px;
-        border-radius: 6px;
-        background-color: var(--background-color-grey-secondary);
-    }
-
-    img {
-        margin: 24px 0;
-    }
-</style>

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

@@ -1,77 +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 {onMount} from "svelte";
-    import {progress} from "../../utils/progressStore.ts";
-
-    let stepCompleted = false;
-
-    onMount(() => {
-        stepCompleted = $progress[0].state === 'c'
-    })
-</script>
-
-<Step bind:stepFinished = {stepCompleted}
-      headerTitle = "Learn the basics"
-      headerIconPath = "public/assets/icons/learn-the-basics.svg"
-      hideSkipStepButton = {true}
-      nextStepCase = 'first'
-      nextStepUnfinishedText = "Already familiar with the fundamentals of LiveAgent? Let's proceed with the setup."
-      nextStepFinishedText = "Now that you've understood the fundamentals, it's time to begin setting up the software."
-      path = "/learn-the-basics"
->
-    <section>
-        <Heading text="How does LiveAgent work?"/>
-        <Paragraph text="LiveAgent helpdesk software is a customer service tool that helps manage and streamline interactions with customers across multiple channels such as email, live chat, phone calls, and social media." />
-        <Paragraph text="The software sorts incoming customer queries automatically into tickets and assigns them to the appropriate department or agent using predefined rules. It provides a single, shared inbox where agents can access and respond to all customer inquiries. LiveAgent also offers features such as automation rules, SLA, reports, analytics, and a knowledge base that aids in self-service." />
-        <Paragraph text="In essence, LiveAgent improves the efficiency of your customer service and ensures all customer communications are dealt with in a timely and organized manner." />
-        <img src='public/assets/images/liveagent.svg' alt="LiveAgent in a nutshell">
-    </section>
-    <section>
-        <Heading text="What is a ticket?"/>
-        <Paragraph text="A helpdesk ticket is essentially a digital record of a customer's request for help or assistance. This ticket contains all the relevant information about the customer's issue or query, including their contact details, the nature of the problem, and any interactions that have been had with the customer regarding the issue. The ticket can originate from various sources, such as emails, phone calls, live chats, or social media messages."/>
-        <img src='public/assets/images/tags.svg' alt="Tags">
-        <Paragraph text="As the issue progresses toward resolution, the ticket gets updated with new actions, responses, or notes. The ticket goes through various states - starting from being 'new', to being 'answered' when an agent answers, 'open' when the customer replies, and lastly ’resolved’ when the issue is resolved. If the ticket isn't reopened, it will conclude its cycle with the final and irreversible ‘closed’ status. This system ensures that every customer's problem is systematically tracked, addressed, and resolved.To aid in managing and distributing tickets, it's important to create Departments. This effectively delegates authority and responsibility pertaining to the tickets, ensuring each ticket gets directed to the right team or person."/>
-    </section>
-    <section class="section3">
-        <img src='public/assets/images/departments.svg' alt="Departments">
-        <div>
-            <Heading text="What is a department"/>
-            <Paragraph text='A Department refers to a designated group within the organization that handles specific tickets or customer inquiries. It may represent different functional areas within a company like "Customer Service", "Technical Support", "Billing", or "Sales", or it may represent different language skills or team proficiency like “Sales - English”, “Sales - German” or “Technical - 2nd level”. This ensures tickets are quickly assigned to the right people, which can resolve issues faster and more efficiently.' />
-        </div>
-    </section>
-    <section>
-        <Heading text="What is an agent?"/>
-        <Paragraph text="An Agent is a member of your support team who interacts directly with your customers to resolve their queries or issues. They are essentially the users of the LiveAgent software within your LiveAgent account, tasked with responding to customer inquiries that arrive as tickets."/>
-    </section>
-</Step>
-
-<style>
-    section {
-        display: flex;
-        flex-direction: column;
-        padding: 12px 0;
-    }
-
-    .section3 {
-        flex-direction: column-reverse;
-        gap: 16px;
-    }
-
-    img {
-        margin: 24px auto;
-    }
-    
-    @media (min-width: 768px) {
-        section {
-            flex-flow: wrap row;
-            align-items: flex-start;
-        }
-
-        .section3 {
-            flex-direction: row;
-            flex-wrap: nowrap;
-        }
-    }
-</style>

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

@@ -1,223 +0,0 @@
-<script lang="ts">
-    import Progress from "../../components/nav/Progress.svelte";
-    import {completeStep, skipStep, areSteps0To7Completed} from "../../utils/progressStore.ts";
-    import Button from "../../components/common/Button.svelte";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let hideSkipStepButton: boolean = false;
-    export let headerTitle: string;
-    export let headerIconPath: string;
-    export let nextStepCase: 'first' | 'mid' | 'last';
-    export let nextStepText: string = '';
-    export let nextStepUnfinishedText: string;
-    export let nextStepFinishedText: string;
-    export let path: string;
-    export let stepFinished: boolean = false;
-
-    let isBottom: boolean = false;
-    let nextStepButtonDisabled: boolean = false;
-    let nextStepButtonText: string = 'Next step';
-    let nextStepButtonIcon: string = 'public/assets/icons/next.svg';
-    let nextStepButtonAlt: string = 'next';
-
-    function handleFinishStep(): void {
-        completeStep(path);
-    }
-
-    function handleSkipStep(): void {
-        skipStep(path);
-    }
-
-    $: {
-        switch (nextStepCase) {
-            case 'first':
-                nextStepText = isBottom ? nextStepFinishedText : nextStepUnfinishedText;
-                nextStepButtonText = "Let's start";
-                nextStepButtonIcon = 'public/assets/icons/rocket.svg';
-                nextStepButtonAlt = 'rocket';
-                nextStepButtonDisabled = false;
-                break;
-            case 'mid':
-                nextStepText = nextStepUnfinishedText;
-                nextStepButtonDisabled = !stepFinished;
-                break;
-            case 'last':
-                nextStepText = allStepsCompleted ? nextStepFinishedText : nextStepUnfinishedText;
-                nextStepButtonText = allStepsCompleted ? "Finish" : "Redo unfinished steps";
-                nextStepButtonIcon = allStepsCompleted ? 'public/assets/icons/checkmark.svg' : 'public/assets/icons/next.svg';
-                nextStepButtonAlt = allStepsCompleted ? 'check' : 'next';
-                nextStepButtonDisabled = !allStepsCompleted;
-                break;
-        }
-    }
-
-    $: allStepsCompleted = areSteps0To7Completed();
-
-    $: if (stepFinished) {
-        hideSkipStepButton = true;
-        nextStepButtonDisabled = false;
-        nextStepText = nextStepFinishedText;
-    }
-
-</script>
-
-<div class="Step">
-    <Progress />
-    <div class="header">
-        <div class="heading">
-            <img class="icon" src={headerIconPath} alt="heading icon"/>
-            <h1 class="title">{headerTitle}</h1>
-        </div>
-        {#if !hideSkipStepButton}
-            <button class="skipButton" on:click={handleSkipStep}>Skip this step</button>
-        {/if}
-    </div>
-    <div class="content">
-        <article>
-            <slot />
-        </article>
-        <section class="nextStep">
-            <p class="nextStepText">{nextStepText}</p>
-            <Button disabled={nextStepButtonDisabled}
-                    onClick={handleFinishStep}
-                    text={nextStepButtonText}
-                    src={nextStepButtonIcon}
-                    alt={nextStepButtonAlt}
-            />
-        </section>
-    </div>
-</div>
-
-<style>
-    .Step {
-        width: 100%;
-        height: 100%;
-    }
-
-    article {
-        position: relative;
-        display: block;
-        height: 100%;
-        width: 100%;
-        padding: 20px;
-        margin-bottom: 20px;
-        background-color: var(--background-color-secondary);
-        border: 1px solid var(--border-color-primary);
-        border-radius: 6px;
-        overflow-x: hidden;
-        overflow-y: auto;
-        box-sizing: border-box;
-    }
-
-    .content {
-        display: flex;
-        flex-direction: column;
-        padding: 0 24px;
-        height: calc(100% - 90px);
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 20px;
-        margin-top: 20px;
-        margin-bottom: 10px;
-    }
-
-    .heading {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .title {
-        display: flex;
-        align-items: center;
-        margin: 0;
-        color: var(--text-color-primary);
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .icon {
-        display: inline-block;
-        margin-right: 5px;
-        height: 24px;
-        width: 24px;
-        background-size: contain;
-        background-repeat: no-repeat;
-    }
-
-
-    .skipButton {
-        position: relative;
-        padding-right: 20px;
-        background: none;
-        border: none;
-        color: var(--text-color-secondary);
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-        cursor: pointer;
-    }
-
-    .skipButton::after {
-        content: url("public/assets/icons/arrow-right.svg");
-        position: absolute;
-        top: 3px;
-        right: 0;
-        width: 16px;
-        height: 16px;
-    }
-
-    .nextStep {
-        position: sticky;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 30px;
-        margin: 0 -24px;
-        padding: 20px 36px;
-        background-color: var(--background-color-secondary);
-        border: 1px solid var(--border-color-primary);
-    }
-
-    .nextStepText {
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    @media (min-width: 768px) {
-        .Step {
-            max-width: 630px;
-            overflow: hidden;
-        }
-
-        .content {
-            padding: 0;
-            height: calc(100% - 170px);
-        }
-
-        article {
-            height: calc(100% - 100px);
-            padding: 20px 35px;
-            margin-bottom: 0;
-        }
-
-        .header {
-            padding: 0;
-        }
-
-        .nextStep {
-            padding: 6px 36px;
-            margin: -5px 0 0;
-            border-radius: 6px;
-        }
-    }
-</style>