kyd-shared-badge 0.3.116 → 0.3.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.116",
+  "version": "0.3.118",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -387,7 +387,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
               </div>
             )}
             <div>
-              <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Recommendations</Reveal>
+              <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Score Improvement Recommendationsw</Reveal>
               <Reveal headless={isHeadless}>
                 <div className={'space-y-3'}>
                   {rec?.summary ? (

package/src/components/CategoryBars.tsx

@@ -53,6 +53,14 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
                 0
             )
           );
+          const candidatePercentRaw = Math.round(
+            Number(
+              score?.business?.percent_progress ??
+                score?.combined?.percent_progress ??
+                0
+            )
+          );
+          const candidateClamp = Math.max(0, Math.min(100, candidatePercentRaw));
           const absPercent = Math.max(0, Math.min(Math.abs(signed), 100));
           const isNegative = signed < 0;
           const label =
@@ -131,6 +139,7 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
                   {hasTarget && (
                     <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
                       Target: {targetClamp}%
+                      <div>Candidate Match: {candidateClamp}%</div>
                     </div>
                   )}
                 </div>

package/src/components/RoleOverviewCard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useMemo } from 'react';
-import Link from 'next/link';
+// Link not required for hash-only navigation
 import { FiInfo } from 'react-icons/fi';
 import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
 import { clampPercent, hexToRgba, scoreToColorHex, red, yellow, green } from '../colors';
@@ -101,10 +101,31 @@ export default function RoleOverviewCard({
             }}
             pointer={{ type: 'arrow', elastic: true, animationDelay: 0 }}
           />
+          <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
+            <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
+              <div style={{ fontWeight: 600 }}>{title}</div>
+              <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Alignment reflects how well the candidate matches the target role based on KYD evidence.</div>
+            </div>
+          </div>
         </div>
         {roleName ? (
         <div className="mt-3 text-center">
-          <Link href="#role" className={'text-sm font-semibold text-[var(--text-main)] hover:underline'}>{roleName}</Link>
+          <a
+            href="#role"
+            className={'text-sm font-semibold text-[var(--text-main)] hover:underline'}
+            onClick={(e) => {
+              try {
+                e.preventDefault();
+                if (typeof window !== 'undefined') {
+                  window.location.hash = 'role';
+                  // Ensure listeners respond even if framework doesn't emit hashchange automatically
+                  window.dispatchEvent(new HashChangeEvent('hashchange'));
+                }
+              } catch {}
+            }}
+          >
+            {roleName}
+          </a>
         </div>
       ) : null}
       </div>

package/src/components/support/SupportForm.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import toast from "react-hot-toast"
+import { Button } from "../../ui/button"
+import { Input } from "../../ui/input"
+import { Textarea } from "../../ui/textarea"
+
+type SubjectOption = 'Question - General' | 'Question - Billing' | 'Feature Recommendation' | 'Other'
+
+export function SupportForm({
+  session,
+  productLabel = 'KYD Self-check',
+}: {
+  session?: { user?: { fullName?: string | null; name?: string | null; email?: string | null } | null } | null
+  productLabel?: string
+}) {
+  const [subject, setSubject] = useState<SubjectOption>('Question - General')
+  const [description, setDescription] = useState('')
+  const [file, setFile] = useState<File | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSent, setIsSent] = useState(false)
+
+  const nameVal = useMemo(() => (session?.user?.fullName || session?.user?.name || ''), [session])
+  const emailVal = useMemo(() => (session?.user?.email || ''), [session])
+  const productVal = productLabel
+
+  const onFileChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const f = e.target.files?.[0] || null
+    if (!f) { setFile(null); return }
+    const allowed = new Set(['image/png', 'image/jpeg', 'image/webp'])
+    if (!allowed.has(f.type)) { toast.error('Only PNG, JPG, or WEBP allowed'); return }
+    if (f.size > 5 * 1024 * 1024) { toast.error('Max file size is 5MB'); return }
+    setFile(f)
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!session) { toast.error('Please sign in to submit.'); return }
+    if (!description.trim()) { toast.error('Please add a description.'); return }
+
+    setIsSubmitting(true)
+    try {
+      let screenshotKey: string | undefined
+      if (file) {
+        const mime = file.type
+        const body = JSON.stringify({ filename: file.name, mime })
+        const res = await fetch('/api/support/presign', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body })
+        if (!res.ok) throw new Error('Failed to prepare upload')
+        const { uploadUrl, key } = await res.json()
+        const up = await fetch(uploadUrl, { method: 'PUT', headers: { 'Content-Type': mime }, body: file })
+        if (!up.ok) throw new Error('Upload failed')
+        screenshotKey = key
+      }
+
+      const resp = await fetch('/api/support', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ subject, description, screenshotKey })
+      })
+      if (!resp.ok) {
+        const t = await resp.json().catch(() => ({}))
+        throw new Error(t?.error || 'Failed to submit support request')
+      }
+      toast.success('Sent to support. Thank you!')
+      setDescription('')
+      setFile(null)
+      setSubject('Question - General')
+      setIsSent(true)
+    } catch (err) {
+      const e2 = err as Error
+      toast.error(e2.message || 'Something went wrong')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  if (isSent) {
+    return (
+      <div className="w-full">
+        <div className="rounded-xl border p-6 md:p-10 text-center max-w-2xl mx-auto">
+          <h2 className="text-xl md:text-2xl font-semibold mb-2">Thanks! Your message was sent.</h2>
+          <p className="text-sm md:text-base mb-6">Our team will review and get back to you at your account email.</p>
+          <div className="flex items-center justify-center gap-3">
+            <Button onClick={() => setIsSent(false)} className="px-4">Send another</Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="w-full">
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="rounded-xl border p-4 sm:p-6">
+          <h2 className="text-lg font-semibold mb-4">Contact Support</h2>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm mb-1">Name</label>
+              <Input value={nameVal} readOnly />
+            </div>
+            <div>
+              <label className="block text-sm mb-1">Email</label>
+              <Input value={emailVal} readOnly />
+            </div>
+            <div>
+              <label className="block text-sm mb-1">Product</label>
+              <Input value={productVal} readOnly />
+            </div>
+            <div>
+              <label className="block text-sm mb-1">Subject</label>
+              <select
+                value={subject}
+                onChange={(e) => setSubject(e.target.value as SubjectOption)}
+                className="w-full rounded-md border bg-transparent p-2"
+              >
+                <option>Question - General</option>
+                <option>Question - Billing</option>
+                <option>Feature Recommendation</option>
+                <option>Other</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-xl border p-4 sm:p-6">
+          <h2 className="text-lg font-semibold mb-4">Description</h2>
+          <div className="space-y-4">
+            <div>
+              <Textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Tell us what's going on..."
+                className="min-h-[160px]"
+              />
+            </div>
+            <div>
+              <label className="block text-sm mb-1">Optional screenshot (PNG/JPG/WEBP, ≤5MB)</label>
+              <Input type="file" accept="image/png,image/jpeg,image/webp" onChange={onFileChange} />
+              {file ? (
+                <p className="text-xs mt-2">{file.name} ({Math.round(file.size/1024)} KB)</p>
+              ) : null}
+            </div>
+          </div>
+
+          <div className="mt-6">
+            <Button type="submit" disabled={isSubmitting} className="w-full justify-center">
+              {isSubmitting ? 'Sending…' : 'Send to Support'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+export default SupportForm
+
+

package/src/index.ts

@@ -11,4 +11,6 @@ export * from './components/charts/ChartEmptyState';
 export * from './components/charts/ChartLegend';
 export { default as ConnectAccounts } from './connect/ConnectAccounts';
 export * from './connect/types';
-export { normalizeLinkedInInput } from './connect/linkedin';
+export { normalizeLinkedInInput } from './connect/linkedin';
+export { default as SupportForm } from './components/support/SupportForm';
+export { createSupportPresignRoute, createSupportTicketRoute } from './lib/support/routes';

package/src/lib/support/routes.ts

@@ -0,0 +1,162 @@
+import { NextRequest } from 'next/server'
+import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3'
+import { DynamoDBClient } from '@aws-sdk/client-dynamodb'
+import { DynamoDBDocumentClient, GetCommand, QueryCommand } from '@aws-sdk/lib-dynamodb'
+import { SESClient, SendEmailCommand } from '@aws-sdk/client-ses'
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
+
+const s3 = new S3Client({})
+const dbClient = new DynamoDBClient({})
+const doc = DynamoDBDocumentClient.from(dbClient)
+const ses = new SESClient({})
+
+function getIp(req: NextRequest) {
+  const xf = req.headers.get('x-forwarded-for') || ''
+  const ip = xf.split(',')[0].trim() || req.headers.get('x-real-ip') || ''
+  return String(ip)
+}
+
+function getUa(req: NextRequest) {
+  return req.headers.get('user-agent') || ''
+}
+
+function getLocationHeaders(req: NextRequest) {
+  const country = req.headers.get('x-vercel-ip-country') || ''
+  const city = req.headers.get('x-vercel-ip-city') || ''
+  return { country, city }
+}
+
+function escapeHtml(str: string) {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+export async function createSupportPresignRoute(req: NextRequest, userId: string) {
+  try {
+    const { filename, mime } = await req.json()
+    const bucket = process.env.SUPPORT_SCREENSHOTS_BUCKET as string
+    if (!bucket) return Response.json({ error: 'Bucket not configured' }, { status: 500 })
+
+    const safeName = String(filename || 'upload').replace(/[^a-zA-Z0-9._-]/g, '_')
+    const ext = safeName.includes('.') ? safeName.split('.').pop() : 'png'
+    const key = `${userId}/${Date.now()}-${Math.random().toString(36).slice(2)}.${ext}`
+
+    const command = new PutObjectCommand({ Bucket: bucket, Key: key, ContentType: String(mime || 'image/png') })
+    const uploadUrl = await getSignedUrl(s3, command, { expiresIn: 60 * 5 })
+    return Response.json({ uploadUrl, key })
+  } catch (e) {
+    console.error('support presign error', e)
+    return Response.json({ error: 'Failed to create upload URL' }, { status: 500 })
+  }
+}
+
+export async function createSupportTicketRoute(req: NextRequest, userId: string) {
+  try {
+    const body = await req.json().catch(() => ({}))
+    const subject: string = String(body?.subject || '')
+    const description: string = String(body?.description || '')
+    const screenshotKey: string | undefined = body?.screenshotKey
+    if (!subject || !description) return Response.json({ error: 'Missing fields' }, { status: 400 })
+
+    const userTable = process.env.USER_TABLE_NAME as string
+    const badgeTable = process.env.BADGE_TABLE_NAME as string
+    const supportBucket = process.env.SUPPORT_SCREENSHOTS_BUCKET as string
+    const sesFrom = process.env.SES_FROM_EMAIL as string
+    if (!userTable || !badgeTable || !sesFrom) return Response.json({ error: 'Server not configured' }, { status: 500 })
+
+    // Get user to find stripeCustomerId + totals
+    const userResp = await doc.send(new GetCommand({ TableName: userTable, Key: { userId } }))
+    const userItem = (userResp as any).Item || {}
+    const stripeCustomerId: string | undefined = userItem.stripeCustomerId
+
+    // Stripe total spent
+    let totalSpentUsd = 0
+    try {
+      const stripeKey = process.env.STRIPE_SECRET_KEY
+      if (stripeKey && stripeCustomerId) {
+        const Stripe = (await import('stripe')).default
+        const stripe = new Stripe(stripeKey)
+        let hasMore = true
+        let startingAfter: string | undefined
+        while (hasMore) {
+          const inv = await stripe.invoices.list({ customer: stripeCustomerId, status: 'paid', limit: 100, starting_after: startingAfter })
+          for (const i of inv.data) totalSpentUsd += (i.total || 0)
+          hasMore = inv.has_more
+          startingAfter = inv.data.at(-1)?.id
+        }
+        totalSpentUsd = Math.round(totalSpentUsd) / 100
+      }
+    } catch {}
+
+    // Total reports run by user
+    let totalReports = 0
+    try {
+      const countResp = await doc.send(new QueryCommand({
+        TableName: badgeTable,
+        IndexName: 'userId-index',
+        KeyConditionExpression: 'userId = :u',
+        ExpressionAttributeValues: { ':u': userId },
+        Select: 'COUNT',
+      }))
+      totalReports = (countResp as any).Count || 0
+    } catch {}
+
+    const ip = getIp(req)
+    const ua = getUa(req)
+    const { country, city } = getLocationHeaders(req)
+
+    let screenshotUrl: string | undefined
+    if (screenshotKey && supportBucket) {
+      const getCmd = new GetObjectCommand({ Bucket: supportBucket, Key: screenshotKey })
+      screenshotUrl = await getSignedUrl(s3, getCmd, { expiresIn: 60 * 30 })
+    }
+
+    const product = 'KYD Self-check'
+    const name = userItem?.fullName || userItem?.email || ''
+    const email = userItem?.email || ''
+
+    const html = `
+      <div style="font-family:Arial,sans-serif;line-height:1.5">
+        <h2>New Support Request</h2>
+        <h3>User</h3>
+        <ul>
+          <li><b>Name:</b> ${escapeHtml(name)}</li>
+          <li><b>Email:</b> ${escapeHtml(email)}</li>
+          <li><b>Product:</b> ${escapeHtml(product)}</li>
+        </ul>
+        <h3>Details</h3>
+        <ul>
+          <li><b>Subject:</b> ${escapeHtml(subject)}</li>
+          <li><b>Description:</b><br/>${escapeHtml(description).replace(/\n/g,'<br/>')}</li>
+        </ul>
+        <h3>Meta</h3>
+        <ul>
+          <li><b>Total spent (USD):</b> $${totalSpentUsd.toFixed(2)}</li>
+          <li><b>Total reports run:</b> ${totalReports}</li>
+          <li><b>Location:</b> ${escapeHtml([city, country].filter(Boolean).join(', ') || 'Unknown')}</li>
+          <li><b>Browser:</b> ${escapeHtml(ua)}</li>
+          <li><b>IP:</b> ${escapeHtml(ip)}</li>
+        </ul>
+        ${screenshotUrl ? `<p><a href="${screenshotUrl}">View Screenshot</a></p>` : ''}
+      </div>
+    `
+
+    const send = new SendEmailCommand({
+      Source: sesFrom,
+      Destination: { ToAddresses: ['team@knowyourdeveloper.ai'] },
+      Message: { Subject: { Data: `Support: ${subject}` }, Body: { Html: { Data: html } } },
+    })
+    await ses.send(send)
+
+    return Response.json({ ok: true })
+  } catch (e) {
+    console.error('support submit error', e)
+    return Response.json({ error: 'Failed to send support request' }, { status: 500 })
+  }
+}
+
+

package/src/ui/index.ts

@@ -1,5 +1,6 @@
 export * from './button';
 export * from './card';
 export * from './input';
+export * from './textarea';
 export * from './spinner';
 export * from './tooltip';

package/src/ui/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+
+import { cn } from "../utils"
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-xs",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
+
+