@qualityunit/liveagent-help 0.0.1 → 0.0.3

package/src/lib/pages/ImproveLaSkills.svelte

@@ -1,117 +0,0 @@
-<script lang="ts">
-    import Page from "../components/containers/Page.svelte";
-    import type {CardTypeInterface} from "../utils/types.ts";
-    import Card from "../components/containers/Card.svelte";
-
-    const cards: CardTypeInterface[] = [
-        {
-            heading: "Email templates",
-            text: "Personalize your customer interactions with customizable email templates.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Ticket Filters",
-            text: "Streamline ticket management by using filters to sort and organize your tickets.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Agents ranking",
-            text: "Enable your customers to assess the assistance provided by your support agents.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Canned Messages",
-            text: "Create pre-defined responses to commonly asked questions for quick and consistent replies.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Automatic Rules",
-            text: "Improve efficiency by creating predefined actions and workflows with rules.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Ticket Tags",
-            text: "Enhance ticket organization and searchability by creating useful tags.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Reports",
-            text: "Gain valuable insights into your customer service operations through detailed reports.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "SLA (Service Level Agreement)",
-            text: "Define and monitor performance standards by creating Service Level Agreements.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Domain Parking",
-            text: "Connect and use your own domain with your LiveAgent account.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Customizations",
-            text: "Personalize your LiveAgent according to your branding needs and preferences",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Integrations & Plugins",
-            text: "Extend the functionality of LiveAgent by integrating with various platforms via plugins.",
-            link: 'http://google.com'
-        },
-        {
-            heading: "Explore Other Features",
-            text: "Better understand and utilize the full range of features offered by LiveAgent.",
-            link: 'http://google.com'
-        },
-    ]
-</script>
-
-<Page headingText="Provide excellent customer service."
-      paragraphText="To truly master LiveAgent, check out our collection of how-to articles and guides."
->
-    <div class="wrapper">
-        {#each cards as card}
-            <Card headingText={card.heading}
-                  paragraphText={card.text}
-                  link={card.link}
-            />
-        {/each}
-    </div>
-</Page>
-
-<style>
-    .wrapper {
-        display: grid;
-        grid-gap: 20px;
-        grid-template-columns: 1fr;
-        align-items: start;
-        justify-items: center;
-        width: 100%;
-        height: 100%;
-        padding: 20px 24px;
-        overflow-y: auto;
-    }
-    
-    @container (min-width: 600px) {
-        .wrapper {
-            align-items: start;
-            justify-content: space-evenly;
-            grid-template-columns: repeat(2, 250px);
-        }
-    }
-
-    @container (min-width: 850px) {
-        .wrapper {
-            align-items: start;
-            justify-content: start;
-            grid-template-columns: repeat(3, 250px);
-        }
-    }
-
-    @container (min-width: 1100px) {
-        .wrapper {
-            grid-template-columns: repeat(4, 250px);
-        }
-    }
-</style>

package/src/lib/pages/Shortcuts.svelte

@@ -1,334 +0,0 @@
-<script lang="ts">
-    import Paragraph from "../components/common/Paragraph.svelte"
-    import type {ShortcutRow, Tooltip as Tooltips} from "../utils/types.ts"
-    import ShortcutKeys from "../components/common/ShortcutKeys.svelte";
-    import {getContext} from "svelte";
-    import Tooltip from "../components/containers/Tooltip.svelte";
-    import Page from "../components/containers/Page.svelte";
-    import {currentTheme} from "../utils/themeStore.ts";
-
-    const os: string = getContext<string>('OS');
-    const functionalKey: string = os === 'win' ? 'Ctrl' : 'Command';
-    const iconBasePath: string = getContext<string>('iconBasePath');
-
-    const rows: ShortcutRow[] = [
-        {
-            text: 'Home tab',
-            shortcutKeys: [
-                { text: functionalKey },
-                { text: 'H' }
-            ]
-        },
-        {
-            text: 'Open ticket to be solved (if any)',
-            shortcutKeys: [
-                { text: functionalKey },
-                { text: 'D' }
-            ]
-        },
-        {
-            text: 'Resolve ticket',
-            shortcutKeys: [
-                { text: functionalKey },
-                { text: 'E' }
-            ]
-        },
-        {
-            text: 'Show predefined answers',
-            shortcutKeys: [
-                { text: functionalKey },
-                { text: 'I' }]
-        },
-        {
-            text: 'Answer the chat',
-            shortcutKeys: [
-                { text: functionalKey },
-                { text: 'M' }
-            ]
-        },
-        {
-            text: 'Answer the chat on background',
-            shortcutKeys: [
-                { text: functionalKey },
-                {
-                    text: 'Shift',
-                    iconPath: `${iconBasePath}key_shift.svg`
-                },
-                { text: 'M' }
-            ]
-        },
-        {
-            text: 'Open ticket on background ',
-            shortcutKeys: [
-                { text: functionalKey },
-                {
-                    text: 'Left click',
-                    iconPath: `${iconBasePath}key_left_click.svg`
-                }
-            ]
-        },
-        {
-            text: 'Send message',
-            shortcutKeys: [
-                { text: functionalKey },
-                { text: 'S' }
-            ]
-        },
-        {
-            text: 'Close ticket tab',
-            shortcutKeys: [
-                { text: functionalKey },
-                {
-                    text: 'Middle click',
-                    iconPath: `${iconBasePath}key_middle_click.svg`
-                }
-            ]
-        },
-        {
-            text: 'Close ticket window',
-            shortcutKeys: [
-                { text: functionalKey },
-                { text: 'Q' }
-            ]
-        },
-        {
-            text: 'Show canned messages',
-            shortcutKeys: [
-                { text: functionalKey },
-                { text: 'K' }
-            ]
-        },
-        {
-            text: 'Show canned messages',
-            shortcutKeys: [
-                { text: functionalKey },
-                { text: 'Spacebar' }
-            ]
-        },
-        {
-            text: 'Cycle through the opened ticket tabs',
-            shortcutKeys: [
-                { text: functionalKey },
-                { iconPath: `${iconBasePath}key_up.svg` }
-            ]
-        },
-        {
-            text: 'Cycle through the opened ticket tabs',
-            shortcutKeys: [
-                { text: functionalKey },
-                { iconPath: `${iconBasePath}key_down.svg` }
-            ]
-        },
-        {
-            text: 'Close ticket tab',
-            shortcutKeys: [
-                {
-                    text: 'Middle click',
-                    iconPath: `${iconBasePath}key_middle_click.svg`
-                }
-            ]
-        }
-    ]
-    const tooltips: Tooltips[] = [
-        {
-            className: 'nextTab',
-            text: 'Previous or next tab',
-            shortcut: [
-                { text: functionalKey },
-                { iconPath: `${iconBasePath}key_down.svg` }
-            ],
-            shortcutAlt: [
-                { text: functionalKey },
-                { iconPath: `${iconBasePath}key_up.svg` }
-            ]
-        },
-        {
-            className: 'closeTab',
-            text: 'Close active tab',
-            shortcut: [
-                { text: functionalKey },
-                { text: 'Q' }
-            ]
-        },
-        {
-            className: 'answer',
-            text: 'Answer ticket',
-            shortcut: [
-                { text: functionalKey },
-                { text: 'D' }
-            ]
-        },
-        {
-            className: 'send',
-            text: 'Send message',
-            shortcut: [
-                { text: functionalKey },
-                { text: 'S' }
-            ]
-        },
-        {
-            className: 'canned',
-            text: 'Canned message',
-            shortcut: [
-                { text: functionalKey },
-                { text: 'K' }
-            ],
-            shortcutAlt: [
-                { text: functionalKey },
-                { text: 'Spacebar' }
-            ]
-        },
-        {
-            className: 'predefined',
-            text: 'Predefined answers',
-            shortcut: [
-                { text: functionalKey },
-                { text: 'I' }
-            ]
-        },
-    ]
-
-</script>
-
-<Page headingText="Save time with keyboard shortcuts"
-      paragraphText="Use keyboard shortcuts to enhance your skills and productivity."
->
-    <div class="content">
-        <div class="info-panel mobile">
-            <span>When you hover over certain elements, a tooltip will be displayed if a shortcut is available.</span>
-        </div>
-        <div class="shortcuts">
-            {#each rows as row}
-                <div class="row">
-                    <Paragraph text={row.text} />
-                    <ShortcutKeys keys={row.shortcutKeys} />
-                </div>
-            {/each}
-        </div>
-        <aside>
-            <div class="info-panel">
-                <span>When you hover over certain elements, a tooltip will be displayed if a shortcut is available.</span>
-            </div>
-            <div class="reply">
-                {#each tooltips as tooltip}
-                    <Tooltip className={tooltip.className}
-                             text={tooltip.text}
-                             shortcut={tooltip.shortcut}
-                             shortcutAlt={tooltip.shortcutAlt}
-                    />
-                {/each}
-            </div>
-        </aside>
-    </div>
-</Page>
-
-<style>
-    .row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 6px 20px;
-        border-bottom: 1px solid var(--border-color-primary);
-    }
-
-    .content {
-        display: block;
-        height: calc(100% - 100px);
-        width: 100%;
-        padding: 14px 24px 24px 24px;
-        overflow-x: hidden;
-        overflow-y: auto;
-        box-sizing: border-box;
-    }
-
-    .shortcuts {
-        display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
-        align-self: flex-start;
-        width: 100%;
-        background-color: var(--background-color-secondary);
-        border: 1px solid var(--border-color-primary);
-        border-radius: 6px;
-    }
-
-    aside {
-        display: flex;
-        flex-direction: column;
-        flex: 1 0 0;
-        align-items: flex-start;
-        width: 100%;
-        gap: 40px;
-    }
-
-    .reply {
-        position: relative;
-        display: flex;
-        background-image: url("public/assets/images/reply_background.svg");
-        background-repeat: no-repeat;
-        width: 100%;
-        margin-left: -24px;
-        min-height: 620px;
-    }
-
-    .info-panel {
-        display: none;
-    }
-
-    .mobile {
-        display: block;
-        padding: 16px 12px;
-        margin-bottom: 10px;
-        background-color: var(--background-color-blue-primary);
-        border: 1px solid var(--border-color-infoPanel);
-        border-radius: 6px;
-    }
-
-    .info-panel span {
-        color: var(--text-color-infoPanel);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    @media (min-width: 1200px) {
-        .content {
-            display: flex;
-            align-items: flex-start;
-            justify-content: center;
-            height: 100%;
-            padding: 0;
-        }
-
-        .shortcuts {
-            flex: 1;
-            height: 100%;
-            max-width: 500px;
-            border-right: 1px solid var(--border-color-primary);
-            border-radius: 0;
-        }
-
-        .info-panel {
-            display: block;
-            width: 95%;
-            padding: 16px 12px;
-            border: 1px solid var(--border-color-infoPanel);
-            border-radius: 6px;
-            background-color: var(--background-color-blue-primary);
-        }
-
-        .mobile {
-            display: none;
-        }
-
-        aside {
-            padding: 20px;
-        }
-
-        .reply {
-            margin: 0;
-            height: 100%;
-        }
-    }
-</style>

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

@@ -1,175 +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 AgentsTag from "../../components/common/AgentsTag.svelte";
-    import Button from "../../components/common/Button.svelte";
-    import {getContext, onMount} from "svelte";
-    import {progress} from "../../utils/progressStore.ts";
-    import {isAgentManaged} from "../../utils/MockBackend.ts";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    const iconBasePath: string = getContext<string>('iconBasePath');
-
-    let stepCompleted:boolean = false;
-
-    onMount(async (): Promise<void> => {
-        stepCompleted = $progress[1].state === 'c';
-
-        if (!stepCompleted) {
-            const response: {completionStatus: boolean} = await isAgentManaged();
-            stepCompleted = response.completionStatus;
-        }
-    })
-
-    async function handleManageAgents(): Promise<void> {
-        const response: {completionStatus: boolean} = await isAgentManaged(true);
-        stepCompleted = response.completionStatus;
-        window.location.hash = 'Agents';
-    }
-
-</script>
-
-<Step bind:stepFinished={stepCompleted}
-      headerTitle="Add agent"
-      headerIconPath="{iconBasePath}add-agents.svg"
-      nextStepCase="mid"
-      nextStepUnfinishedText="Create agent account to complete this step."
-      nextStepFinishedText="Next, let's further explore Departments and their purpose."
-      path="/add-agents"
->
-    <div class="wrapper">
-        <section>
-            <Heading text="Add agents"/>
-            <Paragraph text="Let's start by creating agent accounts for your colleagues and team members."/>
-            <Paragraph text="Agent accounts can also be assigned to specific departments based on their area of expertise, and LiveAgent software even allows you to manage their permissions and roles. For instance, some agents may only be able to view and respond to tickets, while others might have the authority to manage knowledge base content or even other agents."/>
-        </section>
-        <section>
-            <Heading text="Types of LiveAgent account"/>
-            <Paragraph text="By default, there are three agent account types in LiveAgent. Agent, Admin, and Owner."/>
-            <div class="panel-wrapper">
-                <div class="panel panel-agents">
-                    <AgentsTag text="Agents" />
-                    <p class="panel-text">Agents can view, reply to, and manage tickets, pick up live chats/calls, write and manage knowledge base content, manage contacts, create their own canned messages & predefined answers, manage their own agent profiles, and see their own agent reports.</p>
-                </div>
-                <div class="panel panel-admins">
-                    <AgentsTag text="Admins" icon="{iconBasePath}admin.svg"/>
-                    <p class="panel-text">Admins, in addition to agent role permissions, can manage accounts of other agents and admins (but not the owner's account), see all reports, and configure the system settings.</p>
-                </div>
-                <div class="panel panel-owner">
-                    <AgentsTag text="Owner" icon="{iconBasePath}owner.svg"/>
-                    <p class="panel-text">In addition to admin role permissions, the owner can also manage LiveAgent account billing and payment settings.</p>
-                </div>
-                <div class="panel-bottom">
-                    <span class="text">Now, let’s create agent accounts for your coworkers and set their roles.</span>
-                    <Button reversedColors={stepCompleted} onClick={handleManageAgents} text="Manage agents"/>
-                </div>
-            </div>
-        </section>
-        <section class="info-panel">
-            <h4 class="heading-info">Custom agent roles (paid feature)</h4>
-            <p class="text-info">In addition to the default roles, you can establish tailored agent roles and grant them specific permissions to suit your unique operational needs.</p>
-        </section>
-    </div>
-</Step>
-
-<style>
-    .wrapper {
-        width: 100%;
-        height: calc(100% - 12px);
-    }
-
-    section {
-        margin: 12px 0;
-    }
-
-    .panel-wrapper {
-        display: flex;
-        flex-direction: column;
-        padding: 16px 20px 12px 20px;
-        border-radius: 6px;
-        background: var(--background-color-grey-secondary);
-    }
-
-    .panel {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: space-between;
-        padding: 14px 16px;
-        margin-bottom: 10px;
-        gap: 12px;
-        background: var(--background-color-grey-primary);
-        border-radius: 6px;
-    }
-
-
-    .panel-text {
-        color: var(--text-color-primary);
-        margin: 0;
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 20px;
-    }
-
-    .panel-bottom {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        gap: 10px;
-    }
-
-    .panel-bottom .text {
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .info-panel {
-        background-color: var(--background-color-blue-primary);
-        padding: 6px 10px 6px 32px;
-        border: 1px solid var(--border-color-infoPanel);
-        border-radius: 6px;
-    }
-
-    .heading-info {
-        color: var(--text-color-infoPanel);
-        position: relative;
-        font-family: Roboto;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 20px;
-        margin: 0;
-    }
-
-    .heading-info::before {
-        content: url("public/assets/icons/info.svg");
-        position: absolute;
-        top: 2px;
-        left: -23px;
-        width: 16px;
-        height: 16px;
-    }
-
-    .text-info {
-        color: var(--text-color-infoPanel);
-        font-family: Roboto;
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 20px;
-        margin: 0;
-    }
-
-    @media (min-width: 768px) {
-        .panel {
-            flex-direction: row;
-        }
-
-        .panel-bottom {
-            flex-direction: row;
-        }
-    }
-</style>

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

@@ -1,81 +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 Button from "../../components/common/Button.svelte";
-    import {getContext, onMount} from "svelte";
-    import { progress } from "../../utils/progressStore";
-    import { isDepartmentManaged } from "../../utils/MockBackend.ts";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    const iconBasePath: string = getContext<string>('iconBasePath');
-
-    let stepCompleted: boolean = false;
-
-    onMount(async (): Promise<void> => {
-        stepCompleted = $progress[2]?.state === 'c';
-
-        if (!stepCompleted) {
-            const response: { completionStatus: boolean } = await isDepartmentManaged();
-            stepCompleted = response.completionStatus;
-        }
-    });
-
-    async function handleManageDepartments(): Promise<void> {
-        const response: { completionStatus: boolean } = await isDepartmentManaged(true);
-        stepCompleted = response.completionStatus;
-        window.location.hash = 'Departments';
-    }
-</script>
-
-
-<Step bind:stepFinished={stepCompleted}
-      headerTitle="Add departments"
-      headerIconPath="{iconBasePath}add-departments.svg"
-      nextStepCase="mid"
-      nextStepUnfinishedText="Create new department or rename default one to finish this step."
-      nextStepFinishedText="Now that we have Agents and Departments sorted out, we need to establish some communication channels."
-      path="/add-departments"
->
-    <div class="wrapper">
-        <section>
-            <Heading text="Add departments" />
-            <Paragraph text="Adding Departments to your LiveAgent account can significantly enhance the efficiency of your customer support process." />
-            <Paragraph text="The purpose of creating Departments is to sort and assign tickets to the respective teams or agents best suited to handle them. This not only improves the efficiency and productivity of customer support but also ensures that customer queries are managed by those with the right expertise." />
-            <Paragraph text="Departments also allow for structured workflows. You can set rules and access permissions for each department, which helps in maintaining an organized working environment. " />
-            <Paragraph text="Moreover, departments can provide vital data for analytics and insights, giving a clear picture of which areas receive the most queries or require more resources to enhance customer service. The department structure also assists in delivering a more personalized service as the customer interacts with specialists familiar with their specific concerns or needs." />
-        </section>
-        <section class="panel-bottom">
-            <span class="panel-bottom-text">Your LiveAgent account already has one default department named “General”. Feel free to rename it or add new departments now.</span>
-            <Button onClick={handleManageDepartments} text="Manage departments" reversedColors={stepCompleted} />
-        </section>
-    </div>
-</Step>
-
-<style>
-    .panel-bottom {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        justify-content: space-between;
-        gap: 20px;
-        padding: 16px 18px 24px;
-        border-radius: 6px;
-        background: var(--background-color-grey-secondary);
-    }
-
-    .panel-bottom-text {
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    @media (min-width: 768px) {
-        .panel-bottom {
-            flex-direction: row;
-            align-items: center;
-        }
-    }
-</style>