logo and architecture fixes
This commit is contained in:
IGNY8 VPS (Salman)
@@ -312,7 +312,9 @@ export default function SignUpFormUnified({
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto no-scrollbar flex items-center">
|
||||
<div className="w-full max-w-md mx-auto p-6 sm:p-8">
|
||||
<div className={`w-full mx-auto p-6 sm:p-8 ${
|
||||
isPaidPlan ? 'max-w-2xl' : 'max-w-md'
|
||||
}`}>
|
||||
<Link
|
||||
to="/"
|
||||
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mb-6"
|
||||
@@ -413,76 +415,79 @@ export default function SignUpFormUnified({
|
||||
|
||||
{isPaidPlan && (
|
||||
<div className="pt-4 border-t border-gray-200 dark:border-gray-700 space-y-4">
|
||||
<div>
|
||||
<Label>
|
||||
Country<span className="text-error-500">*</span>
|
||||
</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'US', label: '🇺🇸 United States' },
|
||||
{ value: 'GB', label: '🇬🇧 United Kingdom' },
|
||||
{ value: 'IN', label: '🇮🇳 India' },
|
||||
{ value: 'PK', label: '🇵🇰 Pakistan' },
|
||||
{ value: 'CA', label: '🇨🇦 Canada' },
|
||||
{ value: 'AU', label: '🇦🇺 Australia' },
|
||||
{ value: 'DE', label: '🇩🇪 Germany' },
|
||||
{ value: 'FR', label: '🇫🇷 France' },
|
||||
]}
|
||||
value={formData.billingCountry}
|
||||
onChange={(value) => setFormData((prev) => ({ ...prev, billingCountry: value }))}
|
||||
className="text-base"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Payment methods will be filtered by your country</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>
|
||||
Country<span className="text-error-500">*</span>
|
||||
</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'US', label: '🇺🇸 United States' },
|
||||
{ value: 'GB', label: '🇬🇧 United Kingdom' },
|
||||
{ value: 'IN', label: '🇮🇳 India' },
|
||||
{ value: 'PK', label: '🇵🇰 Pakistan' },
|
||||
{ value: 'CA', label: '🇨🇦 Canada' },
|
||||
{ value: 'AU', label: '🇦🇺 Australia' },
|
||||
{ value: 'DE', label: '🇩🇪 Germany' },
|
||||
{ value: 'FR', label: '🇫🇷 France' },
|
||||
]}
|
||||
value={formData.billingCountry}
|
||||
onChange={(value) => setFormData((prev) => ({ ...prev, billingCountry: value }))}
|
||||
className="text-base"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Payment methods filtered by country</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>
|
||||
Payment Method<span className="text-error-500">*</span>
|
||||
</Label>
|
||||
{paymentMethodsLoading ? (
|
||||
<div className="flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg h-[52px]">
|
||||
<Loader2 className="w-4 h-4 animate-spin text-brand-500" />
|
||||
</div>
|
||||
) : paymentMethods.length === 0 ? (
|
||||
<div className="p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-200">
|
||||
<p className="text-xs">No payment methods available</p>
|
||||
</div>
|
||||
) : (
|
||||
<SelectDropdown
|
||||
options={paymentMethods.map(m => ({
|
||||
value: m.payment_method,
|
||||
label: m.display_name
|
||||
}))}
|
||||
value={selectedPaymentMethod}
|
||||
onChange={(value) => setSelectedPaymentMethod(value)}
|
||||
className="text-base"
|
||||
/>
|
||||
)}
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">How you'd like to pay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>
|
||||
Payment Method<span className="text-error-500">*</span>
|
||||
</Label>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1 mb-2">Select how you'd like to pay for your subscription</p>
|
||||
|
||||
{paymentMethodsLoading ? (
|
||||
<div className="flex items-center justify-center p-6 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<Loader2 className="w-5 h-5 animate-spin text-brand-500 mr-2" />
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Loading payment options...</span>
|
||||
</div>
|
||||
) : paymentMethods.length === 0 ? (
|
||||
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-200">
|
||||
<p className="text-sm">No payment methods available. Please contact support.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{paymentMethods.map((method) => (
|
||||
{/* Payment Method Details - Full Width Below */}
|
||||
{selectedPaymentMethod && paymentMethods.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{paymentMethods.filter(m => m.payment_method === selectedPaymentMethod).map((method) => (
|
||||
method.instructions && (
|
||||
<div
|
||||
key={method.id}
|
||||
onClick={() => setSelectedPaymentMethod(method.payment_method)}
|
||||
className={`relative p-4 rounded-lg border-2 cursor-pointer transition-all ${
|
||||
selectedPaymentMethod === method.payment_method
|
||||
? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
|
||||
: 'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600'
|
||||
}`}
|
||||
className="p-4 rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/50"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={`flex items-center justify-center w-10 h-10 rounded-lg ${
|
||||
selectedPaymentMethod === method.payment_method ? 'bg-brand-500 text-white' : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-brand-500 text-white flex-shrink-0">
|
||||
{getPaymentIcon(method.payment_method)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">{method.display_name}</h4>
|
||||
{selectedPaymentMethod === method.payment_method && <Check className="w-5 h-5 text-brand-500" />}
|
||||
</div>
|
||||
{method.instructions && <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 whitespace-pre-line">{method.instructions}</p>}
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white text-sm mb-1">{method.display_name}</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 whitespace-pre-line">{method.instructions}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user