g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update page.tsx

Browse Source
This commit is contained in:
NotII
2025-04-21 14:37:00 +01:00
parent 830cd9067a
commit 68b5aebc17
1 changed files with 185 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

350
app/dashboard/storefront/page.tsx
View File

@@ -10,6 +10,7 @@ import { Save, Send, Key, MessageSquare, Shield, Globe, Wallet } from "lucide-re
import { apiRequest } from "@/lib/api"; import { apiRequest } from "@/lib/api";
import { toast, Toaster } from "sonner"; import { toast, Toaster } from "sonner";
import BroadcastDialog from "@/components/modals/broadcast-dialog"; import BroadcastDialog from "@/components/modals/broadcast-dialog";
import Dashboard from "@/components/dashboard/dashboard";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -33,6 +34,7 @@ interface Storefront {
telegramToken: string; telegramToken: string;
shipsFrom: typeof SHIPPING_REGIONS[number]["value"]; shipsFrom: typeof SHIPPING_REGIONS[number]["value"];
shipsTo: typeof SHIPPING_REGIONS[number]["value"]; shipsTo: typeof SHIPPING_REGIONS[number]["value"];
storePolicy: string;
wallets: { wallets: {
bitcoin?: string; bitcoin?: string;
litecoin: string; litecoin: string;
@@ -80,6 +82,7 @@ export default function StorefrontPage() {
telegramToken: "", telegramToken: "",
shipsFrom: "UK", shipsFrom: "UK",
shipsTo: "WW", shipsTo: "WW",
storePolicy: "",
wallets: { wallets: {
bitcoin: '', bitcoin: '',
litecoin: '', litecoin: '',
@@ -117,6 +120,7 @@ export default function StorefrontPage() {
telegramToken: data.telegramToken || "", telegramToken: data.telegramToken || "",
shipsFrom: data.shipsFrom || "UK", shipsFrom: data.shipsFrom || "UK",
shipsTo: data.shipsTo || "WW", shipsTo: data.shipsTo || "WW",
storePolicy: data.storePolicy || "",
wallets: { wallets: {
bitcoin: data.wallets?.bitcoin || '', bitcoin: data.wallets?.bitcoin || '',
litecoin: data.wallets?.litecoin || '', litecoin: data.wallets?.litecoin || '',
@@ -157,10 +161,13 @@ export default function StorefrontPage() {
}; };
return ( return (
<Layout> <Dashboard>
<div> <div className="space-y-6">
<div className="flex items-center justify-between border-b border-zinc-800 h-14 px-4"> <div className="flex items-center justify-between">
<h1 className="text-xl font-medium">Storefront Settings</h1> <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
<Globe className="mr-2 h-6 w-6" />
Storefront Settings
</h1>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
variant="outline" variant="outline"
@@ -183,176 +190,189 @@ export default function StorefrontPage() {
</div> </div>
</div> </div>
<div className="p-3"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3"> {/* Security Settings */}
{/* Security Settings */} <div className="space-y-3">
<div className="space-y-3"> <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
<div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800"> <div className="flex items-center gap-2 mb-3">
<div className="flex items-center gap-2 mb-3"> <Shield className="h-4 w-4 text-purple-400" />
<Shield className="h-4 w-4 text-purple-400" /> <h2 className="text-base font-medium text-zinc-100">
<h2 className="text-base font-medium text-zinc-100"> Security
Security </h2>
</h2>
</div>
<div className="space-y-3">
<div>
<label className="text-xs font-medium mb-1 block text-zinc-400">PGP Public Key</label>
<Textarea
value={storefront.pgpKey}
onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
placeholder="Enter your PGP public key"
className="font-mono text-sm h-24 bg-[#1C1C1C] border-zinc-800 resize-none"
/>
</div>
<div>
<label className="text-xs font-medium mb-1 block text-zinc-400">Telegram Bot Token</label>
<Input
type="password"
value={storefront.telegramToken}
onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
placeholder="Enter your Telegram bot token"
className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm"
/>
</div>
</div>
</div> </div>
<div className="space-y-3">
{/* Shipping Settings */} <div>
<div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800"> <label className="text-xs font-medium mb-1 block text-zinc-400">PGP Public Key</label>
<div className="flex items-center gap-2 mb-3"> <Textarea
<Globe className="h-4 w-4 text-blue-400" /> value={storefront.pgpKey}
<h2 className="text-base font-medium text-zinc-100"> onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
Shipping placeholder="Enter your PGP public key"
</h2> className="font-mono text-sm h-24 bg-[#1C1C1C] border-zinc-800 resize-none"
/>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div>
<div> <label className="text-xs font-medium mb-1 block text-zinc-400">Telegram Bot Token</label>
<label className="text-xs font-medium mb-1 block text-zinc-400">Ships From</label> <Input
<Select type="password"
value={storefront.shipsFrom} value={storefront.telegramToken}
onValueChange={(value) => onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
setStorefront((prev) => ({ ...prev, shipsFrom: value as any })) placeholder="Enter your Telegram bot token"
} className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm"
> />
<SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
{SHIPPING_REGIONS.map((region) => (
<SelectItem key={region.value} value={region.value}>
{region.emoji} {region.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div>
<label className="text-xs font-medium mb-1 block text-zinc-400">Ships To</label>
<Select
value={storefront.shipsTo}
onValueChange={(value) =>
setStorefront((prev) => ({ ...prev, shipsTo: value as any }))
}
>
<SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
{SHIPPING_REGIONS.map((region) => (
<SelectItem key={region.value} value={region.value}>
{region.emoji} {region.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Messaging and Payments */} {/* Shipping Settings */}
<div className="space-y-3"> <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
<div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800"> <div className="flex items-center gap-2 mb-3">
<div className="flex items-center gap-2 mb-3"> <Globe className="h-4 w-4 text-blue-400" />
<MessageSquare className="h-4 w-4 text-emerald-400" /> <h2 className="text-base font-medium text-zinc-100">
<h2 className="text-base font-medium text-zinc-100"> Shipping
Welcome Message </h2>
</h2>
</div>
<Textarea
value={storefront.welcomeMessage}
onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
placeholder="Enter the welcome message for new customers"
className="h-24 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
/>
</div> </div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="text-xs font-medium mb-1 block text-zinc-400">Ships From</label>
<Select
value={storefront.shipsFrom}
onValueChange={(value) =>
setStorefront((prev) => ({ ...prev, shipsFrom: value as any }))
}
>
<SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
{SHIPPING_REGIONS.map((region) => (
<SelectItem key={region.value} value={region.value}>
{region.emoji} {region.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div>
<label className="text-xs font-medium mb-1 block text-zinc-400">Ships To</label>
<Select
value={storefront.shipsTo}
onValueChange={(value) =>
setStorefront((prev) => ({ ...prev, shipsTo: value as any }))
}
>
<SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
{SHIPPING_REGIONS.map((region) => (
<SelectItem key={region.value} value={region.value}>
{region.emoji} {region.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</div>
</div>
<div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800"> {/* Messaging and Payments */}
<div className="flex items-center gap-2 mb-3"> <div className="space-y-3">
<Wallet className="h-4 w-4 text-yellow-400" /> <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
<h2 className="text-base font-medium text-zinc-100"> <div className="flex items-center gap-2 mb-3">
Payment Methods <MessageSquare className="h-4 w-4 text-emerald-400" />
</h2> <h2 className="text-base font-medium text-zinc-100">
</div> Welcome Message
<div className="space-y-2"> </h2>
{WALLET_OPTIONS.map((wallet) => ( </div>
<div key={wallet.id} className="space-y-1.5"> <Textarea
<div className="flex items-center justify-between"> value={storefront.welcomeMessage}
<label className="text-xs font-medium flex items-center gap-2 text-zinc-400"> onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
<span>{wallet.emoji}</span> placeholder="Enter the welcome message for new customers"
{wallet.name} className="h-36 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
{wallet.comingSoon && ( />
<span className="text-[10px] bg-purple-900/50 text-purple-400 px-1.5 py-0.5 rounded"> </div>
Coming Soon
</span> <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
<div className="flex items-center gap-2 mb-3">
<Shield className="h-4 w-4 text-orange-400" />
<h2 className="text-base font-medium text-zinc-100">
Store Policy
</h2>
</div>
<Textarea
value={storefront.storePolicy}
onChange={(e) => setStorefront(prev => ({ ...prev, storePolicy: e.target.value }))}
placeholder="Enter your store's policies, terms, and conditions"
className="h-48 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
/>
</div>
<div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
<div className="flex items-center gap-2 mb-3">
<Wallet className="h-4 w-4 text-yellow-400" />
<h2 className="text-base font-medium text-zinc-100">
Payment Methods
</h2>
</div>
<div className="space-y-2">
{WALLET_OPTIONS.map((wallet) => (
<div key={wallet.id} className="space-y-1.5">
<div className="flex items-center justify-between">
<label className="text-xs font-medium flex items-center gap-2 text-zinc-400">
<span>{wallet.emoji}</span>
{wallet.name}
{wallet.comingSoon && (
<span className="text-[10px] bg-purple-900/50 text-purple-400 px-1.5 py-0.5 rounded">
Coming Soon
</span>
)}
</label>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div>
<Switch
checked={storefront.enabledWallets[wallet.id]}
onCheckedChange={(checked) =>
setStorefront((prev) => ({
...prev,
enabledWallets: {
...prev.enabledWallets,
[wallet.id]: checked,
},
}))
}
disabled={wallet.disabled}
/>
</div>
</TooltipTrigger>
{wallet.disabled && (
<TooltipContent>
<p>Coming soon</p>
</TooltipContent>
)} )}
</label> </Tooltip>
<TooltipProvider> </TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div>
<Switch
checked={storefront.enabledWallets[wallet.id]}
onCheckedChange={(checked) =>
setStorefront((prev) => ({
...prev,
enabledWallets: {
...prev.enabledWallets,
[wallet.id]: checked,
},
}))
}
disabled={wallet.disabled}
/>
</div>
</TooltipTrigger>
{wallet.disabled && (
<TooltipContent>
<p>Coming soon</p>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
</div>
{storefront.enabledWallets[wallet.id] && !wallet.disabled && (
<Input
value={storefront.wallets[wallet.id]}
onChange={(e) =>
setStorefront((prev) => ({
...prev,
wallets: {
...prev.wallets,
[wallet.id]: e.target.value,
},
}))
}
placeholder={wallet.placeholder}
className="font-mono text-sm h-8 bg-[#1C1C1C] border-zinc-800"
/>
)}
</div> </div>
))} {storefront.enabledWallets[wallet.id] && !wallet.disabled && (
</div> <Input
value={storefront.wallets[wallet.id]}
onChange={(e) =>
setStorefront((prev) => ({
...prev,
wallets: {
...prev.wallets,
[wallet.id]: e.target.value,
},
}))
}
placeholder={wallet.placeholder}
className="font-mono text-sm h-8 bg-[#1C1C1C] border-zinc-800"
/>
)}
</div>
))}
</div> </div>
</div> </div>
</div> </div>
@@ -361,6 +381,6 @@ export default function StorefrontPage() {
<BroadcastDialog open={broadcastOpen} setOpen={setBroadcastOpen} /> <BroadcastDialog open={broadcastOpen} setOpen={setBroadcastOpen} />
<Toaster position="bottom-right" /> <Toaster position="bottom-right" />
</Layout> </Dashboard>
); );
} }