|
|
@@ -9,17 +9,10 @@ function getDisplayValue(value?: string) {
|
|
|
return value?.trim() ? value : '—'
|
|
|
}
|
|
|
|
|
|
-function InfoList({ labels, values }: { labels: string[]; values: string[] }) {
|
|
|
- return (
|
|
|
- <div className="customer-info-list">
|
|
|
- {labels.map((label, index) => (
|
|
|
- <div key={label}>
|
|
|
- <span>{label}</span>
|
|
|
- <strong>{values[index]}</strong>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- )
|
|
|
+type PhotoPlaceholderItem = {
|
|
|
+ label: string
|
|
|
+ title: string
|
|
|
+ alt: string
|
|
|
}
|
|
|
|
|
|
export function CustomerDetailPage() {
|
|
|
@@ -37,6 +30,19 @@ export function CustomerDetailPage() {
|
|
|
return null
|
|
|
}
|
|
|
|
|
|
+ const summaryText = customer.trouble || customer.consultContent || customer.expectLook || pageCopy.nextVisit.lead
|
|
|
+ const basicValues = [
|
|
|
+ getDisplayValue(customer.phone),
|
|
|
+ getDisplayValue(customer.email),
|
|
|
+ getDisplayValue(customer.birthday),
|
|
|
+ getDisplayValue(customer.visitFrequencyLabel),
|
|
|
+ [customer.hairLength, customer.hairTexture].filter(Boolean).join(' / ') || pageCopy.basic.fallbacks[2],
|
|
|
+ getDisplayValue(customer.notice) === '—' ? pageCopy.basic.fallbacks[3] : getDisplayValue(customer.notice),
|
|
|
+ ]
|
|
|
+ const allergyValue = getDisplayValue(customer.allergy)
|
|
|
+ const photoPlaceholders = (pageCopy.photos.items ?? []) as PhotoPlaceholderItem[]
|
|
|
+ const followContentValue = customer.followContent?.trim() ? customer.followContent : (pageCopy.states.empty || '未填写')
|
|
|
+
|
|
|
return (
|
|
|
<DashboardLayout>
|
|
|
<Helmet>
|
|
|
@@ -51,9 +57,14 @@ export function CustomerDetailPage() {
|
|
|
<Link to={path('/customers')} className="btn btn-small btn-rounded btn-transparent-light-gray border border-1 border-color-dark-gray fw-700">
|
|
|
<i className="feather icon-feather-arrow-left me-6px"></i>{pageCopy.back}
|
|
|
</Link>
|
|
|
- <Link to={path(`/customers/${customer.id}/edit`)} className="btn btn-large btn-rounded btn-base-color btn-box-shadow fw-700">
|
|
|
- <i className="feather icon-feather-edit-3 me-8px"></i>{pageCopy.edit}
|
|
|
- </Link>
|
|
|
+ <div className="d-flex flex-wrap gap-2">
|
|
|
+ <Link to={path(`/customers/${customer.id}/edit`)} className="btn btn-large btn-rounded btn-transparent-light-gray border border-1 border-color-dark-gray fw-700">
|
|
|
+ <i className="feather icon-feather-edit-3 me-8px"></i>{pageCopy.edit}
|
|
|
+ </Link>
|
|
|
+ <button type="button" disabled className="btn btn-large btn-rounded btn-base-color btn-box-shadow fw-700 customer-detail-start-btn">
|
|
|
+ <i className="feather icon-feather-camera"></i>{pageCopy.simulate}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div className="customer-detail-hero workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px">
|
|
|
@@ -62,17 +73,17 @@ export function CustomerDetailPage() {
|
|
|
<div>
|
|
|
<span className="bg-base-color d-inline-block mb-15px fw-600 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-12">{pageCopy.badge}</span>
|
|
|
<h1 className="fw-700 text-dark-gray ls-minus-1px mb-10px">{customer.name}</h1>
|
|
|
- <p className="fs-18 lh-30 mb-0">{getDisplayValue(customer.namePronunciation)}</p>
|
|
|
+ <p className="fs-18 lh-30 mb-0">{summaryText}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="customer-next-visit">
|
|
|
<span className="fs-14 fw-700 text-base-color text-uppercase">{pageCopy.nextVisit.badge}</span>
|
|
|
<strong>{getDisplayValue(customer.recommendVisitDate)}</strong>
|
|
|
<p>{pageCopy.nextVisit.lead.replace('{{date}}', getDisplayValue(customer.nextFollowDate))}</p>
|
|
|
- <button type="button" disabled className="btn btn-small btn-rounded btn-transparent-light-gray border border-1 border-color-dark-gray fw-700">
|
|
|
+ <p>{followContentValue}</p>
|
|
|
+ <button type="button" disabled className="btn btn-small btn-rounded btn-base-color fw-700">
|
|
|
{pageCopy.nextVisit.action}
|
|
|
</button>
|
|
|
- <p className="fs-14 text-medium-gray mt-10px mb-0">{pageCopy.states.undeveloped}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -85,77 +96,93 @@ export function CustomerDetailPage() {
|
|
|
<div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px h-100">
|
|
|
<span className="fs-14 fw-700 text-base-color text-uppercase">{pageCopy.basic.badge}</span>
|
|
|
<h2 className="fw-700 text-dark-gray fs-26 mb-25px">{pageCopy.basic.title}</h2>
|
|
|
- <InfoList
|
|
|
- labels={pageCopy.basic.labels}
|
|
|
- values={[
|
|
|
- getDisplayValue(customer.phone),
|
|
|
- getDisplayValue(customer.email),
|
|
|
- getDisplayValue(customer.birthday),
|
|
|
- getDisplayValue(customer.expectContact),
|
|
|
- getDisplayValue(customer.visitFrequencyLabel),
|
|
|
- ]}
|
|
|
- />
|
|
|
+ <div className="customer-info-list">
|
|
|
+ {pageCopy.basic.labels.map((label: string, index: number) => (
|
|
|
+ <div key={label}>
|
|
|
+ <span>{label}</span>
|
|
|
+ <strong>{basicValues[index]}</strong>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ {allergyValue !== '—' ? (
|
|
|
+ <div>
|
|
|
+ <span>{copy.customerFormPage.hair.fieldEditRight}</span>
|
|
|
+ <strong>{allergyValue}</strong>
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className="col-xl-8 col-lg-7">
|
|
|
<div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px h-100">
|
|
|
- <span className="fs-14 fw-700 text-base-color text-uppercase">{pageCopy.consultation.badge}</span>
|
|
|
- <h2 className="fw-700 text-dark-gray fs-26 mb-25px">{pageCopy.consultation.title}</h2>
|
|
|
- <InfoList
|
|
|
- labels={pageCopy.consultation.labels}
|
|
|
- values={[
|
|
|
- getDisplayValue(customer.planDate),
|
|
|
- getDisplayValue(customer.visitPurpose),
|
|
|
- getDisplayValue(customer.trouble),
|
|
|
- getDisplayValue(customer.consultContent),
|
|
|
- getDisplayValue(customer.expectLook),
|
|
|
- ]}
|
|
|
- />
|
|
|
+ <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-25px">
|
|
|
+ <div>
|
|
|
+ <span className="fs-14 fw-700 text-base-color text-uppercase">{pageCopy.history.badge}</span>
|
|
|
+ <h2 className="fw-700 text-dark-gray fs-26 mb-0">{pageCopy.history.title}</h2>
|
|
|
+ </div>
|
|
|
+ <button type="button" disabled className="btn btn-small btn-rounded btn-transparent-light-gray border border-1 border-color-dark-gray fw-700">
|
|
|
+ {pageCopy.history.action}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div className="customer-history">
|
|
|
+ <div className="customer-history-item">
|
|
|
+ <span className="customer-history-date">{getDisplayValue(customer.planDate)}</span>
|
|
|
+ <div>
|
|
|
+ <strong>{getDisplayValue(customer.visitPurpose)}</strong>
|
|
|
+ <p>{pageCopy.states.undeveloped}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="customer-history-item">
|
|
|
+ <span className="customer-history-date">{getDisplayValue(customer.nextFollowDate)}</span>
|
|
|
+ <div>
|
|
|
+ <strong>{getDisplayValue(customer.trouble)}</strong>
|
|
|
+ <p>{pageCopy.states.undeveloped}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
|
|
|
- <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px mt-4">
|
|
|
- <span className="fs-14 fw-700 text-base-color text-uppercase">{pageCopy.hair.badge}</span>
|
|
|
- <h2 className="fw-700 text-dark-gray fs-26 mb-25px">{pageCopy.hair.title}</h2>
|
|
|
- <InfoList
|
|
|
- labels={pageCopy.hair.labels}
|
|
|
- values={[
|
|
|
- getDisplayValue(customer.hairLength),
|
|
|
- getDisplayValue(customer.hairTexture),
|
|
|
- getDisplayValue(customer.notice),
|
|
|
- getDisplayValue(customer.allergy),
|
|
|
- getDisplayValue(customer.innerRemark),
|
|
|
- ]}
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="row g-4 mt-1">
|
|
|
- <div className="col-lg-4">
|
|
|
- <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px h-100">
|
|
|
- <span className="fs-14 fw-700 text-base-color text-uppercase">{pageCopy.history.badge}</span>
|
|
|
- <h2 className="fw-700 text-dark-gray fs-26 mb-25px">{pageCopy.history.title}</h2>
|
|
|
- <p className="fs-15 text-medium-gray mb-0">{pageCopy.states.undeveloped}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="col-lg-4">
|
|
|
- <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px h-100">
|
|
|
+ <section className="pt-0">
|
|
|
+ <div className="container">
|
|
|
+ <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px">
|
|
|
+ <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-25px">
|
|
|
+ <div>
|
|
|
<span className="fs-14 fw-700 text-base-color text-uppercase">{pageCopy.photos.badge}</span>
|
|
|
- <h2 className="fw-700 text-dark-gray fs-26 mb-25px">{pageCopy.photos.title}</h2>
|
|
|
- <p className="fs-15 text-medium-gray mb-0">{pageCopy.states.undeveloped}</p>
|
|
|
+ <h2 className="fw-700 text-dark-gray fs-26 mb-0">{pageCopy.photos.title}</h2>
|
|
|
</div>
|
|
|
+ <button type="button" disabled className="btn btn-small btn-rounded btn-base-color fw-700">
|
|
|
+ <i className="feather icon-feather-camera me-6px"></i>{pageCopy.simulate}
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- <div className="col-lg-4">
|
|
|
- <div className="workbench-panel bg-white border-radius-8px box-shadow-extra-large p-30px h-100">
|
|
|
- <span className="fs-14 fw-700 text-base-color text-uppercase">{pageCopy.simulation.badge}</span>
|
|
|
- <h2 className="fw-700 text-dark-gray fs-26 mb-25px">{pageCopy.simulation.title}</h2>
|
|
|
- <button type="button" disabled className="btn btn-small btn-rounded btn-transparent-light-gray border border-1 border-color-dark-gray fw-700">
|
|
|
- {pageCopy.simulation.action}
|
|
|
- </button>
|
|
|
- <p className="fs-15 text-medium-gray mt-15px mb-0">{pageCopy.states.undeveloped}</p>
|
|
|
- </div>
|
|
|
+ <div className="customer-photo-grid">
|
|
|
+ {photoPlaceholders.map((item, index) => (
|
|
|
+ <div key={`${item.label}-${index}`} className="customer-photo-card">
|
|
|
+ <div className="customer-photo-placeholder">
|
|
|
+ <span>{pageCopy.states.undeveloped}</span>
|
|
|
+ </div>
|
|
|
+ <div><span>{item.label}</span><strong>{item.title}</strong></div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section className="pt-0">
|
|
|
+ <div className="container">
|
|
|
+ <div className="customer-detail-cta workbench-panel border-radius-8px p-30px">
|
|
|
+ <div>
|
|
|
+ <span className="fs-14 fw-700 text-white text-uppercase">{pageCopy.cta.badge}</span>
|
|
|
+ <h2 className="fw-700 text-white fs-30 mb-10px">{pageCopy.cta.title}</h2>
|
|
|
+ <p className="text-white opacity-8 mb-0">{pageCopy.states.undeveloped}</p>
|
|
|
</div>
|
|
|
+ <button type="button" disabled className="btn btn-large btn-rounded bg-white text-dark-gray fw-700">
|
|
|
+ <i className="feather icon-feather-play-circle me-8px"></i>{copy.common.start}
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
ChenYu