@qualityunit/liveagent-help 0.0.1 → 0.0.2

package/src/lib/components/nav/Progress.svelte

@@ -1,249 +0,0 @@
-<script lang="ts">
-    import { progress, hideGettingStarted } from "../../utils/progressStore.ts";
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    const headerText: string = "Getting started progress";
-
-     function toggleGettingStarted(): void {
-        hideGettingStarted.update(value => !value);
-     }
-
-    $: percentage = $progress ? Math.round($progress.filter(step => step.state === 'c').length / $progress.length * 100) : 0;
-    $: completedSteps = $progress ? $progress.filter(step => step.state === 'c').length : 0;
-</script>
-
-<div class="progress-wrapper">
-    <div class="header">
-        <h3 class="heading">{headerText}</h3>
-        <div class="header-right">
-            <p class="text">Do not show Getting started screen after login</p>
-            <button class="toggle-button" on:click={toggleGettingStarted}>
-                <span class:toggle-circle={$hideGettingStarted ? 'on' : 'off'} />
-            </button>
-        </div>
-    </div>
-    <div class="progress">
-        <div class="textPart">
-            <h1 class="percentage">{percentage}%</h1>
-            <div class="texts">
-                <h3 class="heading mobile">{headerText}</h3>
-                <p class="description">{completedSteps}/9 steps finished</p>
-            </div>
-        </div>
-        <div class="progress-bar">
-            <div class="progress-indicator" style="width: {percentage}%;">
-            </div>
-            {#each $progress as step, index (index)}
-                <div class="step {index < completedSteps ? 'completed' : 'pending'}" />
-            {/each}
-        </div>
-    </div>
-</div>
-
-<style>
-    .progress-wrapper {
-        width: 100%;
-        background-color: var(--background-color-secondary);
-    }
-
-    .header {
-        display: none;
-    }
-
-    .heading {
-        display: flex;
-        align-items: center;
-        margin: 0;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .heading.mobile {
-        font-size: 14px;
-    }
-
-    .text {
-        margin: 0;
-        color: var(--text-color-secondary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 400;
-        line-height: 20px;
-    }
-
-    .progress {
-        display: flex;
-        flex-direction: column;
-        padding: 12px 24px 14px;
-        border-bottom: 1px solid var(--border-color-primary);
-    }
-
-    .textPart {
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: space-between;
-        gap: 8px;
-    }
-
-    .texts {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-    }
-
-    .percentage {
-        display: flex;
-        align-items: center;
-        margin: 0;
-        color: var(--color-green-primary);
-        text-align: center;
-        font-size: 24px;
-        font-weight: 700;
-        line-height: 28px;
-    }
-
-    .description {
-        display: flex;
-        align-items: flex-end;
-        margin: 0;
-        color: var(--text-color-secondary);
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .progress-bar {
-        display: flex;
-        position: relative;
-        width: 100%;
-        height: 8px;
-        background-color: var(--border-color-primary);
-        border-radius: 4px;
-        overflow: hidden;
-    }
-
-    .progress-indicator {
-        position: absolute;
-        height: 100%;
-        background-color: var(--color-green-primary);
-        border-radius: 4px;
-    }
-
-    .step {
-        width: calc(100% / 9);
-        height: 8px;
-        flex-shrink: 0;
-        background-color: transparent;
-        position: relative;
-    }
-
-    .step.completed {
-        background-color: transparent;
-    }
-
-    .step:not(:last-child)::before {
-        content: '';
-        position: absolute;
-        right: 2px;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 4px;
-        height: 4px;
-        background-color: var(--border-color-grey);
-        border-radius: 50%;
-    }
-
-    .step.completed::before {
-        display: none;
-    }
-
-    .toggle-button {
-        background-color: var(--background-color-secondary);
-        cursor: pointer;
-        height: 24px;
-        width: 48px;
-        border: 1px solid var(--border-color-primary);
-        border-radius: 69px;
-        position: relative;
-        transition: background-color 0.3s;
-    }
-
-    .toggle-button .toggle-circle {
-        background-color: var(--text-color-secondary);
-        border-radius: 50%;
-        position: absolute;
-        top: 2px;
-        bottom: 2px;
-        width: 20px;
-        height: 20px;
-        transition: all 0.3s;
-    }
-
-    .toggle-button .on {
-        background-color: var(--color-green-primary);
-        right: 2px;
-    }
-
-    .toggle-button .off {
-        left: 2px;
-    }
-
-    @media (min-width: 768px) {
-        .progress-wrapper {
-            background: none;
-        }
-
-        .progress {
-            height: 40px;
-            max-width: 590px;
-            padding: 12px 36px 20px;
-            background-color: var(--background-color-secondary);
-            border: 1px solid var(--border-color-primary);
-            border-radius: 6px;
-        }
-
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            height: 36px;
-            padding: 4px;
-
-        }
-
-        .header-right {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .heading.mobile {
-            display: none;
-        }
-
-        .heading::before {
-            content: url("public/assets/icons/progress.svg");
-            display: inline-block;
-            margin-right: 5px;
-            height: 24px;
-            width: 24px;
-            background-size: contain;
-            background-repeat: no-repeat;
-        }
-
-        .texts {
-            flex-direction: row;
-            align-items: flex-end;
-        }
-
-        .textPart {
-            flex-direction: row;
-            justify-content: flex-start;
-        }
-    }
-</style>

package/src/lib/pages/ContactUs.svelte

@@ -1,372 +0,0 @@
-<script lang="ts">
-    import Page from "../components/containers/Page.svelte";
-    import Heading from "../components/common/Heading.svelte";
-    import Paragraph from "../components/common/Paragraph.svelte";
-    import ContactButton from "../components/containers/ContactButton.svelte";
-    import ContactRow from "../components/containers/ContactRow.svelte";
-    import Office from "../components/containers/Office.svelte"
-    import {getContext} from "svelte";
-    import LinkCard from "../components/containers/LinkCard.svelte";
-    import {currentTheme} from "../utils/themeStore.ts";
-
-    interface Office {
-        city: string;
-        image: string;
-        rows: string[];
-    }
-
-    const offices: Office[] = [
-        {
-            city: "Bratislava",
-            image: 'bratislava',
-            rows: [
-                "Quality Unit, s. r. o.", "Vajnorska 100/A", "83104 Bratislava", "Slovakia (EU)"
-            ]
-        },
-        {
-            city: "Kyiv",
-            image: 'kyiv',
-            rows: [
-                "Quality Unit Ukraine", "Solomianskyy rayon", "03110 Kyyiv", "Ukraine"
-            ]
-        },
-        {
-            city: "New York",
-            image: 'new-york',
-            rows: [
-                "Quality Unit, LLC", "3 Germay Dr.", "Wilmington, DE 19804", "USA"
-            ]
-        }
-    ]
-    const iconBasePath: string = getContext('iconBasePath');
-</script>
-
-<Page headingText="We’d love to hear from you."
-      paragraphText="Need support or advice? We’re ready to listen."
->
-    <div class="content">
-        <div class="contacts">
-            <div class="contact-buttons">
-                <div>
-                    <Heading text="Direct contacts: " />
-                    <div class="texts">
-                        <Paragraph text="Don't hesitate to contact us! We are available 24/7." />
-                        <img src={iconBasePath}smiley-face.svg alt="smiley face" />
-                    </div>
-                </div>
-                <ContactRow text="Email" contact="support@liveagent.com" icon="at-symbol" />
-                <div class="buttons">
-                    <ContactButton text="Chat with us" iconPath="chat-with-us" alt="chat" URL="google.com" highlight={true} />
-                    <ContactButton text="Whatsapp" iconPath="whatsapp_logo" alt="whatsapp-logo" URL="google.com" />
-                    <ContactButton text="Message us" iconPath="messenger_logo" alt="messenger-logo" URL="google.com" />
-                    <ContactButton text="Contact form" iconPath="form" alt="form" URL="google.com" />
-                </div>
-            </div>
-            <div class="sales-contacts">
-                <Heading text="Contact for sales purposes:" />
-                <div class="sales-rows">
-                    <ContactRow text="Email" contact="support@liveagent.com" icon="at-symbol" />
-                    <div class="row">
-                        <ContactRow text="Phone" contact="+1 888 659 6550" icon="at-symbol" />
-                        <p class="faded">(Toll Free in USA & Canada)</p>
-                    </div>
-                    <div class="row">
-                        <ContactRow text="Phone" contact="+421 2 33 456 826" icon="at-symbol" />
-                        <p class="faded">(European Union & Worldwide)</p>
-                    </div>
-                </div>
-            </div>
-            <div class="bottom-part">
-                <Heading text="Our offices:" additionalStyles="display: block"/>
-                <div class="offices">
-                    {#each offices as office}
-                        <Office city={office.city}
-                                image={office.image}
-                                rows={office.rows}
-                        />
-                    {/each}
-                </div>
-            </div>
-        </div>
-        <aside>
-            <div class="upperPart">
-                <Heading text="Self-help and system status:" />
-                <Paragraph text="Find answers to your questions, day or night." />
-                <div class="linkCards">
-                    <LinkCard image="support-portal-background"
-                              bottomText="Go to our support portal"
-                              heading="Support portal"
-                              text="Looking for answers?"
-                              socials={false}
-                    />
-                    <LinkCard image="status-page-background"
-                              bottomText="Go to status page"
-                              heading="Status page"
-                              text="Check out our service status"
-                              socials={false}
-                    />
-                </div>
-            </div>
-            <div class="lowerPart">
-                <Heading text="Social networks:" />
-                <div class="texts">
-                    <Paragraph text="We’re looking forward to talking to you on social media." />
-                    <img src="../../../public/assets/icons/winky-face.svg" alt="smiley face" >
-                </div>
-                <div class="cards">
-                    <div class="widget">
-                        <LinkCard image="facebook-background"
-                                  bottomText="Facebook"
-                                  icon="facebook_logo"
-                        />
-                        <h5>Connect with us</h5>
-                        <p>Join our community today</p>
-                    </div>
-                    <div class="widget">
-                        <LinkCard image="instagram-background"
-                                  bottomText="Instagram"
-                                  icon="instagram_logo"
-                        />
-                        <h5>Join our journey</h5>
-                        <p>Let's make memories</p>
-                    </div>
-                    <div class="widget">
-                        <LinkCard image="x-background"
-                                  bottomText="X"
-                                  icon="x_logo"
-                        />
-                        <h5>Let's connect</h5>
-                        <p>Join our tribe, let's grow</p>
-                    </div>
-                    <div class="widget">
-                        <LinkCard image="youtube-background"
-                                  bottomText="Youtube"
-                                  icon="youtube_logo"
-                        />
-                        <h5>Learn & grow on</h5>
-                        <p>Discover and thrive</p>
-                    </div>
-                </div>
-            </div>
-        </aside>
-    </div>
-</Page>
-
-<style>
-    .content {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-        height: 100%;
-        padding: 14px 24px 24px 24px;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-
-    .contacts {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        gap: 40px;
-        width: 100%;
-        margin-bottom: 20px;
-        padding: 20px 14px;
-        background-color: var(--background-color-secondary);
-        border: 1px solid var(--border-color-primary);
-        border-radius: 6px;
-        box-sizing: border-box;
-    }
-
-    .contact-buttons {
-        container-type: inline-size;
-        container-name: contactButtons;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        gap: 20px;
-    }
-
-    .row {
-        display: flex;
-        flex-flow: column;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-    }
-
-    .texts {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-    }
-
-    .faded {
-        margin: 0;
-        color: var(--text-color-secondary);
-        font-family: Roboto;
-        font-size: 13px;
-        font-weight: 400;
-        line-height: 20px;
-    }
-
-    .buttons {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-        width: 100%;
-    }
-
-    .sales-contacts {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 20px;
-    }
-
-    .sales-rows {
-        container-type: inline-size;
-        container-name: contactRow;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
-        width: 100%;
-    }
-
-    .bottom-part {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .offices {
-        display: flex;
-        flex-flow: wrap row;
-        align-items: flex-start;
-        justify-content: center;
-        gap: 20px;
-    }
-
-    aside {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        align-items: flex-start;
-        justify-content: center;
-        gap: 50px;
-        min-width: 300px;
-        width: 100%;
-    }
-
-    .cards {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        gap: 20px;
-    }
-
-    .upperPart {
-        container-type: inline-size;
-        container-name: upperPart;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-    }
-
-    .linkCards {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-    }
-
-    .lowerPart {
-        container-type: inline-size;
-        container-name: lowerPart;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-    }
-
-    .widget > h5 {
-        margin: 10px 0 0 10px;
-        color: var(--text-color-primary);
-        font-family: Roboto;
-        font-size: 14px;
-        font-weight: 700;
-        line-height: 20px;
-    }
-
-    .widget > p {
-        margin: 0 0 0 10px;
-        color: var(--text-color-secondary);
-        font-family: Roboto;
-        font-size: 14px;
-        line-height: 20px;
-    }
-
-    @media (min-width: 768px) {
-        .content {
-            flex-direction: row;
-        }
-
-        .contacts {
-            padding: 50px;
-            margin-bottom: 0;
-            border: none;
-            border-right: 1px solid var(--border-color-primary);
-            border-radius: 0;
-            max-width: 680px;
-        }
-
-        aside {
-            width: auto;
-            padding: 50px;
-        }
-
-        .upperPart {
-            align-items: flex-start;
-        }
-
-        .lowerPart {
-            align-items: flex-start;
-        }
-    }
-
-    @container contactButtons (min-width: 400px) {
-        .buttons {
-            display: grid;
-            grid-gap: 6px;
-            grid-template-columns: 1fr 1fr;
-        }
-    }
-
-    @container contactRow (min-width: 400px) {
-        .row {
-            flex-direction: row;
-        }
-    }
-
-    @container lowerPart (min-width: 500px) {
-        .cards {
-            display: grid;
-            grid-gap: 20px;
-            grid-template-columns: 1fr 1fr;
-            margin-top: 20px;
-        }
-    }
-
-    @container upperPart (min-width: 500px) {
-        .linkCards {
-            flex-direction: row;
-        }
-    }
-
-</style>