hamedandClaude Opus 4.8
d67be26e8a
Rebuild /admin/subscription to pixel-match clinic-pro-tauri's setting/purchase-subscription while keeping the real subscription/payment API: - New PurchaseSubscriptionSidebar (orange-accent settings sidebar, routes preserved) - New subscriptionIcons (SVGs copied verbatim from tauri source) - Rewrite SubscriptionPage: 522px plan cards (gradient blur, popular badge, secretaries pill, period toggle, dashed trial box), 365x104 current-plan card; wired to /subscription/plans, /subscription/my, /subscription/trial and the existing payment-gateway modal (no backend change) - Expand tests: healthy/expiring/expired/no-sub, empty-plans, period toggle, buy modal Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
76 lines
6.5 KiB
TypeScript
76 lines
6.5 KiB
TypeScript
// Subscription-page icons — SVG markup copied verbatim from the clinic-pro-tauri
|
|
// source (`src/assets/icon/*`) so the ported page matches it pixel-for-pixel.
|
|
// The rest of the admin uses Heroicons; these bespoke glyphs exist only here.
|
|
import React from 'react';
|
|
|
|
type IconProps = { size?: number; color?: string };
|
|
|
|
export function SparkleIcon({ size = 15, color = '#FDD835' }: IconProps) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 15 15" fill="none">
|
|
<path
|
|
d="M13.4059 6.94375L11.5309 6.00625L9.85586 5.16875L9.83711 5.15L8.99961 3.475L8.06211 1.6C7.84961 1.175 7.15586 1.175 6.94336 1.6L6.00586 3.475L5.16836 5.15L5.14961 5.16875L3.47461 6.00625L1.59961 6.94375C1.38711 7.05 1.25586 7.26875 1.25586 7.5C1.25586 7.73125 1.38711 7.95 1.59961 8.05625L3.47461 8.99375L5.14961 9.83125L5.16836 9.85L6.00586 11.525L6.94336 13.4C7.04961 13.6125 7.26836 13.7437 7.49961 13.7437C7.73086 13.7437 7.94961 13.6125 8.05586 13.4L8.99336 11.525L9.83086 9.85L9.84961 9.83125L11.5246 8.99375L13.3996 8.05625C13.6121 7.95 13.7434 7.73125 13.7434 7.5C13.7434 7.26875 13.6121 7.05 13.3996 6.94375H13.4059ZM12.1871 0.9375L11.5996 2.225L10.3121 2.8125L11.5996 3.4L12.1871 4.6875L12.7746 3.4L14.0621 2.8125L12.7746 2.225L12.1871 0.9375Z"
|
|
fill={color}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function PlanCardPerson({ size = 20, color = '#2F2F2F' }: IconProps) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 18 18" fill="none">
|
|
<path
|
|
d="M9 9C11.0711 9 12.75 7.32107 12.75 5.25C12.75 3.17893 11.0711 1.5 9 1.5C6.92893 1.5 5.25 3.17893 5.25 5.25C5.25 7.32107 6.92893 9 9 9Z"
|
|
stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M15.4416 16.5C15.4416 13.5975 12.5541 11.25 8.99914 11.25C5.44414 11.25 2.55664 13.5975 2.55664 16.5"
|
|
stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function CloseCircleFilled({ size = 20, color = '#D7D7D7' }: IconProps) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 20 20" fill="none">
|
|
<path
|
|
d="M9.99902 2.16699C14.3144 2.16699 17.8328 5.68462 17.833 10C17.833 14.3155 14.3145 17.834 9.99902 17.834C5.68365 17.8338 2.16602 14.3154 2.16602 10C2.16619 5.68473 5.68376 2.16717 9.99902 2.16699ZM13.1533 6.84668C12.7164 6.40977 11.9994 6.40982 11.5625 6.84668L9.99902 8.40918L8.43652 6.84668C7.99959 6.40975 7.28263 6.40975 6.8457 6.84668C6.40877 7.28361 6.40877 8.00057 6.8457 8.4375L8.4082 10L6.8457 11.5635C6.40884 12.0004 6.4088 12.7174 6.8457 13.1543C7.06929 13.3778 7.35703 13.4833 7.64062 13.4834C7.92438 13.4834 8.21282 13.378 8.43652 13.1543L9.99902 11.5908L11.5625 13.1543C11.7861 13.3778 12.0738 13.4833 12.3574 13.4834C12.6412 13.4834 12.9296 13.378 13.1533 13.1543C13.5902 12.7174 13.59 12.0004 13.1533 11.5635L11.5898 10L13.1533 8.4375C13.5901 8.00062 13.5901 7.2836 13.1533 6.84668Z"
|
|
fill={color} stroke={color}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function GiftIcon({ size = 24, color = '#F17732' }: IconProps) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<path d="M20 12V18C20 20.21 18.21 22 16 22H8C5.79 22 4 20.21 4 18V12C4 11.45 4.45 11 5 11H6.97C7.52 11 7.97 11.45 7.97 12V15.14C7.97 15.88 8.38 16.56 9.03 16.91C9.32 17.07 9.64 17.15 9.97 17.15C10.35 17.15 10.73 17.04 11.06 16.82L12.01 16.2L12.89 16.79C13.5 17.2 14.28 17.25 14.93 16.9C15.59 16.55 16 15.88 16 15.13V12C16 11.45 16.45 11 17 11H19C19.55 11 20 11.45 20 12Z" fill={color} />
|
|
<path d="M21.5 7V8C21.5 9.1 20.97 10 19.5 10H4.5C2.97 10 2.5 9.1 2.5 8V7C2.5 5.9 2.97 5 4.5 5H19.5C20.97 5 21.5 5.9 21.5 7Z" fill={color} />
|
|
<path d="M11.6388 5.00043H6.11881C5.77881 4.63043 5.78881 4.06043 6.14881 3.70043L7.56881 2.28043C7.93881 1.91043 8.54881 1.91043 8.91881 2.28043L11.6388 5.00043Z" fill={color} />
|
|
<path d="M17.8716 5.00043H12.3516L15.0716 2.28043C15.4416 1.91043 16.0516 1.91043 16.4216 2.28043L17.8416 3.70043C18.2016 4.06043 18.2116 4.63043 17.8716 5.00043Z" fill={color} />
|
|
<path d="M13.9714 11C14.5214 11 14.9714 11.45 14.9714 12V15.13C14.9714 15.93 14.0814 16.41 13.4214 15.96L12.5214 15.36C12.1914 15.14 11.7614 15.14 11.4214 15.36L10.4814 15.98C9.82141 16.42 8.94141 15.94 8.94141 15.15V12C8.94141 11.45 9.39141 11 9.94141 11H13.9714Z" fill={color} />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function InfoCircleRedFilled({ size = 20, color = '#D32F2F' }: IconProps) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 20 20" fill="none">
|
|
<path
|
|
d="M9.99902 2.16699C14.3144 2.16699 17.8328 5.68462 17.833 10C17.833 14.3155 14.3145 17.834 9.99902 17.834C5.68365 17.8338 2.16602 14.3154 2.16602 10C2.16619 5.68473 5.68376 2.16717 9.99902 2.16699ZM10.5088 12.1055C10.1857 11.9709 9.81331 11.9709 9.49023 12.1055C9.3364 12.1696 9.197 12.2588 9.07324 12.3701L9.05371 12.3877L9.03613 12.4072C8.92481 12.5309 8.83561 12.6705 8.77148 12.8242C8.70851 12.9754 8.66602 13.1498 8.66602 13.334C8.66606 13.5127 8.70667 13.6812 8.7666 13.8291L8.76562 13.8301C8.83536 14.0113 8.93351 14.1457 9.03613 14.2598L9.05371 14.2793L9.07324 14.2969C9.197 14.4083 9.33639 14.4974 9.49023 14.5615C9.64129 14.6245 9.81496 14.6669 9.99902 14.667C10.1832 14.667 10.3576 14.6245 10.5088 14.5615C10.6625 14.4974 10.8021 14.4082 10.9258 14.2969L10.9453 14.2793L10.9629 14.2598C11.0631 14.1484 11.1572 14.0168 11.2266 13.8418L11.2275 13.8428C11.2905 13.6917 11.333 13.518 11.333 13.334C11.333 13.1498 11.2905 12.9754 11.2275 12.8242C11.1634 12.6704 11.0742 12.5309 10.9629 12.4072L10.9453 12.3877L10.9258 12.3701L10.8301 12.291C10.7315 12.2159 10.6242 12.1536 10.5088 12.1055ZM9.99902 5.54199C9.38136 5.54217 8.87402 6.04929 8.87402 6.66699V10.834C8.8742 11.4515 9.38147 11.9588 9.99902 11.959C10.6167 11.959 11.1238 11.4516 11.124 10.834V6.66699C11.124 6.04918 10.6168 5.54199 9.99902 5.54199Z"
|
|
fill={color} stroke={color}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function SearchHeaderP({ color = '#7E7E7E' }: { color?: string }) {
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M22 22L20 20" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|