Enhance OrderConfirmationPage to support sharing by adding an optional name input field. Update local storage handling for both X username and share name. Refactor ticket display to improve visual clarity with a new banner style for order status.

Author: didierkrux

devcon/src/pages/tickets/store/order/[code]/[secret].tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import Page from 'components/common/layouts/page'
 import { Link } from 'components/common/link'
-import { Download } from 'lucide-react'
+import { Download, CircleUser } from 'lucide-react'
 import themes from '../../../../themes.module.scss'
 import css from './confirmation.module.scss'
 
@@ -49,10 +49,13 @@ export default function OrderConfirmationPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [xUsername, setXUsername] = useState('')
+  const [shareName, setShareName] = useState('')
 
   useEffect(() => {
-    const saved = localStorage.getItem('devcon_x_username')
-    if (saved) setXUsername(saved)
+    const savedX = localStorage.getItem('devcon_x_username')
+    if (savedX) setXUsername(savedX)
+    const savedName = localStorage.getItem('devcon_share_name')
+    if (savedName) setShareName(savedName)
   }, [])
 
   useEffect(() => {
@@ -196,13 +199,10 @@ export default function OrderConfirmationPage() {
 
           {/* Left: Ticket card */}
           <div className={css['ticket-card']}>
-            <div className={css['ticket-image']}>
-              <img src="/assets/images/dc8-receipt-header.png" alt="Devcon India" />
-              {isPaid ? (
-                <span className={css['confirmed-badge']}>Confirmed</span>
-              ) : (
-                <span className={css['pending-badge']}>{statusLabels[order.status] || order.status}</span>
-              )}
+            <div className={`${css['ticket-banner']} ${isPaid ? css['ticket-banner--confirmed'] : css['ticket-banner--pending']}`}>
+              <span className={css['ticket-banner-text']}>
+                {isPaid ? 'Order Confirmed' : statusLabels[order.status] || order.status}
+              </span>
             </div>
             <div className={css['ticket-body']}>
               <div className={css['ticket-data']}>
@@ -254,7 +254,20 @@ export default function OrderConfirmationPage() {
                 <div className={css['share-input-group']}>
                   <div className={css['share-text']}>
                     <h3 className={css['share-title']}>Share on socials</h3>
-                    <p className={css['share-subtitle']}>Enter your X username to personalize</p>
+                    <p className={css['share-subtitle']}>Add name and/or X username to personalize</p>
+                  </div>
+                  <div className={css['share-input-wrap']}>
+                    <CircleUser size={20} />
+                    <input
+                      type="text"
+                      placeholder="Name (optional)"
+                      value={shareName}
+                      onChange={e => {
+                        const val = e.target.value
+                        setShareName(val)
+                        localStorage.setItem('devcon_share_name', val)
+                      }}
+                    />
                   </div>
                   <div className={css['share-input-wrap']}>
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
@@ -273,7 +286,7 @@ export default function OrderConfirmationPage() {
                   </div>
                 </div>
                 <a
-                  href={`/en/ticket/${encodeURIComponent(attendeeName.split(' ')[0].toLowerCase())}/${xUsername ? `?x=${encodeURIComponent(xUsername.replace(/^@/, ''))}` : ''}`}
+                  href={`/en/ticket/${encodeURIComponent((shareName || attendeeName.split(' ')[0]).toLowerCase())}/${xUsername ? `?x=${encodeURIComponent(xUsername.replace(/^@/, ''))}` : ''}`}
                   target="_blank"
                   rel="noopener noreferrer"
                   className={css['share-btn']}

devcon/src/pages/tickets/store/order/[code]/confirmation.module.scss

@@ -143,52 +143,28 @@ $order-border: #dddae2;
   flex-shrink: 0;
 }
 
-.ticket-image {
-  position: relative;
+.ticket-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 46px;
   width: 100%;
-  height: 160px;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center 30%;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: rgba(34, 17, 68, 0.08);
-  }
 }
 
-.confirmed-badge {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 1;
-  background: #fff;
-  color: #214;
-  font-size: 0.875rem;
-  font-weight: 700;
-  padding: 0.375rem 0.75rem;
-  border-radius: 360px;
-  letter-spacing: -0.14px;
+.ticket-banner--confirmed {
+  background: #aaeaba;
 }
 
-.pending-badge {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 1;
+.ticket-banner--pending {
   background: #fef3c7;
-  color: #92400e;
+}
+
+.ticket-banner-text {
   font-size: 0.875rem;
-  font-weight: 700;
-  padding: 0.375rem 0.75rem;
-  border-radius: 360px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #1a0d33;
 }
 
 .ticket-body {
@@ -323,12 +299,11 @@ $order-border: #dddae2;
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  border: 1px solid #e5e5e5;
+  border: 1px solid $order-border;
   border-radius: 8px;
-  padding: 7.5px 12px;
+  padding: 8px 16px;
   background: #fff;
-  min-height: 36px;
-  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  min-height: 40px;
 
   svg {
     width: 20px;
@@ -345,9 +320,10 @@ $order-border: #dddae2;
     font-family: inherit;
     color: $order-fg;
     background: transparent;
+    line-height: 1.3;
 
     &::placeholder {
-      color: #737373;
+      color: $order-muted;
     }
   }
 }
@@ -456,8 +432,8 @@ $order-border: #dddae2;
 
 
 .status-badge {
-  background: #005415;
-  color: #f9f8fa;
+  background: #aaeaba;
+  color: #1a0d33;
   font-size: 0.875rem;
   font-weight: 600;
   padding: 0 0.8125rem;
@@ -466,8 +442,8 @@ $order-border: #dddae2;
 }
 
 .status-badge-pending {
-  background: #92400e;
-  color: #f9f8fa;
+  background: #fef3c7;
+  color: #92400e;
   font-size: 0.875rem;
   font-weight: 600;
   padding: 0 0.8125rem;