@licklist/design 0.78.21 → 0.78.26

package/src/v2/components/NPSScore/NPSScore.scss

@@ -0,0 +1,330 @@
+.nps-score {
+    width: 100%;
+    margin-top: 24px;
+
+    &__container {
+        background: var(--surfaces-main-surface-secondary, #F4F4F7);
+        border-radius: 16px;
+        padding: 24px;
+        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    }
+
+    &__question {
+        font-family: var(--font-family-sans);
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 24px;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0 0 16px 0;
+    }
+
+    &__labels {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+    }
+
+    &__label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        span {
+            font-family: var(--font-family-sans);
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--labels-main-label-secondary, #626A90);
+        }
+
+        &--desktop {
+            display: none;
+
+            @media (min-width: 768px) {
+                display: flex;
+            }
+        }
+
+        &--mobile {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 12px;
+
+            @media (min-width: 768px) {
+                display: none;
+            }
+        }
+    }
+
+    &__label-icon {
+        color: var(--fills-main-fill-secondary, #626A90);
+        flex-shrink: 0;
+    }
+
+    &__buttons {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 8px;
+
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(10, 1fr);
+        }
+    }
+
+    &__button {
+        height: 48px;
+        border-radius: 12px;
+        font-family: var(--font-family-sans);
+        font-size: 18px;
+        font-weight: 600;
+        transition: all 0.2s ease;
+        cursor: pointer;
+        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        color: var(--labels-main-label-primary, #121E52);
+
+        &:hover:not(&--selected) {
+            background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+        }
+
+        &--selected {
+            background: var(--fills-main-fill-primary, #14215A);
+            border-color: transparent;
+            color: #FFFFFF;
+        }
+    }
+
+    &__expanded {
+        margin-top: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        animation: nps-fade-in 0.2s ease;
+    }
+
+    &__field {
+        &--roles {
+            padding-top: 16px;
+        }
+    }
+
+    &__field-label {
+        display: block;
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--labels-main-label-primary, #121E52);
+        margin-bottom: 8px;
+    }
+
+    &__field-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+    }
+
+    &__optional {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-secondary, #626A90);
+    }
+
+    &__textarea {
+        width: 100%;
+        min-height: 100px;
+        padding: 12px;
+        border-radius: 8px;
+        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-primary, #121E52);
+        resize: vertical;
+        box-sizing: border-box;
+
+        &::placeholder {
+            color: var(--labels-main-label-tertiary, #9CA3AF);
+        }
+
+        &:focus {
+            outline: none;
+            border-color: var(--fills-main-fill-primary, #14215A);
+        }
+
+        &--error {
+            border-color: var(--fills-main-fill-danger, #DC2626);
+        }
+    }
+
+    &__hint {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-secondary, #626A90);
+        margin: 4px 0 0 0;
+    }
+
+    &__error {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--fills-main-fill-danger, #DC2626);
+        margin: 4px 0 0 0;
+    }
+
+    &__add-comment {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--labels-main-label-action, #2563EB);
+        text-decoration: underline;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        transition: color 0.2s ease;
+
+        &:hover {
+            color: var(--labels-main-label-action-hover, #1D4ED8);
+        }
+    }
+
+    &__roles {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 12px;
+
+        @media (min-width: 640px) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @media (min-width: 1024px) {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+
+    &__role {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        position: relative;
+    }
+
+    &__role-input {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid var(--borders-main-border-primary, #E8E9EF);
+        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        margin: 0;
+        cursor: pointer;
+        flex-shrink: 0;
+        position: relative;
+        transition: border-color 0.2s ease;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: var(--fills-main-fill-primary, #14215A);
+            transition: transform 0.2s ease;
+        }
+
+        &:checked {
+            border-color: var(--fills-main-fill-primary, #14215A);
+
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+
+        &:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px var(--fills-main-fill-primary-opacity, rgba(20, 33, 90, 0.2));
+        }
+    }
+
+    &__role-radio {
+        display: none;
+    }
+
+    &__role-label {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-primary, #121E52);
+    }
+
+    &__submit {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 12px 24px;
+        border-radius: 8px;
+        border: none;
+        background: var(--fills-main-fill-primary, #14215A);
+        color: #FFFFFF;
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.2s ease;
+        width: fit-content;
+
+        &:hover:not(:disabled) {
+            background: var(--fills-main-fill-primary-hover, #1a2a6e);
+        }
+
+        &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+    }
+
+    &__success {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 32px;
+        text-align: center;
+    }
+
+    &__success-icon {
+        color: var(--fills-main-fill-success, #10B981);
+        margin-bottom: 16px;
+    }
+
+    &__success-title {
+        font-family: var(--font-family-sans);
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0 0 8px 0;
+    }
+
+    &__success-message {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-secondary, #626A90);
+        margin: 0;
+    }
+}
+
+@keyframes nps-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/src/v2/components/NPSScore/NPSScore.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { NPSScore } from './NPSScore'
+
+const meta: Meta<typeof NPSScore> = {
+    title: 'v2/Components/NPSScore',
+    component: NPSScore,
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        firstName: { control: 'text' },
+        onSubmit: { action: 'submitted' },
+        onDismiss: { action: 'dismissed' },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof NPSScore>
+
+export const Default: Story = {
+    args: {
+        firstName: 'Godwin',
+        onSubmit: (data) => {
+            console.log('NPS Submitted:', data)
+            return Promise.resolve()
+        },
+    },
+}

package/src/v2/components/NPSScore/NPSScore.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react'
+import './NPSScore.scss'
+
+export interface NPSScoreProps {
+    /** User's first name for personalized greeting */
+    firstName?: string
+    /** Callback when NPS is submitted */
+    onSubmit?: (data: NPSSubmitData) => void
+    /** Callback when dismissed */
+    onDismiss?: () => void
+}
+
+export interface NPSSubmitData {
+    score: number
+    role: string
+    reason?: string
+}
+
+const roleOptions = [
+    { value: 'owner', label: 'Business Owner' },
+    { value: 'manager', label: 'Manager' },
+    { value: 'finance', label: 'Finance' },
+    { value: 'marketing', label: 'Marketing' },
+    { value: 'staff', label: 'Staff Member' },
+    { value: 'other', label: 'Other' },
+]
+
+// Icons
+const IconSad = ({ size = 24, className = '' }: { size?: number; className?: string }) => (
+    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className}>
+        <path d="M16 6C21.5228 6 26 10.4771 26 16C26 21.5228 21.5228 26 16 26C10.4771 26 6 21.5228 6 16C6 10.4771 10.4771 6 16 6ZM16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8ZM16 16C18.7614 16 21 18.2386 21 21H19C19 19.3431 17.6569 18 16 18C14.3431 18 13 19.3431 13 21H11C11 18.2386 13.2386 16 16 16ZM13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.6716 15 12 14.3284 12 13.5C12 12.6716 12.6716 12 13.5 12ZM18.5 12C19.3284 12 20 12.6716 20 13.5C20 14.3284 19.3284 15 18.5 15C17.6716 15 17 14.3284 17 13.5C17 12.6716 17.6716 12 18.5 12Z" fill="currentColor" />
+    </svg>
+)
+
+const IconBigSmile = ({ size = 24, className = '' }: { size?: number; className?: string }) => (
+    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className}>
+        <path d="M16 6C21.5228 6 26 10.4771 26 16C26 21.5228 21.5228 26 16 26C10.4771 26 6 21.5228 6 16C6 10.4771 10.4771 6 16 6ZM16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8ZM21 17C21 19.7614 18.7614 22 16 22C13.2386 22 11 19.7614 11 17H21ZM13.5 11C14.3284 11 15 11.6716 15 12.5C15 13.3284 14.3284 14 13.5 14C12.6716 14 12 13.3284 12 12.5C12 11.6716 12.6716 11 13.5 11ZM18.5 11C19.3284 11 20 11.6716 20 12.5C20 13.3284 19.3284 14 18.5 14C17.6716 14 17 13.3284 17 12.5C17 11.6716 17.6716 11 18.5 11Z" fill="currentColor" />
+    </svg>
+)
+
+export const NPSScore: React.FC<NPSScoreProps> = ({
+    firstName,
+    onSubmit,
+    onDismiss,
+}) => {
+    const [selectedScore, setSelectedScore] = useState<number | null>(null)
+    const [reason, setReason] = useState('')
+    const [role, setRole] = useState('')
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [errors, setErrors] = useState<{ reason?: string; role?: string }>({})
+    const [showReasonField, setShowReasonField] = useState(false)
+    const [isSubmitted, setIsSubmitted] = useState(false)
+
+    const handleSubmit = async () => {
+        if (!selectedScore) return
+
+        // Validate required fields - reason required for all scores
+        const newErrors: { reason?: string; role?: string } = {}
+        if (!reason.trim()) {
+            newErrors.reason = 'Please provide a reason for your score'
+        }
+        if (!role) {
+            newErrors.role = 'Please select your role'
+        }
+
+        if (Object.keys(newErrors).length > 0) {
+            setErrors(newErrors)
+            return
+        }
+
+        setErrors({})
+        setIsSubmitting(true)
+
+        try {
+            await onSubmit?.({
+                score: selectedScore,
+                role,
+                reason: reason.trim() || undefined,
+            })
+            setIsSubmitted(true)
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    if (isSubmitted) {
+        return (
+            <div className="nps-score">
+                <div className="nps-score__container">
+                    <div className="nps-score__success">
+                        <IconBigSmile size={48} className="nps-score__success-icon" />
+                        <h3 className="nps-score__success-title">Thank you!</h3>
+                        <p className="nps-score__success-message">Your feedback has been submitted successfully.</p>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="nps-score">
+            <div className="nps-score__container">
+                {/* Question */}
+                <h3 className="nps-score__question">
+                    {firstName ? `Hey ${firstName}, how` : 'How'} likely would you be to recommend Booked it to a friend or colleague?
+                </h3>
+
+                {/* Scale labels */}
+                <div className="nps-score__labels">
+                    <div className="nps-score__label">
+                        <IconSad size={24} className="nps-score__label-icon" />
+                        <span>Not Likely</span>
+                    </div>
+                    <div className="nps-score__label nps-score__label--desktop">
+                        <span>Most Likely</span>
+                        <IconBigSmile size={24} className="nps-score__label-icon" />
+                    </div>
+                </div>
+
+                {/* Score buttons */}
+                <div className="nps-score__buttons">
+                    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((score) => (
+                        <button
+                            key={score}
+                            onClick={() => setSelectedScore(score)}
+                            className={`nps-score__button ${selectedScore === score ? 'nps-score__button--selected' : ''}`}
+                        >
+                            {score}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Mobile label for Most Likely */}
+                <div className="nps-score__label nps-score__label--mobile">
+                    <span>Most Likely</span>
+                    <IconBigSmile size={24} className="nps-score__label-icon" />
+                </div>
+
+                {/* Expanded section after score selection */}
+                {selectedScore !== null && (
+                    <div className="nps-score__expanded">
+                        {/* Reason textarea - always visible */}
+                        <div className="nps-score__field">
+                            <label className="nps-score__field-label">
+                                Reason for this score?
+                            </label>
+                            <textarea
+                                value={reason}
+                                onChange={(e) => {
+                                    setReason(e.target.value)
+                                    if (errors.reason) setErrors(prev => ({ ...prev, reason: undefined }))
+                                }}
+                                placeholder=""
+                                className={`nps-score__textarea ${errors.reason ? 'nps-score__textarea--error' : ''}`}
+                            />
+                            {errors.reason ? (
+                                <p className="nps-score__error">{errors.reason}</p>
+                            ) : (
+                                <p className="nps-score__hint">
+                                    Help us improve by explaining your score.
+                                </p>
+                            )}
+                        </div>
+
+                        {/* Role selection */}
+                        <div className="nps-score__field nps-score__field--roles">
+                            <label className="nps-score__field-label">
+                                The role that best describes you?
+                            </label>
+                            <div className="nps-score__roles">
+                                {roleOptions.map((option) => (
+                                    <label key={option.value} className="nps-score__role">
+                                        <input
+                                            type="radio"
+                                            name="role"
+                                            value={option.value}
+                                            checked={role === option.value}
+                                            onChange={(e) => {
+                                                setRole(e.target.value)
+                                                if (errors.role) setErrors(prev => ({ ...prev, role: undefined }))
+                                            }}
+                                            className="nps-score__role-input"
+                                        />
+                                        <span className="nps-score__role-radio"></span>
+                                        <span className="nps-score__role-label">{option.label}</span>
+                                    </label>
+                                ))}
+                            </div>
+                            {errors.role && (
+                                <p className="nps-score__error">{errors.role}</p>
+                            )}
+                        </div>
+
+                        {/* Submit button */}
+                        <button
+                            onClick={handleSubmit}
+                            disabled={isSubmitting}
+                            className="nps-score__submit"
+                        >
+                            {isSubmitting ? 'Submitting...' : 'Submit'}
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default NPSScore

package/src/v2/components/NPSScore/index.ts

@@ -0,0 +1,2 @@
+export { NPSScore } from './NPSScore'
+export type { NPSScoreProps, NPSSubmitData } from './NPSScore'