@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/styles/CallQueuePop.module.scss

@@ -0,0 +1,646 @@
+// ---------------------------------------------------------------------------
+// Call Queue Pop (.cqpop)
+// ---------------------------------------------------------------------------
+// Bottom-right stack of "a call is ringing on this queue" cards, rendered once
+// at the authenticated root by components/callQueue/CallQueuePop.jsx. Every
+// call queue in the Zoom account pops and they all share one card style — the
+// badge carries the queue's own name, so no per-queue colour is needed.
+//
+// Visually this is a glassmorphism language (blur + a translucent primary
+// wash). It lives in its own namespace on purpose: a consuming app's legacy
+// call banner is typically a single full-width bottom-centre bar, this is a
+// vertical stack of independent cards. Nothing here touches that.
+//
+// Ported from the CRM's resources/css/_call-queue.scss. The sass `config`
+// variables it used do not exist in this library, so every brand value is a
+// CSS custom property with a neutral fallback — a project that defines nothing
+// gets a plain, working call pop rather than any one project's colours.
+// ---------------------------------------------------------------------------
+
+// Local aliases only. Declared via a mixin and applied to BOTH the stack and
+// the card: CSS-module scoping means nothing can rely on a shared `:root`
+// block, and a card rendered outside the stack must still resolve its colours.
+@mixin cqpop-tokens {
+    --cq-primary: var(--primary-color, #00386c);
+    --cq-secondary: var(--secondary-color, #404040);
+    --cq-tertiary: var(--tertiary-color, #fff);
+    --cq-paragraph: var(--paragraph-color, #2b2b2b);
+    --cq-background: var(--background-color, #fff);
+    --cq-br: var(--br, 5px);
+    --cq-btn-br: var(--btn-br, 5px);
+
+    // Literals in the original, kept literal here: they match the legacy
+    // `.cpview` / `.cpdismiss` actions rather than any token.
+    --cq-answer: rgb(43, 145, 85);
+    --cq-dismiss: rgb(214, 100, 100);
+}
+
+.cqpopStack {
+    @include cqpop-tokens;
+
+    position: fixed;
+    right: 1.25rem;
+    bottom: 1.25rem;
+    z-index: 1000; // above the goalbox (999), below the modals (1051+)
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+    width: 340px;
+    max-width: calc(100vw - 2rem);
+    // The stack itself is only a positioning frame — let clicks through the
+    // gaps between cards.
+    pointer-events: none;
+}
+
+// Trial-run banner above the stack: small, muted, unmistakably temporary.
+.cqpopTrial {
+    pointer-events: none;
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: center;
+    align-self: flex-end;
+    padding: 0.2rem 0.55rem;
+    border: 1px solid color-mix(in srgb, var(--cq-primary) 20%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--cq-primary) 8%, transparent);
+    backdrop-filter: blur(16px) saturate(180%);
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    color: color-mix(in srgb, var(--cq-paragraph) 75%, transparent);
+    font-size: 0.68rem;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+
+    svg {
+        flex-shrink: 0;
+        color: var(--cq-primary);
+    }
+}
+
+.cqpopCard {
+    @include cqpop-tokens;
+
+    pointer-events: auto;
+    padding: 0.75rem 0.9rem;
+    border: 1px solid color-mix(in srgb, var(--cq-primary) 25%, transparent);
+    border-radius: calc(var(--cq-br) * 2);
+    background-color: color-mix(in srgb, var(--cq-primary) 15%, transparent);
+    backdrop-filter: blur(16px) saturate(180%);
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+    animation: cqpop-in 0.28s cubic-bezier(0.33, 1, 0.68, 1) both;
+
+    // One accent for every queue: the badge names the queue, so the spine is
+    // only there to mark the card as a call pop.
+    border-left: 4px solid var(--cq-primary);
+}
+
+.cqpopCardLeaving {
+    animation: cqpop-out 0.22s cubic-bezier(0.33, 0, 0.68, 0) both;
+}
+
+.cqpopCardHead {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-bottom: 0.55rem;
+}
+
+.cqpopCardBody {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.cqpopCardActions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+// A slim row under the primary actions for the quieter "go somewhere else"
+// link, so Pick up / Dismiss keep the whole action bar to themselves.
+.cqpopCardMore {
+    display: flex;
+    justify-content: center;
+    margin-top: 0.4rem;
+}
+
+// One badge style for every call queue — the text IS the queue's own name, so
+// nothing is left for a colour to say.
+.cqpopBadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-width: 0;
+    padding: 0.2rem 0.6rem;
+    border-radius: 999px;
+    background: var(--cq-primary);
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    color: var(--cq-tertiary);
+    // Queue names come from Zoom admin and can be long; keep the badge on one
+    // line and let the timer beside it hold its place.
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// Pulsing "still ringing" indicator inside the badge.
+.cqpopDot {
+    width: 7px;
+    height: 7px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.95);
+    animation: cqpop-pulse 1.2s ease-in-out infinite;
+}
+
+.cqpopTimer {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--cq-paragraph) 75%, transparent);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+.cqpopCaller {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--cq-primary);
+
+    svg {
+        flex-shrink: 0;
+    }
+}
+
+.cqpopNumber {
+    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
+    font-size: 1.02rem;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    color: var(--cq-primary);
+}
+
+// Which of the contact's four numbers the caller rang in on ("mobile", "work"
+// …). Deliberately quiet — it annotates the number, it isn't a headline.
+.cqpopMatched {
+    font-size: 0.64rem;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    color: color-mix(in srgb, var(--cq-paragraph) 55%, transparent);
+    white-space: nowrap;
+}
+
+.cqpopName {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--cq-paragraph);
+}
+
+.cqpopClient {
+    font-size: 0.78rem;
+    color: var(--cq-paragraph);
+}
+
+.cqpopClientNone {
+    font-style: italic;
+    color: color-mix(in srgb, var(--cq-paragraph) 55%, transparent);
+}
+
+// Client name + open-task badge, separated by a hairline from the caller
+// line above it so the snapshot reads as its own block.
+.cqpopClientHead {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-top: 0.15rem;
+    padding-top: 0.35rem;
+    border-top: 1px solid color-mix(in srgb, var(--cq-primary) 18%, transparent);
+}
+
+.cqpopClientLink {
+    font-size: 0.88rem;
+    font-weight: 700;
+    color: var(--cq-primary);
+    text-decoration: underline;
+
+    &:hover {
+        color: color-mix(in srgb, var(--cq-primary) 85%, #000);
+    }
+}
+
+.cqpopClientName {
+    font-size: 0.88rem;
+    font-weight: 700;
+    color: var(--cq-primary);
+}
+
+// Two columns: a fixed label gutter keeps every value on the same left
+// edge, however short the label is.
+.cqpopClientGrid {
+    display: grid;
+    grid-template-columns: 4.4rem 1fr;
+    gap: 0.1rem 0.5rem;
+    margin: 0.35rem 0 0;
+    font-size: 0.72rem;
+    line-height: 1.35;
+
+    dt {
+        margin: 0;
+        font-weight: 600;
+        color: color-mix(in srgb, var(--cq-paragraph) 60%, transparent);
+    }
+
+    dd {
+        margin: 0;
+        color: var(--cq-paragraph);
+        overflow-wrap: anywhere;
+    }
+}
+
+// The next meeting doubles as the way into the calendar — a link, but kept
+// as quiet as the plain text it replaced until it is pointed at.
+.cqpopClientEvent {
+    display: block;
+    margin-top: 0.3rem;
+    border-radius: var(--cq-br);
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--cq-paragraph) 85%, transparent);
+    text-decoration: none;
+    // Rendered as a <button> when the host app supplies an onOpenCalendar
+    // handler, so the button chrome has to be neutralised here.
+    padding: 0;
+    border: none;
+    background: none;
+    font-family: inherit;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+        color: var(--cq-primary);
+        text-decoration: underline;
+    }
+
+    &:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--cq-primary) 45%, transparent);
+        outline-offset: 1px;
+    }
+}
+
+// The open-task count is a disclosure button: it expands the list below.
+.cqpopClientTasks {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.1rem 0.4rem;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--cq-dismiss) 18%, transparent);
+    color: color-mix(in srgb, var(--cq-dismiss) 70%, #000);
+    font-family: inherit;
+    font-size: 0.64rem;
+    font-weight: 700;
+    line-height: 1.4;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease;
+
+    svg {
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
+    }
+
+    &:hover,
+    &:focus-visible {
+        background: color-mix(in srgb, var(--cq-dismiss) 30%, transparent);
+        border-color: color-mix(in srgb, var(--cq-dismiss) 55%, transparent);
+    }
+
+    &:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--cq-dismiss) 55%, transparent);
+        outline-offset: 1px;
+    }
+}
+
+.cqpopClientTasksOpen svg {
+    transform: rotate(180deg);
+}
+
+// The expansion behind the open-task chip. Capped and internally scrollable so
+// a client with ten open tickets grows the card by a fixed, predictable amount
+// rather than shoving the rest of the bottom-anchored stack off screen.
+.cqpopTasks {
+    margin-top: 0.4rem;
+    padding-top: 0.4rem;
+    border-top: 1px solid color-mix(in srgb, var(--cq-primary) 18%, transparent);
+    overflow: hidden;
+    // `backwards`, not `both`: the max-height in the keyframes is only there to
+    // drive the reveal, it must not linger and clip the finished panel.
+    animation: cqpop-tasks-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) backwards;
+}
+
+.cqpopTasksNote {
+    margin: 0;
+    font-size: 0.7rem;
+    font-style: italic;
+    color: color-mix(in srgb, var(--cq-paragraph) 55%, transparent);
+}
+
+.cqpopTasksList {
+    max-height: 160px;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style: none;
+    scrollbar-width: thin;
+
+    li + li {
+        border-top: 1px solid color-mix(in srgb, var(--cq-primary) 10%, transparent);
+    }
+}
+
+.cqpopTasksItem {
+    display: flex;
+    flex-direction: column;
+    gap: 0.05rem;
+    padding: 0.28rem 0.3rem;
+    border-radius: var(--cq-br);
+    color: var(--cq-paragraph);
+    text-decoration: none;
+    transition:
+        background 0.15s ease,
+        color 0.15s ease;
+
+    &:hover,
+    &:focus-visible {
+        background: color-mix(in srgb, var(--cq-primary) 12%, transparent);
+        color: var(--cq-primary);
+    }
+
+    &:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--cq-primary) 45%, transparent);
+        outline-offset: -1px;
+    }
+}
+
+.cqpopTasksLabel {
+    font-size: 0.72rem;
+    font-weight: 600;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+}
+
+.cqpopTasksMeta {
+    display: flex;
+    gap: 0.4rem;
+    font-size: 0.64rem;
+    color: color-mix(in srgb, var(--cq-paragraph) 60%, transparent);
+}
+
+.cqpopTasksType {
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+}
+
+.cqpopTasksDue {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.cqpopTasksAll {
+    display: inline-block;
+    margin-top: 0.35rem;
+    padding: 0.1rem 0.3rem;
+    border-radius: var(--cq-br);
+    font-size: 0.68rem;
+    font-weight: 700;
+    color: var(--cq-primary);
+    text-decoration: none;
+
+    &:hover,
+    &:focus-visible {
+        color: color-mix(in srgb, var(--cq-primary) 85%, #000);
+        text-decoration: underline;
+    }
+
+    &:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--cq-primary) 45%, transparent);
+        outline-offset: 1px;
+    }
+}
+
+// Tertiary action: a text button, deliberately not competing with .cqpopBtn.
+.cqpopLink {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.2rem 0.45rem;
+    border-radius: var(--cq-btn-br);
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--cq-paragraph) 75%, transparent);
+    text-decoration: none;
+    transition: all 0.15s ease;
+
+    svg {
+        flex-shrink: 0;
+    }
+
+    &:hover,
+    &:focus-visible {
+        background: color-mix(in srgb, var(--cq-primary) 12%, transparent);
+        color: var(--cq-primary);
+    }
+
+    &:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--cq-primary) 45%, transparent);
+        outline-offset: 1px;
+    }
+}
+
+// Demo cards, and numbers that do not reduce to an AU local number, have no
+// workspace to open — the row still renders so the card keeps its shape.
+.cqpopLinkInert {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+        background: transparent;
+        color: color-mix(in srgb, var(--cq-paragraph) 75%, transparent);
+    }
+}
+
+.cqpopBtn {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    padding: 0.4rem 0.7rem;
+    border-radius: var(--cq-btn-br);
+    font-size: 0.8rem;
+    font-weight: 600;
+    line-height: 1.2;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.15s ease;
+
+    svg {
+        flex-shrink: 0;
+    }
+
+    &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
+    }
+
+    &:active {
+        transform: translateY(0);
+        box-shadow: none;
+    }
+}
+
+// Green, matching the legacy `.cpview` action.
+.cqpopBtnAnswer {
+    border: 1px solid color-mix(in srgb, var(--cq-answer) 92%, #000);
+    background: var(--cq-answer);
+    color: var(--cq-tertiary);
+
+    &:hover {
+        background: color-mix(in srgb, var(--cq-answer) 88%, #000);
+        color: var(--cq-tertiary);
+    }
+}
+
+// Pick up while the dial mechanism is unverified: present so staff learn
+// where it will live, but visibly inert.
+.cqpopBtnSoon {
+    border: 1px solid color-mix(in srgb, var(--cq-answer) 35%, transparent);
+    background: color-mix(in srgb, var(--cq-answer) 25%, transparent);
+    color: rgba(255, 255, 255, 0.75);
+    cursor: not-allowed;
+
+    &:hover {
+        transform: none;
+        box-shadow: none;
+        background: color-mix(in srgb, var(--cq-answer) 25%, transparent);
+    }
+}
+
+// Red outline, a quieter take on the legacy `.cpdismiss`.
+.cqpopBtnDismiss {
+    flex: 0 0 auto;
+    border: 1px solid color-mix(in srgb, var(--cq-dismiss) 85%, #000);
+    background: transparent;
+    color: color-mix(in srgb, var(--cq-dismiss) 78%, #000);
+
+    // A queue with no pickup code renders Dismiss on its own — then it
+    // takes the whole row rather than sitting stranded on the left.
+    &:only-child {
+        flex: 1;
+    }
+
+    &:hover {
+        background: color-mix(in srgb, var(--cq-dismiss) 85%, #000);
+        color: var(--cq-tertiary);
+    }
+}
+
+@keyframes cqpop-in {
+    from {
+        opacity: 0;
+        transform: translateY(24px) scale(0.97);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes cqpop-out {
+    from {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+
+    to {
+        opacity: 0;
+        transform: translateY(12px) scale(0.97);
+    }
+}
+
+@keyframes cqpop-tasks-in {
+    from {
+        opacity: 0;
+        max-height: 0;
+        transform: translateY(-4px);
+    }
+
+    to {
+        opacity: 1;
+        max-height: 300px;
+        transform: translateY(0);
+    }
+}
+
+@keyframes cqpop-pulse {
+    0%,
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    50% {
+        opacity: 0.35;
+        transform: scale(0.7);
+    }
+}
+
+// Full-width cards on small screens, same 768px hinge the goalbox uses.
+@media (max-width: 768px) {
+    .cqpopStack {
+        right: 0.5rem;
+        bottom: 0.5rem;
+        left: 0.5rem;
+        width: auto;
+        max-width: none;
+    }
+
+    .cqpopCardActions {
+        .cqpopBtn {
+            flex: 1;
+        }
+    }
+}
+
+// Respect a reduced-motion preference: keep the card, drop the movement.
+@media (prefers-reduced-motion: reduce) {
+    .cqpopCard,
+    .cqpopCardLeaving,
+    .cqpopDot,
+    .cqpopTasks {
+        animation: none;
+    }
+
+    .cqpopBtn:hover {
+        transform: none;
+    }
+
+    .cqpopClientTasks svg {
+        transition: none;
+    }
+}