share.html

---
layout: default
---

<template id="message-template-template">
    <div class="card text-left my-3 mx-0" name="message-template">
        <div class="card-body">

            <h4 name="message-label" class="card-title pl-1"></h4>
            <p name="message-body" class="card-text rounded bg-light p-3"></p>

            <div class="form-group form-check form-check-inline mb-0">
                <input type="checkbox" class="form-check-input" name="send-texted-result" disabled />
                <label class="form-check-label">Select <code>Texted</code> result code and load next contact after
                    sending?
                </label>
            </div>
        </div>
    </div>
</template>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="https://turbovpb.com">
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-telephone-outbound-fill" fill="currentColor"
            xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
                d="M2.267.98a1.636 1.636 0 0 1 2.448.152l1.681 2.162c.309.396.418.913.296 1.4l-.513 2.053a.636.636 0 0 0 .167.604L8.65 9.654a.636.636 0 0 0 .604.167l2.052-.513a1.636 1.636 0 0 1 1.401.296l2.162 1.681c.777.604.849 1.753.153 2.448l-.97.97c-.693.693-1.73.998-2.697.658a17.471 17.471 0 0 1-6.571-4.144A17.47 17.47 0 0 1 .639 4.646c-.34-.967-.035-2.004.658-2.698l.97-.969zM11 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V1.707l-4.146 4.147a.5.5 0 0 1-.708-.708L14.293 1H11.5a.5.5 0 0 1-.5-.5z" />
        </svg> TurboVPB
    </a>
</nav>

<div class="container container-sm mt-3 mb-5">
    <div class="row mb-2">
        <div class="col"></div>
        <div class="col-md-12 text-center">
            <h1 class="my-4 display-3">Import 2-Click Texting Settings</h1>
        </div>
        <div class="col"></div>
    </div>

    <div class="row mb-2 text-center">
        <div class="col"></div>
        <div class="col-md-8">
            <button id="import-settings" class="btn btn-primary btn-lg px-5 pt-3 pb-2 m-3" disabled hidden>
                <h3>
                    <svg width="1em" height="1em" class="mr-1" viewBox="0 0 16 16" class="bi bi-cloud-arrow-down-fill"
                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z" />
                    </svg>

                    Import Settings
                </h3>
            </button>

            <div id="version-gt-0-8-message" class="alert alert-info">
                <h4 class="alert-heading">
                    TurboVPB Version >= 0.8.0 Required
                </h4>

                <p>You first need to install or update TurboVPB. To install the extension, click here:</p>

                <a class="btn btn-primary btn-lg my-2 mx-auto" id="install-chrome"
                    href="https://chrome.google.com/webstore/detail/turbovpb/deekoplmjnhcnbkpojidakdbllmdhekh?hl=en-US"
                    target="_blank">
                    <img src="images/chrome-logo.png" width="40px" class="mr-2"> Get TurboVPB for Chrome
                </a>
                <a class="btn btn-primary btn-lg my-2 mx-auto" id="install-firefox"
                    href="https://addons.mozilla.org/en-US/firefox/addon/turbovpb/" target="_blank" hidden>
                    <img src="images/firefox-logo.png" width="40px" class="mr-2">
                    Get TurboVPB for Firefox
                </a>
                <script>
                    if (/firefox/i.test(navigator.userAgent)) {
                        document.getElementById('install-chrome').setAttribute('hidden', 'true')
                        document.getElementById('install-firefox').removeAttribute('hidden')
                    }
                </script>
            </div>
        </div>
        <div class="col"></div>
    </div>

    <div class="row mb-5">
        <div class="col"></div>
        <div class="col-md-8 text-center">
            <h2 class="my-3">Text Message Templates</h2>
            <div id="message-template-container" class="my-3"></div>
        </div>
        <div class="col"></div>
    </div>

</div>

<script>
    const THEIR_NAME_REGEX = /([\[\(\{\<]+\s*(?:their|thier|there)\s*name\s*[\]\)\}\>]+)/ig
    const YOUR_NAME_REGEX = /([\[\(\{\<]+\s*(?:your|y[ou]r|you'?re|my)\s*name\s*[\]\)\}\>]+)/ig
    const ADDITIONAL_FIELDS_REGEX = /([\[\(\{\<]+[\w\s]+[\]\)\}\>])+/g

    class MessageTemplate extends HTMLElement {
        constructor(label, message, result) {
            super()
            const template = document.getElementById('message-template-template').content
            this.appendChild(template.cloneNode(true));

            if (label) {
                this.querySelector(`[name='message-label']`).innerText = label
            }
            if (message) {
                const bodyContainer = this.querySelector(`[name='message-body']`)
                const parts = message.split(THEIR_NAME_REGEX)
                    .map((s) => s.split(YOUR_NAME_REGEX).map((s) => s.split(ADDITIONAL_FIELDS_REGEX)))
                    .flat(3)
                for (let part of parts) {
                    let elem
                    if (THEIR_NAME_REGEX.test(part) || YOUR_NAME_REGEX.test(part) || ADDITIONAL_FIELDS_REGEX.test(part)) {
                        elem = document.createElement('code')
                    } else {
                        elem = document.createElement('span')
                    }
                    elem.innerText = part

                    bodyContainer.appendChild(elem)
                }
            }
            if (result && result.toLowerCase() === 'texted') {
                this.querySelector(`[name='send-texted-result']`).checked = true
            }
        }
    }
    window.customElements.define('message-template', MessageTemplate)

    const search = (new URL(window.location.href)).searchParams
    let messageTemplates = []
    if (search.get('messageTemplates')) {
        try {
            messageTemplates = JSON.parse(search.get('messageTemplates'))
        } catch (err) {
            console.error('Error parsing messageTemplates')
        }
    }

    const container = document.getElementById('message-template-container')
    for (let { label, message, result } of messageTemplates) {
        if (label && message) {
            const elem = new MessageTemplate(label, message, result)
            container.appendChild(elem)
        }
    }
</script>
<script src="dependencies/sentry-5.27.0-with-tracing.min.js"></script>
<script>
    Sentry.init({ dsn: 'https://6c908d99b8534acebf2eeecafeb1614e@o435207.ingest.sentry.io/5393315' });
</script>
<script async src="dependencies/ackee-tracker.min.js" data-ackee-server="https://analytics.turbovpb.com"
    data-ackee-domain-id="d72e1472-0d7f-4ed6-976b-cc6dff65bc1d" data-ackee-opts='{ "detailed": true }'></script>