dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: batch supporting UI, settings schema, templates, and docs updates

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-06-01 00:58:43 +07:00
parent 30f2fc2ea6
commit f3c4ee7124
20 changed files with 1149 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
customer-spa/src/components/ui/button.tsx
View File

@@ -13,7 +13,7 @@ const buttonVariants = cva(
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
"border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",

2
customer-spa/src/lib/currency.ts
View File

@@ -16,7 +16,7 @@ interface CurrencySettings {
/**
* Get currency settings from window
*/
function getCurrencySettings(): CurrencySettings {
export function getCurrencySettings(): CurrencySettings {
const settings = (window as any).woonoowCustomer?.currency;
// Default to USD if not available

6
customer-spa/src/pages/Account/AccountDetails.tsx
View File

@@ -231,7 +231,7 @@ export default function AccountDetails() {
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploadingAvatar}
className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
>
{uploadingAvatar ? 'Uploading...' : 'Upload Photo'}
</button>
@@ -294,7 +294,7 @@ export default function AccountDetails() {
<button
type="submit"
className="font-[inherit] px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="font-[inherit] px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
disabled={saving}
>
{saving ? 'Saving...' : 'Save Changes'}
@@ -344,7 +344,7 @@ export default function AccountDetails() {
<button
type="submit"
className="font-[inherit] px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="font-[inherit] px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
disabled={saving}
>
{saving ? 'Updating...' : 'Update Password'}

6
customer-spa/src/pages/Account/Addresses.tsx
View File

@@ -306,7 +306,7 @@ export default function Addresses() {
<h1 className="text-2xl font-bold">Addresses</h1>
<button
onClick={handleAdd}
className="font-[inherit] inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
className="font-[inherit] inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
>
<Plus className="w-4 h-4" />
Add Address
@@ -319,7 +319,7 @@ export default function Addresses() {
<p className="text-gray-600 mb-4">No addresses saved yet</p>
<button
onClick={handleAdd}
className="font-[inherit] inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
className="font-[inherit] inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
>
<Plus className="w-4 h-4" />
Add Your First Address
@@ -454,7 +454,7 @@ export default function Addresses() {
<button
onClick={handleSave}
disabled={loadingFields}
className="font-[inherit] flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
className="font-[inherit] flex-1 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
>
Save Address
</button>

20
customer-spa/src/pages/Account/Orders.tsx
View File

@@ -40,15 +40,15 @@ export default function Orders() {
const getStatusColor = (status: string) => {
const colors: Record<string, string> = {
'completed': 'bg-green-100 text-green-800',
'processing': 'bg-blue-100 text-blue-800',
'pending': 'bg-yellow-100 text-yellow-800',
'on-hold': 'bg-orange-100 text-orange-800',
'cancelled': 'bg-red-100 text-red-800',
'refunded': 'bg-gray-100 text-gray-800',
'failed': 'bg-red-100 text-red-800',
'completed': 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
'processing': 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
'pending': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
'on-hold': 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400',
'cancelled': 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
'refunded': 'bg-gray-100 text-gray-800 dark:bg-gray-800/50 dark:text-gray-400',
'failed': 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
};
return colors[status] || 'bg-gray-100 text-gray-800';
return colors[status] || 'bg-gray-100 text-gray-800 dark:bg-gray-800/50 dark:text-gray-400';
};
const formatDate = (dateString: string) => {
@@ -77,7 +77,7 @@ export default function Orders() {
<p className="text-gray-600 mb-4">No orders yet</p>
<Link
to="/shop"
className="inline-block px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
className="inline-block px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
>
Browse Products
</Link>
@@ -112,7 +112,7 @@ export default function Orders() {
<span className="font-bold text-lg">{order.total}</span>
<Link
to={`/my-account/orders/${order.id}`}
className="flex items-center gap-2 px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors"
className="flex items-center gap-2 px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-primary-foreground transition-colors"
>
<Eye className="w-4 h-4" />
View

2
customer-spa/src/pages/OrderPay/index.tsx
View File

@@ -243,7 +243,7 @@ const OrderPay: React.FC = () => {
<button
onClick={handlePayment}
disabled={processing || !selectedGateway}
className="w-full bg-primary text-white py-4 px-6 rounded-lg font-bold text-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-sm"
className="w-full bg-primary text-primary-foreground py-4 px-6 rounded-lg font-bold text-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-sm"
>
{processing ? 'Processing Payment...' : `Pay ${formatPrice(order.total, order.currency)}`}
</button>

14
customer-spa/src/pages/ThankYou/index.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useParams, Link, useSearchParams } from 'react-router-dom';
import { useThankYouSettings } from '@/hooks/useAppearanceSettings';
import { useTheme } from '@/contexts/ThemeContext';
import Container from '@/components/Layout/Container';
import SEOHead from '@/components/SEOHead';
import { CheckCircle, ShoppingBag, Package, Truck, User, LogIn } from 'lucide-react';
@@ -13,6 +14,7 @@ export default function ThankYou() {
const [searchParams] = useSearchParams();
const orderKey = searchParams.get('key');
const { template, backgroundColor, customMessage, elements, isLoading: settingsLoading } = useThankYouSettings();
const { colorMode } = useTheme();
const [order, setOrder] = useState<any>(null);
const [relatedProducts, setRelatedProducts] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
@@ -74,7 +76,7 @@ export default function ThankYou() {
// Render receipt style template
if (template === 'receipt') {
return (
<div style={{ backgroundColor }}>
<div style={colorMode === 'dark' ? undefined : { backgroundColor }} className="min-h-screen dark:bg-background">
<SEOHead title="Order Confirmed" description={`Order #${order?.number || orderId} confirmed`} />
<Container>
<div className="py-12 max-w-2xl mx-auto">
@@ -99,8 +101,8 @@ export default function ThankYou() {
</div>
{/* Custom Message */}
<div className="px-8 py-4 bg-gray-50 border-b border-dashed border-gray-300">
<p className="text-sm text-center text-gray-700">{customMessage}</p>
<div className="px-8 py-4 bg-gray-50 dark:bg-blue-900/20 border-b border-dashed border-gray-300 dark:border-blue-800/50">
<p className="text-sm text-center text-gray-700 dark:text-blue-100">{customMessage}</p>
</div>
{/* Order Items */}
@@ -364,7 +366,7 @@ export default function ThankYou() {
// Render basic style template (default)
return (
<div style={{ backgroundColor }}>
<div style={colorMode === 'dark' ? undefined : { backgroundColor }} className="min-h-screen dark:bg-background">
<SEOHead title="Order Confirmed" description={`Order #${order?.number || orderId} confirmed`} />
<Container>
<div className="py-12 max-w-3xl mx-auto">
@@ -378,8 +380,8 @@ export default function ThankYou() {
</div>
{/* Custom Message */}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
<p className="text-gray-800 text-center">{customMessage}</p>
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/50 rounded-lg p-6 mb-8">
<p className="text-gray-800 dark:text-blue-100 text-center">{customMessage}</p>
</div>
{/* Order Details */}