Compare commits

..

1 Commits

Author SHA1 Message Date
AppCakes 6bbc0632f9 build: f2992d4b-fbd4-4c34-aa8c-d652ae24e63d 2026-05-28 19:26:10 +00:00
60 changed files with 144 additions and 9099 deletions
Binary file not shown.
+2 -2
View File
@@ -1,7 +1,7 @@
<?xml version='1.0' encoding='utf-8'?>
<resources>
<string name="app_name">bringg</string>
<string name="title_activity_main">bringg</string>
<string name="app_name">PowerSlap</string>
<string name="title_activity_main">PowerSlap</string>
<string name="package_name">io.ionic.starter</string>
<string name="custom_url_scheme">io.ionic.starter</string>
</resources>
+2 -2
View File
@@ -1,8 +1,8 @@
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.bringg.app',
appName: 'bringg',
appId: 'io.powerslap.app',
appName: 'PowerSlap',
webDir: 'dist',
plugins: {
FirebaseAuthentication: {
+27 -44
View File
@@ -11,9 +11,6 @@ workflows:
- $HOME/.gradle/caches
- $HOME/.gradle/wrapper
scripts:
# Template ships with optional native plugins (maps, push, firebase auth) that most apps
# won't use. Keeping unused plugins in package.json adds SPM/Gradle deps and bloats the
# build. Strip any that have no import in src/ so only actually-used plugins are compiled.
- name: Strip unused scaffold packages
script: |
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
@@ -24,16 +21,10 @@ workflows:
echo "Keeping $pkg (used in src/)"
fi
done
# Delete package-lock.json (generated if user ever ran npm locally) so it doesn't
# conflict with yarn.lock. --legacy-peer-deps silences peer dep warnings from older
# Ionic/React packages that haven't updated their peerDependencies for React 18/19.
- name: Install dependencies
script: rm -f package-lock.json && npm install --legacy-peer-deps
- name: Build web assets
script: npm run build
# Firebase config files are injected as base64 env vars by the Appcakes backend at
# build time. Decode them here so cap sync and Gradle can pick them up. Optional —
# builds without Firebase still succeed; native Firebase SDK just won't initialise.
- name: Write Firebase config
script: |
if [ -n "$GOOGLE_SERVICES_JSON" ]; then
@@ -46,8 +37,6 @@ workflows:
echo "$GOOGLE_SERVICE_INFO_PLIST" | base64 --decode > ios/App/App/GoogleService-Info.plist
echo "Wrote GoogleService-Info.plist ($(wc -c < ios/App/App/GoogleService-Info.plist) bytes)"
fi
# cap sync copies the built web assets (dist/) into android/app/src/main/assets/public/
# and updates Capacitor plugin registrations in MainActivity. Must run after npm build.
- name: Capacitor sync
script: npx cap sync android
- name: Set up debug keystore
@@ -239,25 +228,26 @@ workflows:
script: rm -f package-lock.json && npm install --legacy-peer-deps
- name: Build web assets
script: npm run build
# First sync: regenerates CapApp-SPM/Package.swift with the correct plugin list.
# Note: this project uses Capacitor SPM (no CocoaPods/Podfile), so cap sync replaces
# pod install — it regenerates CapApp-SPM/Package.swift and copies web assets.
- name: Capacitor sync
script: npx cap sync ios
# Decode Firebase plist to disk so it is present during the second sync.
- name: Write Firebase config
script: |
if [ -n "$GOOGLE_SERVICE_INFO_PLIST" ]; then
echo "$GOOGLE_SERVICE_INFO_PLIST" | base64 --decode > ios/App/App/GoogleService-Info.plist
ruby -e "
require 'xcodeproj'
project = Xcodeproj::Project.open('ios/App/App.xcodeproj')
target = project.targets.find { |t| t.name == 'App' }
app_group = project.main_group['App']
unless app_group.files.find { |f| f.path == 'GoogleService-Info.plist' }
file_ref = app_group.new_reference('GoogleService-Info.plist')
target.resources_build_phase.add_file_reference(file_ref)
project.save
end
"
fi
# Second sync ensures CapApp-SPM/Package.swift is consistent after the plist write.
- name: Capacitor sync
script: npx cap sync ios
# Run configure_xcode.rb after both syncs so its xcodeproj changes (plist file
# reference + SPM product linking) are not overwritten by a subsequent cap sync.
# configure_xcode.rb is stamped fresh from template on every build push.
- name: Configure Xcode project
script: ruby configure_xcode.rb
- name: Set up signing
script: |
keychain initialize
@@ -282,23 +272,11 @@ workflows:
echo "No signing credentials configured — build will fail at signing"
exit 1
fi
# --workspace: Capacitor SPM projects require workspace context for Xcode to resolve
# the CapApp-SPM local package. Using --project causes xcodebuild to fail on
# Xcode 26+ because SPM resolution requires workspace scope. App.xcworkspace is a
# static file committed to the template (not generated by cap sync) that wraps
# App.xcodeproj for this purpose.
# --no-show-build-settings: xcode-project runs xcodebuild -showBuildSettings as a
# pre-build diagnostic. Xcode 26 fails this step for SPM projects even with
# --workspace, so we skip it. The actual archive step still surfaces real errors.
# --disable-xcpretty: xcpretty reformats and filters xcodebuild output, swallowing
# the actual error lines when a build fails. Raw output makes failures debuggable.
- name: Build IPA
script: |
xcode-project build-ipa \
--workspace ios/App/App.xcworkspace \
--scheme App \
--no-show-build-settings \
--disable-xcpretty
--project ios/App/App.xcodeproj \
--scheme App
artifacts:
- build/ios/ipa/*.ipa
@@ -326,15 +304,24 @@ workflows:
script: npm run build
- name: Capacitor sync
script: npx cap sync ios
- name: Configure Xcode project
- name: Write Firebase config
script: |
if [ -n "$GOOGLE_SERVICE_INFO_PLIST" ]; then
echo "$GOOGLE_SERVICE_INFO_PLIST" | base64 --decode > ios/App/App/GoogleService-Info.plist
ruby -e "
require 'xcodeproj'
project = Xcodeproj::Project.open('ios/App/App.xcodeproj')
target = project.targets.find { |t| t.name == 'App' }
app_group = project.main_group['App']
unless app_group.files.find { |f| f.path == 'GoogleService-Info.plist' }
file_ref = app_group.new_reference('GoogleService-Info.plist')
target.resources_build_phase.add_file_reference(file_ref)
project.save
end
"
fi
- name: Capacitor sync
script: npx cap sync ios
- name: Configure Xcode project
script: ruby configure_xcode.rb
- name: Set up signing
script: |
keychain initialize
@@ -356,16 +343,12 @@ workflows:
echo "$CM_PROVISIONING_PROFILE" | base64 --decode > "$HOME/Library/MobileDevice/Provisioning Profiles/profile.mobileprovision"
xcode-project use-profiles
fi
# See ios-debug Build IPA comments for --workspace, --no-show-build-settings,
# and --disable-xcpretty rationale — same reasons apply here.
- name: Build IPA
script: |
xcode-project build-ipa \
--workspace ios/App/App.xcworkspace \
--project ios/App/App.xcodeproj \
--scheme App \
--config Release \
--no-show-build-settings \
--disable-xcpretty
--config Release
- name: Publish
script: |
if [ "$SUBMIT_TO_TESTFLIGHT" = "true" ] || [ "$SUBMIT_TO_APP_STORE" = "true" ]; then
-118
View File
@@ -1,118 +0,0 @@
#!/usr/bin/env ruby
# configure_xcode.rb — stamped fresh from template on every build (see gitea.service.ts)
#
# 1. Adds GoogleService-Info.plist to the Xcode target if present (xcodeproj gem)
# 2. Scans Swift sources for Firebase imports and injects matching products into
# CapApp-SPM/Package.swift — the correct approach for Capacitor SPM projects
# where all native linking goes through CapApp-SPM, not App.xcodeproj directly.
require 'xcodeproj'
PROJECT_PATH = 'ios/App/App.xcodeproj'
TARGET_NAME = 'App'
PLIST_SRC = 'ios/App/App/GoogleService-Info.plist'
CAP_APP_SPM = 'ios/App/CapApp-SPM/Package.swift'
# ── 1. GoogleService-Info.plist ───────────────────────────────────────────────
if File.exist?(PLIST_SRC)
project = Xcodeproj::Project.open(PROJECT_PATH)
target = project.targets.find { |t| t.name == TARGET_NAME }
if target
app_group = project.main_group['App']
unless app_group&.files&.find { |f| f.path == 'GoogleService-Info.plist' }
file_ref = app_group.new_reference('GoogleService-Info.plist')
target.resources_build_phase.add_file_reference(file_ref)
project.save
puts "Added GoogleService-Info.plist to target"
end
end
end
# ── 2. Scan Swift sources for Firebase imports ────────────────────────────────
swift_files = Dir['ios/App/App/**/*.swift']
firebase_imports = swift_files
.flat_map { |f| File.readlines(f) rescue [] }
.grep(/^\s*import\s+Firebase\w+/)
.map { |l| l.strip.split(/\s+/).last }
.uniq
.sort
if firebase_imports.empty?
puts "No Firebase imports found — skipping CapApp-SPM update"
exit 0
end
puts "Firebase imports detected: #{firebase_imports.join(', ')}"
unless File.exist?(CAP_APP_SPM)
warn "WARNING: #{CAP_APP_SPM} not found — was cap sync run?"
exit 0
end
# ── 3. Detect firebase-ios-sdk URL and version from node_modules ──────────────
# Read from the ACTUAL node_modules on this build machine (populated by npm install)
# so the version we inject matches what @capacitor-firebase/* already resolved.
firebase_url = nil
firebase_version = nil
Dir['node_modules/@capacitor-firebase/**/Package.swift',
'node_modules/@capacitor/push-notifications/**/Package.swift'].each do |f|
content = File.read(f) rescue next
url_m = content.match(/\.package\(url:\s*"(https:\/\/github\.com\/firebase\/firebase-ios-sdk[^"]*)"/)
ver_m = content.match(/firebase-ios-sdk[^)]+from:\s*"(\d+)\.(\d+)\.(\d+)"/)
next unless url_m && ver_m
firebase_url = url_m[1]
major = ver_m[1].to_i
firebase_version = "#{major}.0.0"
puts "Detected firebase-ios-sdk from #{f}: url=#{firebase_url} → using from: \"#{firebase_version}\""
break
end
# Fallback — should rarely be needed
unless firebase_url
firebase_url = 'https://github.com/firebase/firebase-ios-sdk.git'
firebase_version = '11.0.0'
puts "Could not detect firebase-ios-sdk version from node_modules — using fallback #{firebase_version}"
end
firebase_pkg = 'firebase-ios-sdk'
lines = File.read(CAP_APP_SPM).split("\n")
# ── 4. Inject firebase-ios-sdk as a direct package dependency if missing ──────
# Normalise URL check to handle both with and without .git suffix
firebase_url_base = firebase_url.sub(/\.git$/, '')
unless lines.any? { |l| l.include?(firebase_url_base) }
last_pkg_idx = lines.rindex { |l| l.include?('.package(') }
if last_pkg_idx
lines[last_pkg_idx] = lines[last_pkg_idx].rstrip
lines[last_pkg_idx] += ',' unless lines[last_pkg_idx].end_with?(',')
lines.insert(last_pkg_idx + 1,
" .package(url: \"#{firebase_url}\", from: \"#{firebase_version}\")")
puts "Added #{firebase_pkg} to CapApp-SPM package dependencies"
else
warn "WARNING: no .package( line found in #{CAP_APP_SPM} — cannot inject dependency"
end
end
# ── 5. Inject each detected product into the target dependencies if missing ───
firebase_imports.each do |product|
next if product == 'Firebase' # umbrella import — not a linkable SPM product
product_str = ".product(name: \"#{product}\", package: \"#{firebase_pkg}\")"
next if lines.any? { |l| l.include?(product_str) }
last_prod_idx = lines.rindex { |l| l.include?('.product(') }
if last_prod_idx
lines[last_prod_idx] = lines[last_prod_idx].rstrip
lines[last_prod_idx] += ',' unless lines[last_prod_idx].end_with?(',')
lines.insert(last_prod_idx + 1, " #{product_str}")
puts "Added #{product} to CapApp-SPM target dependencies"
else
warn "WARNING: no .product( line found in #{CAP_APP_SPM} — cannot inject #{product}"
end
end
File.write(CAP_APP_SPM, lines.join("\n"))
puts "CapApp-SPM/Package.swift updated"
+2 -2
View File
@@ -305,7 +305,7 @@
);
MARKETING_VERSION = 1.0;
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
PRODUCT_BUNDLE_IDENTIFIER = com.bringg.app;
PRODUCT_BUNDLE_IDENTIFIER = io.powerslap.app;
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
SWIFT_VERSION = 5.0;
@@ -326,7 +326,7 @@
"@executable_path/Frameworks",
);
MARKETING_VERSION = 1.0;
PRODUCT_BUNDLE_IDENTIFIER = com.bringg.app;
PRODUCT_BUNDLE_IDENTIFIER = io.powerslap.app;
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
SWIFT_VERSION = 5.0;
-7
View File
@@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<Workspace
version = "1.0">
<FileRef
location = "group:App.xcodeproj">
</FileRef>
</Workspace>
@@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEDidComputeMac32BitWarning</key>
<true/>
</dict>
</plist>
+3 -3
View File
@@ -7,7 +7,7 @@
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>bringg</string>
<string>PowerSlap</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
@@ -51,10 +51,10 @@
<array>
<dict>
<key>CFBundleURLName</key>
<string>com.bringg.app</string>
<string>io.powerslap.app</string>
<key>CFBundleURLSchemes</key>
<array>
<string>com.bringg.app</string>
<string>io.powerslap.app</string>
</array>
</dict>
</array>
+1 -1
View File
@@ -10,7 +10,7 @@
"lint": "eslint"
},
"dependencies": {
"@capacitor-firebase/authentication": "^8.0.0",
"@capacitor-firebase/authentication": "^7.0.0",
"@capacitor/android": "8.3.4",
"@capacitor/app": "8.1.0",
"@capacitor/core": "8.3.4",
+16 -57
View File
@@ -1,71 +1,30 @@
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import React from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import '@ionic/react/css/core.css';
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
import "@ionic/react/css/core.css";
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
import './theme/variables.css';
import "./theme/variables.css";
import Home from './pages/Home';
import ProductDetail from './pages/ProductDetail';
import Cart from './pages/Cart';
import OrderConfirmation from './pages/OrderConfirmation';
import MyOrders from './pages/MyOrders';
import OrderDetail from './pages/OrderDetail';
import Auth from './pages/Auth';
import Profile from './pages/Profile';
import Addresses from './pages/Addresses';
import Wallet from './pages/Wallet';
import PaymentMethods from './pages/PaymentMethods';
import AddPaymentMethod from './pages/AddPaymentMethod';
import AdminOrders from './pages/AdminOrders';
import AdminOrderDetail from './pages/AdminOrderDetail';
import { AuthProvider } from './context/AuthContext';
import Home from "./pages/Home";
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<AuthProvider>
<IonRouterOutlet>
<Route path="/home" component={Home} exact />
<Route path="/auth" component={Auth} exact />
<Route path="/product/:id" component={ProductDetail} exact />
<Route path="/cart" component={Cart} exact />
<Route path="/orders" component={MyOrders} exact />
<Route path="/orders/:id" component={OrderDetail} exact />
<Route path="/profile" component={Profile} exact />
<Route path="/addresses" component={Addresses} exact />
<Route path="/wallet" component={Wallet} exact />
<Route
path="/wallet/payment-methods"
component={PaymentMethods}
exact
/>
<Route
path="/wallet/payment-methods/add"
component={AddPaymentMethod}
exact
/>
<Route path="/admin/orders" component={AdminOrders} exact />
<Route path="/admin/orders/:id" component={AdminOrderDetail} exact />
<Route
path="/order-confirmation"
component={OrderConfirmation}
exact
/>
<Redirect exact from="/" to="/home" />
</IonRouterOutlet>
</AuthProvider>
</IonReactRouter>
</IonApp>
);
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 839 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 476 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 501 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 602 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 554 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 553 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 437 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 676 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 673 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 452 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 545 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 550 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 461 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 689 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 447 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 690 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 599 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 464 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 629 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 515 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 655 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 697 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 476 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 466 KiB

-36
View File
@@ -1,36 +0,0 @@
import React from 'react';
import { Redirect, Route, RouteProps } from 'react-router-dom';
import { IonLoading } from '@ionic/react';
import { useAuth } from '../context/AuthContext';
type Props = RouteProps;
const AdminRoute: React.FC<Props> = ({ component: Component, ...rest }) => {
const { user, profile, isLoading } = useAuth();
if (!Component) return null;
return (
<Route
{...rest}
render={(props) => {
if (isLoading) {
return <IonLoading isOpen message="Loading..." />;
}
if (!user) {
return <Redirect to="/auth" />;
}
if (!profile?.is_admin) {
return <Redirect to="/home" />;
}
const RouteComponent = Component as React.ComponentType<any>;
return <RouteComponent {...props} />;
}}
/>
);
};
export default AdminRoute;
-101
View File
@@ -1,101 +0,0 @@
import React from 'react';
import {
IonButton,
IonIcon,
IonLabel,
IonModal,
IonRadio,
IonRadioGroup,
IonItem,
IonList,
} from '@ionic/react';
import { funnelOutline } from 'ionicons/icons';
export type SortOption = 'popular' | 'price-asc' | 'price-desc' | 'name-asc';
type Props = {
categories: string[];
selectedCategory: string;
setSelectedCategory: (value: string) => void;
sortOption: SortOption;
setSortOption: (value: SortOption) => void;
isOpen: boolean;
onClose: () => void;
};
const ProductFilters: React.FC<Props> = ({
categories,
selectedCategory,
setSelectedCategory,
sortOption,
setSortOption,
isOpen,
onClose,
}) => (
<>
<div className="filter-row">
<div className="filter-chip-row">
<IonButton
fill={selectedCategory === 'All' ? 'solid' : 'outline'}
size="small"
onClick={() => setSelectedCategory('All')}
>
All
</IonButton>
{categories.map((category) => (
<IonButton
key={category}
fill={selectedCategory === category ? 'solid' : 'outline'}
size="small"
onClick={() => setSelectedCategory(category)}
>
{category}
</IonButton>
))}
</div>
<IonButton fill="clear" className="filter-button" onClick={onClose}>
<IonIcon icon={funnelOutline} slot="start" />
Filters
</IonButton>
</div>
<IonModal
isOpen={isOpen}
onDidDismiss={onClose}
breakpoints={[0, 0.45]}
initialBreakpoint={0.45}
>
<div className="filter-modal ion-padding">
<h2>Sort products</h2>
<IonRadioGroup
value={sortOption}
onIonChange={(e) => setSortOption(e.detail.value)}
>
<IonList lines="none">
<IonItem>
<IonLabel>Most popular</IonLabel>
<IonRadio value="popular" />
</IonItem>
<IonItem>
<IonLabel>Price: low to high</IonLabel>
<IonRadio value="price-asc" />
</IonItem>
<IonItem>
<IonLabel>Price: high to low</IonLabel>
<IonRadio value="price-desc" />
</IonItem>
<IonItem>
<IonLabel>Name: A to Z</IonLabel>
<IonRadio value="name-asc" />
</IonItem>
</IonList>
</IonRadioGroup>
<IonButton expand="block" onClick={onClose}>
Done
</IonButton>
</div>
</IonModal>
</>
);
export default ProductFilters;
-32
View File
@@ -1,32 +0,0 @@
import React from 'react';
import { Redirect, Route, RouteProps } from 'react-router-dom';
import { IonLoading } from '@ionic/react';
import { useAuth } from '../context/AuthContext';
type Props = RouteProps;
const ProtectedRoute: React.FC<Props> = ({ component: Component, ...rest }) => {
const { user, isLoading } = useAuth();
if (!Component) return null;
return (
<Route
{...rest}
render={(props) => {
if (isLoading) {
return <IonLoading isOpen message="Loading..." />;
}
if (!user) {
return <Redirect to="/auth" />;
}
const RouteComponent = Component as React.ComponentType<any>;
return <RouteComponent {...props} />;
}}
/>
);
};
export default ProtectedRoute;
-97
View File
@@ -1,97 +0,0 @@
import React, {
createContext,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
import type { Session, User } from '@supabase/supabase-js';
import { supabase } from '../supabase';
import type { Tables } from '../database.types';
type Profile = Tables<'profiles'>;
type AuthContextValue = {
session: Session | null;
user: User | null;
profile: Profile | null;
isLoading: boolean;
refreshProfile: () => Promise<void>;
signOut: () => Promise<void>;
};
const AuthContext = createContext<AuthContextValue | undefined>(undefined);
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const [session, setSession] = useState<Session | null>(null);
const [user, setUser] = useState<User | null>(null);
const [profile, setProfile] = useState<Profile | null>(null);
const [isLoading, setIsLoading] = useState(true);
const loadProfile = async (userId: string | null) => {
if (!userId) {
setProfile(null);
return;
}
const { data } = await supabase
.from('profiles')
.select('*')
.eq('id', userId)
.maybeSingle();
setProfile(data ?? null);
};
useEffect(() => {
let isMounted = true;
supabase.auth.getSession().then(async ({ data }) => {
if (!isMounted) return;
const nextSession = data.session ?? null;
setSession(nextSession);
setUser(nextSession?.user ?? null);
await loadProfile(nextSession?.user?.id ?? null);
if (isMounted) setIsLoading(false);
});
const {
data: { subscription },
} = supabase.auth.onAuthStateChange(async (_event, nextSession) => {
setSession(nextSession);
setUser(nextSession?.user ?? null);
await loadProfile(nextSession?.user?.id ?? null);
setIsLoading(false);
});
return () => {
isMounted = false;
subscription.unsubscribe();
};
}, []);
const value = useMemo<AuthContextValue>(
() => ({
session,
user,
profile,
isLoading,
refreshProfile: async () => loadProfile(user?.id ?? null),
signOut: async () => {
await supabase.auth.signOut();
},
}),
[session, user, profile, isLoading]
);
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};
export const useAuth = () => {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within AuthProvider');
}
return context;
};
-425
View File
@@ -1,425 +0,0 @@
export type Json =
| string
| number
| boolean
| null
| { [key: string]: Json | undefined }
| Json[]
export type Database = {
// Allows to automatically instantiate createClient with right options
// instead of createClient<Database, { PostgrestVersion: 'XX' }>(URL, KEY)
__InternalSupabase: {
PostgrestVersion: "14.5"
}
public: {
Tables: {
addresses: {
Row: {
address_line: string
created_at: string
id: string
is_default: boolean
label: string
notes: string | null
phone: string
recipient_name: string
user_id: string
}
Insert: {
address_line: string
created_at?: string
id?: string
is_default?: boolean
label: string
notes?: string | null
phone: string
recipient_name: string
user_id: string
}
Update: {
address_line?: string
created_at?: string
id?: string
is_default?: boolean
label?: string
notes?: string | null
phone?: string
recipient_name?: string
user_id?: string
}
Relationships: []
}
order_items: {
Row: {
created_at: string
id: string
order_id: string
product_id: string
product_name: string
quantity: number
unit_price: number
}
Insert: {
created_at?: string
id?: string
order_id: string
product_id: string
product_name: string
quantity: number
unit_price: number
}
Update: {
created_at?: string
id?: string
order_id?: string
product_id?: string
product_name?: string
quantity?: number
unit_price?: number
}
Relationships: [
{
foreignKeyName: "order_items_order_id_fkey"
columns: ["order_id"]
isOneToOne: false
referencedRelation: "orders"
referencedColumns: ["id"]
},
]
}
orders: {
Row: {
address_id: string | null
created_at: string
customer_name: string | null
customer_phone: string | null
delivery_address: string | null
delivery_fee: number
delivery_notes: string | null
id: string
item_count: number
order_number: string
status: string
subtotal: number
total: number
user_id: string | null
}
Insert: {
address_id?: string | null
created_at?: string
customer_name?: string | null
customer_phone?: string | null
delivery_address?: string | null
delivery_fee?: number
delivery_notes?: string | null
id?: string
item_count?: number
order_number: string
status?: string
subtotal?: number
total?: number
user_id?: string | null
}
Update: {
address_id?: string | null
created_at?: string
customer_name?: string | null
customer_phone?: string | null
delivery_address?: string | null
delivery_fee?: number
delivery_notes?: string | null
id?: string
item_count?: number
order_number?: string
status?: string
subtotal?: number
total?: number
user_id?: string | null
}
Relationships: [
{
foreignKeyName: "orders_address_id_fkey"
columns: ["address_id"]
isOneToOne: false
referencedRelation: "addresses"
referencedColumns: ["id"]
},
]
}
payment_methods: {
Row: {
brand: string
cardholder_name: string | null
created_at: string
expiry_month: number
expiry_year: number
id: string
is_default: boolean
last4: string
user_id: string
}
Insert: {
brand: string
cardholder_name?: string | null
created_at?: string
expiry_month: number
expiry_year: number
id?: string
is_default?: boolean
last4: string
user_id: string
}
Update: {
brand?: string
cardholder_name?: string | null
created_at?: string
expiry_month?: number
expiry_year?: number
id?: string
is_default?: boolean
last4?: string
user_id?: string
}
Relationships: []
}
profiles: {
Row: {
created_at: string
full_name: string | null
id: string
is_admin: boolean
phone: string | null
updated_at: string
}
Insert: {
created_at?: string
full_name?: string | null
id: string
is_admin?: boolean
phone?: string | null
updated_at?: string
}
Update: {
created_at?: string
full_name?: string | null
id?: string
is_admin?: boolean
phone?: string | null
updated_at?: string
}
Relationships: []
}
wallet_transactions: {
Row: {
amount: number
created_at: string
description: string | null
id: string
order_id: string | null
title: string
type: string
wallet_id: string
}
Insert: {
amount: number
created_at?: string
description?: string | null
id?: string
order_id?: string | null
title: string
type: string
wallet_id: string
}
Update: {
amount?: number
created_at?: string
description?: string | null
id?: string
order_id?: string | null
title?: string
type?: string
wallet_id?: string
}
Relationships: [
{
foreignKeyName: "wallet_transactions_order_id_fkey"
columns: ["order_id"]
isOneToOne: false
referencedRelation: "orders"
referencedColumns: ["id"]
},
{
foreignKeyName: "wallet_transactions_wallet_id_fkey"
columns: ["wallet_id"]
isOneToOne: false
referencedRelation: "wallets"
referencedColumns: ["id"]
},
]
}
wallets: {
Row: {
balance: number
created_at: string
currency: string
id: string
updated_at: string
user_id: string
}
Insert: {
balance?: number
created_at?: string
currency?: string
id?: string
updated_at?: string
user_id: string
}
Update: {
balance?: number
created_at?: string
currency?: string
id?: string
updated_at?: string
user_id?: string
}
Relationships: []
}
}
Views: {
[_ in never]: never
}
Functions: {
[_ in never]: never
}
Enums: {
[_ in never]: never
}
CompositeTypes: {
[_ in never]: never
}
}
}
type DatabaseWithoutInternals = Omit<Database, "__InternalSupabase">
type DefaultSchema = DatabaseWithoutInternals[Extract<keyof Database, "public">]
export type Tables<
DefaultSchemaTableNameOrOptions extends
| keyof (DefaultSchema["Tables"] & DefaultSchema["Views"])
| { schema: keyof DatabaseWithoutInternals },
TableName extends DefaultSchemaTableNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? keyof (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])
: never = never,
> = DefaultSchemaTableNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])[TableName] extends {
Row: infer R
}
? R
: never
: DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema["Tables"] &
DefaultSchema["Views"])
? (DefaultSchema["Tables"] &
DefaultSchema["Views"])[DefaultSchemaTableNameOrOptions] extends {
Row: infer R
}
? R
: never
: never
export type TablesInsert<
DefaultSchemaTableNameOrOptions extends
| keyof DefaultSchema["Tables"]
| { schema: keyof DatabaseWithoutInternals },
TableName extends DefaultSchemaTableNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
: never = never,
> = DefaultSchemaTableNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
Insert: infer I
}
? I
: never
: DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
Insert: infer I
}
? I
: never
: never
export type TablesUpdate<
DefaultSchemaTableNameOrOptions extends
| keyof DefaultSchema["Tables"]
| { schema: keyof DatabaseWithoutInternals },
TableName extends DefaultSchemaTableNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
: never = never,
> = DefaultSchemaTableNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
Update: infer U
}
? U
: never
: DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
Update: infer U
}
? U
: never
: never
export type Enums<
DefaultSchemaEnumNameOrOptions extends
| keyof DefaultSchema["Enums"]
| { schema: keyof DatabaseWithoutInternals },
EnumName extends DefaultSchemaEnumNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? keyof DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"]
: never = never,
> = DefaultSchemaEnumNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"][EnumName]
: DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema["Enums"]
? DefaultSchema["Enums"][DefaultSchemaEnumNameOrOptions]
: never
export type CompositeTypes<
PublicCompositeTypeNameOrOptions extends
| keyof DefaultSchema["CompositeTypes"]
| { schema: keyof DatabaseWithoutInternals },
CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? keyof DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
: never = never,
> = PublicCompositeTypeNameOrOptions extends {
schema: keyof DatabaseWithoutInternals
}
? DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
: PublicCompositeTypeNameOrOptions extends keyof DefaultSchema["CompositeTypes"]
? DefaultSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
: never
export const Constants = {
public: {
Enums: {},
},
} as const
-308
View File
@@ -1,308 +0,0 @@
import React, { useMemo, useState } from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonInput,
IonItem,
IonLabel,
IonPage,
IonText,
IonToggle,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import { cardOutline, chevronBackOutline } from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import { useAuth } from '../context/AuthContext';
import { setStatusBarStyle, Style } from '../utils/statusBar';
const sanitizeCardNumber = (value: string) =>
value.replace(/\D/g, '').slice(0, 19);
const sanitizeExpiry = (value: string) => {
const digits = value.replace(/\D/g, '').slice(0, 4);
if (digits.length <= 2) return digits;
return `${digits.slice(0, 2)}/${digits.slice(2)}`;
};
const sanitizeCvv = (value: string) => value.replace(/\D/g, '').slice(0, 4);
const detectBrand = (cardNumber: string) => {
if (/^4/.test(cardNumber)) return 'Visa';
if (/^(5[1-5]|2[2-7])/.test(cardNumber)) return 'Mastercard';
if (/^3[47]/.test(cardNumber)) return 'Amex';
return 'Card';
};
const AddPaymentMethod: React.FC = () => {
const history = useHistory();
const { user } = useAuth();
const [cardholderName, setCardholderName] = useState('');
const [cardNumber, setCardNumber] = useState('');
const [expiry, setExpiry] = useState('');
const [cvv, setCvv] = useState('');
const [setAsDefault, setSetAsDefault] = useState(true);
const [isPreviewBack, setIsPreviewBack] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [message, setMessage] = useState('');
const [error, setError] = useState('');
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Light);
});
const showError = (text: string) => {
setError(text);
window.setTimeout(() => setError(''), 4000);
};
const formattedCardNumber = useMemo(() => {
return sanitizeCardNumber(cardNumber)
.replace(/(.{4})/g, '$1 ')
.trim();
}, [cardNumber]);
const cardBrand = detectBrand(sanitizeCardNumber(cardNumber));
const previewNumber = formattedCardNumber || '1234 5678 9010 0010';
const previewName = cardholderName.trim() || 'Andrew Johnson';
const previewExpiry = expiry || '10/22';
const previewCvv = cvv || '123';
const handleSave = async () => {
if (!user) {
history.replace('/auth');
return;
}
const cleanCardNumber = sanitizeCardNumber(cardNumber);
const cleanExpiry = sanitizeExpiry(expiry);
const [monthRaw, yearRaw] = cleanExpiry.split('/');
const month = Number(monthRaw);
const year = Number(yearRaw);
if (!cardholderName.trim()) return showError('Enter the name on card.');
if (cleanCardNumber.length < 12)
return showError('Enter a valid card number.');
if (
!month ||
month < 1 ||
month > 12 ||
String(yearRaw ?? '').length !== 2
) {
return showError('Enter a valid expiry date.');
}
if (sanitizeCvv(cvv).length < 3) return showError('Enter a valid CVV.');
setIsSubmitting(true);
setError('');
if (setAsDefault) {
await supabase
.from('payment_methods')
.update({ is_default: false })
.eq('user_id', user.id);
}
const { error: insertError } = await supabase
.from('payment_methods')
.insert({
user_id: user.id,
brand: detectBrand(cleanCardNumber),
last4: cleanCardNumber.slice(-4),
expiry_month: month,
expiry_year: 2000 + year,
cardholder_name: cardholderName.trim(),
is_default: setAsDefault,
});
setIsSubmitting(false);
if (insertError) {
showError('Could not save this payment method.');
return;
}
setMessage('Payment method saved.');
window.setTimeout(() => history.replace('/wallet/payment-methods'), 700);
};
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner wallet-toolbar-inner-single-action">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to payment methods"
onClick={() => history.replace('/wallet/payment-methods')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Wallet</span>
<strong>Add card</strong>
</div>
<span className="wallet-toolbar-placeholder" />
</div>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="wallet-page add-card-page ion-padding">
<div className="wallet-intro-card add-card-intro-card">
<h1>Add Credit Card</h1>
<p>
Save a card for faster checkout. Only masked card metadata is stored
in this phase.
</p>
</div>
<div className="add-card-preview-shell">
<div className="preview-toggle-wrap">
<IonButton
fill="clear"
className="card-preview-toggle-button"
onClick={() => setIsPreviewBack((value) => !value)}
>
Show {isPreviewBack ? 'front' : 'back'} preview
</IonButton>
</div>
<div className="card-preview-stage">
<div
className={`card-preview card-preview-front ${
!isPreviewBack ? 'is-visible' : 'is-hidden'
}`}
>
<div className="card-preview-top-row">
<div className="card-chip-visual" />
<span className="card-brand-pill">{cardBrand}</span>
</div>
<div className="card-preview-number">{previewNumber}</div>
<div className="card-preview-meta-row">
<div>
<span>Cardholder Name</span>
<strong>{previewName}</strong>
</div>
<div className="card-preview-meta-right">
<span>Valid Thru</span>
<strong>{previewExpiry}</strong>
</div>
</div>
</div>
<div
className={`card-preview card-preview-back ${
isPreviewBack ? 'is-visible' : 'is-hidden'
}`}
>
<div className="card-preview-strip" />
<div className="card-preview-cvv-block">
<span>Security Code</span>
<strong>{previewCvv}</strong>
</div>
</div>
</div>
</div>
<div className="wallet-form-card add-card-form-card">
{message && (
<IonText color="success">
<p className="wallet-inline-message">{message}</p>
</IonText>
)}
{error && (
<IonText color="danger">
<p className="wallet-inline-message">{error}</p>
</IonText>
)}
<div className="checkout-form-grid add-card-form-grid">
<div className="form-field full-width">
<IonLabel>Card Number</IonLabel>
<IonItem lines="none" className="checkout-input add-card-input">
<IonIcon icon={cardOutline} slot="start" />
<IonInput
value={formattedCardNumber}
type="text"
inputMode="numeric"
placeholder="1234 5678 9012 3456"
onIonFocus={() => setIsPreviewBack(false)}
onIonInput={(e) => setCardNumber(e.detail.value ?? '')}
/>
</IonItem>
</div>
<div className="form-field">
<IonLabel>Cardholder Name</IonLabel>
<IonItem lines="none" className="checkout-input add-card-input">
<IonInput
value={cardholderName}
placeholder="Andrew Johnson"
onIonFocus={() => setIsPreviewBack(false)}
onIonInput={(e) => setCardholderName(e.detail.value ?? '')}
/>
</IonItem>
</div>
<div className="form-field">
<IonLabel>Valid Thru</IonLabel>
<IonItem lines="none" className="checkout-input add-card-input">
<IonInput
value={expiry}
type="text"
inputMode="numeric"
placeholder="10/22"
onIonFocus={() => setIsPreviewBack(false)}
onIonInput={(e) =>
setExpiry(sanitizeExpiry(e.detail.value ?? ''))
}
/>
</IonItem>
</div>
<div className="form-field full-width add-card-security-block">
<IonLabel>Security Code (CVV)</IonLabel>
<IonItem
lines="none"
className="checkout-input add-card-input add-card-cvv-input"
>
<IonInput
value={cvv}
type="password"
inputMode="numeric"
placeholder="123"
onIonFocus={() => setIsPreviewBack(true)}
onIonInput={(e) => setCvv(sanitizeCvv(e.detail.value ?? ''))}
/>
</IonItem>
</div>
</div>
<div className="wallet-toggle-row add-card-toggle-row">
<div>
<strong>Set as default</strong>
<p>Use this card first the next time you checkout.</p>
</div>
<IonToggle
checked={setAsDefault}
onIonChange={(e) => setSetAsDefault(e.detail.checked)}
/>
</div>
<IonButton
expand="block"
className="reference-place-order-button add-card-save-button"
onClick={handleSave}
disabled={isSubmitting}
>
{isSubmitting ? 'Save Card' : 'Save Card'}
</IonButton>
</div>
</IonContent>
</IonPage>
);
};
export default AddPaymentMethod;
-262
View File
@@ -1,262 +0,0 @@
import React, { useEffect, useState } from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonInput,
IonItem,
IonLabel,
IonList,
IonPage,
IonText,
IonTextarea,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import { chevronBackOutline, trashOutline } from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import { useAuth } from '../context/AuthContext';
import type { Tables } from '../database.types';
import { setStatusBarStyle, Style } from '../utils/statusBar';
type Address = Tables<'addresses'>;
const Addresses: React.FC = () => {
const history = useHistory();
const { user } = useAuth();
const [addresses, setAddresses] = useState<Address[]>([]);
const [label, setLabel] = useState('Home');
const [recipientName, setRecipientName] = useState('');
const [phone, setPhone] = useState('');
const [addressLine, setAddressLine] = useState('');
const [notes, setNotes] = useState('');
const [message, setMessage] = useState('');
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Dark);
});
const showMessage = (msg: string) => {
setMessage(msg);
window.setTimeout(() => setMessage(''), 4000);
};
const loadAddresses = async () => {
if (!user) return;
const { data } = await supabase
.from('addresses')
.select('*')
.eq('user_id', user.id)
.order('is_default', { ascending: false })
.order('created_at', { ascending: false });
setAddresses(data ?? []);
};
useEffect(() => {
loadAddresses();
}, [user?.id]);
const saveAddress = async () => {
if (
!user ||
!recipientName.trim() ||
!phone.trim() ||
!addressLine.trim()
) {
showMessage('Complete the required address details.');
return;
}
const makeDefault = addresses.length === 0;
if (makeDefault) {
await supabase
.from('addresses')
.update({ is_default: false })
.eq('user_id', user.id);
}
const { error } = await supabase.from('addresses').insert({
user_id: user.id,
label: label.trim() || 'Address',
recipient_name: recipientName.trim(),
phone: phone.trim(),
address_line: addressLine.trim(),
notes: notes.trim() || null,
is_default: makeDefault,
});
if (!error) {
setLabel('Home');
setRecipientName('');
setPhone('');
setAddressLine('');
setNotes('');
showMessage('Address saved.');
loadAddresses();
}
};
const setDefaultAddress = async (addressId: string) => {
if (!user) return;
await supabase
.from('addresses')
.update({ is_default: false })
.eq('user_id', user.id);
await supabase
.from('addresses')
.update({ is_default: true })
.eq('id', addressId);
loadAddresses();
};
const deleteAddress = async (addressId: string) => {
await supabase.from('addresses').delete().eq('id', addressId);
loadAddresses();
};
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner wallet-toolbar-inner-single-action">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to profile"
onClick={() => history.replace('/profile')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Profile</span>
<strong>Addresses</strong>
</div>
<span className="wallet-toolbar-placeholder" />
</div>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
{message && (
<IonText color="medium">
<p>{message}</p>
</IonText>
)}
<div className="checkout-card">
<div className="section-heading checkout-heading">
<h2>Add address</h2>
</div>
<div className="checkout-form-grid">
<div className="form-field">
<IonLabel position="stacked">Label</IonLabel>
<IonInput
value={label}
onIonInput={(e) => setLabel(e.detail.value ?? '')}
className="checkout-input"
/>
</div>
<div className="form-field">
<IonLabel position="stacked">Recipient</IonLabel>
<IonInput
value={recipientName}
onIonInput={(e) => setRecipientName(e.detail.value ?? '')}
className="checkout-input"
/>
</div>
<div className="form-field">
<IonLabel position="stacked">Phone</IonLabel>
<IonInput
value={phone}
onIonInput={(e) => setPhone(e.detail.value ?? '')}
className="checkout-input"
/>
</div>
<div className="form-field full-width">
<IonLabel position="stacked">Address</IonLabel>
<IonTextarea
value={addressLine}
onIonInput={(e) => setAddressLine(e.detail.value ?? '')}
className="checkout-input checkout-textarea"
autoGrow
rows={3}
/>
</div>
<div className="form-field full-width">
<IonLabel position="stacked">Notes</IonLabel>
<IonTextarea
value={notes}
onIonInput={(e) => setNotes(e.detail.value ?? '')}
className="checkout-input checkout-textarea"
autoGrow
rows={3}
/>
</div>
</div>
<IonButton expand="block" onClick={saveAddress}>
Save address
</IonButton>
</div>
{addresses.length === 0 ? (
<div className="empty-state">
<h3>No saved addresses</h3>
<p className="muted-text">
Save your first address for faster checkout.
</p>
</div>
) : (
<IonList lines="none" className="orders-list">
{addresses.map((address) => (
<div key={address.id} className="order-card">
<div className="order-card-top">
<div>
<span className="order-label">{address.label}</span>
<h3>{address.recipient_name}</h3>
</div>
{address.is_default ? (
<span className="default-pill">Default</span>
) : (
<IonButton
size="small"
fill="outline"
onClick={() => setDefaultAddress(address.id)}
>
Make default
</IonButton>
)}
</div>
<div className="delivery-detail-row delivery-detail-block">
<span>Phone</span>
<strong>{address.phone}</strong>
</div>
<div className="delivery-detail-row delivery-detail-block">
<span>Address</span>
<strong>{address.address_line}</strong>
</div>
{address.notes && (
<div className="delivery-detail-row delivery-detail-block">
<span>Notes</span>
<strong>{address.notes}</strong>
</div>
)}
<IonButton
fill="clear"
color="danger"
onClick={() => deleteAddress(address.id)}
>
<IonIcon slot="start" icon={trashOutline} />
Delete
</IonButton>
</div>
))}
</IonList>
)}
</IonContent>
</IonPage>
);
};
export default Addresses;
-123
View File
@@ -1,123 +0,0 @@
import React, { useEffect, useState } from 'react';
import {
IonButton,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonPage,
IonSelect,
IonSelectOption,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import { chevronBackOutline } from 'ionicons/icons';
import { RouteComponentProps, useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import type { Tables } from '../database.types';
import { setStatusBarStyle, Style } from '../utils/statusBar';
type Props = RouteComponentProps<{ id: string }>;
type Order = Tables<'orders'>;
type OrderItem = Tables<'order_items'>;
const statuses = ['confirmed', 'packed', 'out_for_delivery', 'delivered'];
const AdminOrderDetail: React.FC<Props> = ({ match }) => {
const history = useHistory();
const [order, setOrder] = useState<Order | null>(null);
const [items, setItems] = useState<OrderItem[]>([]);
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Dark);
});
const loadOrder = async () => {
const [{ data: orderData }, { data: itemData }] = await Promise.all([
supabase.from('orders').select('*').eq('id', match.params.id).single(),
supabase.from('order_items').select('*').eq('order_id', match.params.id),
]);
setOrder(orderData ?? null);
setItems(itemData ?? []);
};
useEffect(() => {
loadOrder();
}, [match.params.id]);
const updateStatus = async (status: string) => {
await supabase.from('orders').update({ status }).eq('id', match.params.id);
loadOrder();
};
if (!order)
return (
<IonPage>
<IonContent />
</IonPage>
);
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner wallet-toolbar-inner-single-action">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to admin orders"
onClick={() => history.replace('/admin/orders')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Admin order</span>
<strong>{order.order_number}</strong>
</div>
<span className="wallet-toolbar-placeholder" />
</div>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<div className="tracking-summary-card">
<div className="delivery-detail-row">
<span>Customer</span>
<strong>{order.customer_name || '—'}</strong>
</div>
<div className="delivery-detail-row">
<span>Phone</span>
<strong>{order.customer_phone || '—'}</strong>
</div>
<div className="delivery-detail-row delivery-detail-block">
<span>Address</span>
<strong>{order.delivery_address || '—'}</strong>
</div>
<IonSelect
value={order.status}
interface="action-sheet"
onIonChange={(e) => updateStatus(e.detail.value)}
>
{statuses.map((status) => (
<IonSelectOption key={status} value={status}>
{status.replace(/_/g, ' ')}
</IonSelectOption>
))}
</IonSelect>
</div>
<IonList lines="none" className="cart-list">
{items.map((item) => (
<IonItem key={item.id} className="cart-item">
<IonLabel>
<h2>{item.product_name}</h2>
<p>Qty {item.quantity}</p>
</IonLabel>
</IonItem>
))}
</IonList>
</IonContent>
</IonPage>
);
};
export default AdminOrderDetail;
-109
View File
@@ -1,109 +0,0 @@
import React, { useEffect, useState } from 'react';
import {
IonButton,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonPage,
IonSelect,
IonSelectOption,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import { chevronBackOutline } from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import type { Tables } from '../database.types';
import { setStatusBarStyle, Style } from '../utils/statusBar';
type Order = Tables<'orders'>;
const statuses = ['confirmed', 'packed', 'out_for_delivery', 'delivered'];
const AdminOrders: React.FC = () => {
const history = useHistory();
const [orders, setOrders] = useState<Order[]>([]);
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Dark);
});
const loadOrders = async () => {
const { data } = await supabase
.from('orders')
.select('*')
.order('created_at', { ascending: false });
setOrders(data ?? []);
};
useEffect(() => {
loadOrders();
}, []);
const updateStatus = async (orderId: string, status: string) => {
await supabase.from('orders').update({ status }).eq('id', orderId);
loadOrders();
};
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner wallet-toolbar-inner-single-action">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to profile"
onClick={() => history.replace('/profile')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Admin</span>
<strong>Orders</strong>
</div>
<span className="wallet-toolbar-placeholder" />
</div>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonList lines="none" className="orders-list">
{orders.map((order) => (
<IonItem
key={order.id}
className="cart-item admin-order-item"
button
onClick={() => history.push(`/admin/orders/${order.id}`)}
>
<IonLabel>
<h2>{order.order_number}</h2>
<p>
{order.customer_name || 'Customer'} · $
{Number(order.total).toFixed(2)}
</p>
</IonLabel>
<IonSelect
value={order.status}
interface="popover"
onIonChange={(e) => {
e.stopPropagation();
updateStatus(order.id, e.detail.value);
}}
>
{statuses.map((status) => (
<IonSelectOption key={status} value={status}>
{status.replace(/_/g, ' ')}
</IonSelectOption>
))}
</IonSelect>
</IonItem>
))}
</IonList>
</IonContent>
</IonPage>
);
};
export default AdminOrders;
-225
View File
@@ -1,225 +0,0 @@
import React, { useState } from 'react';
import {
IonButton,
IonContent,
IonHeader,
IonInput,
IonItem,
IonLabel,
IonPage,
IonText,
IonTitle,
IonToolbar,
IonToggle,
useIonViewWillEnter,
} from '@ionic/react';
import { useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import { setStatusBarStyle, Style } from '../utils/statusBar';
const Auth: React.FC = () => {
const history = useHistory();
const [mode, setMode] = useState<'login' | 'signup'>('login');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [demoMode, setDemoMode] = useState(true);
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Light);
});
const showError = (msg: string) => {
setErrorMessage(msg);
window.setTimeout(() => setErrorMessage(''), 4000);
};
const showMessage = (msg: string) => {
setMessage(msg);
window.setTimeout(() => setMessage(''), 4000);
};
const normaliseAuthError = (msg: string) => {
const lowered = msg.toLowerCase();
if (lowered.includes('email not confirmed')) {
return 'Please confirm your email before signing in. Check your inbox for the verification email.';
}
if (lowered.includes('invalid login credentials')) {
return 'Incorrect email or password. Please try again.';
}
if (lowered.includes('user already registered')) {
return 'An account with this email already exists. Please sign in instead.';
}
return msg;
};
const handleResendConfirmation = async () => {
if (!email.trim()) {
showError(
'Enter your email address first so we can resend the confirmation email.'
);
return;
}
setIsSubmitting(true);
const { error } = await supabase.auth.resend({
type: 'signup',
email: email.trim(),
});
setIsSubmitting(false);
if (error) {
showError(normaliseAuthError(error.message));
return;
}
showMessage('Confirmation email sent. Please check your inbox.');
};
const handleSubmit = async () => {
if (demoMode && mode === 'login') {
history.replace('/wallet');
return;
}
if (!email.trim() || password.trim().length < 6) {
showError('Enter a valid email and password with at least 6 characters.');
return;
}
setIsSubmitting(true);
if (mode === 'login') {
const { error } = await supabase.auth.signInWithPassword({
email: email.trim(),
password,
});
setIsSubmitting(false);
if (error) {
showError(normaliseAuthError(error.message));
return;
}
history.replace('/home');
return;
}
const { data, error } = await supabase.auth.signUp({
email: email.trim(),
password,
});
setIsSubmitting(false);
if (error) {
showError(normaliseAuthError(error.message));
return;
}
if (data.session) {
history.replace('/home');
return;
}
showMessage('Account created! Check your email for a verification link.');
};
return (
<IonPage>
<IonHeader className="ion-no-border">
<IonToolbar>
<IonTitle>
{mode === 'login' ? 'Welcome back' : 'Create account'}
</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding auth-page">
<div className="auth-card">
<h1>
{mode === 'login'
? 'Sign in to continue'
: 'Create your shopping account'}
</h1>
<p className="muted-text">
Save your orders, addresses, and track deliveries securely.
</p>
{errorMessage && (
<IonText color="danger">
<p>{errorMessage}</p>
</IonText>
)}
{message && (
<IonText color="success">
<p>{message}</p>
</IonText>
)}
<div className="auth-form">
<IonItem lines="none" className="auth-input-item auth-toggle-item">
<IonLabel>Demo quick access</IonLabel>
<IonToggle
checked={demoMode}
onIonChange={(e) => setDemoMode(e.detail.checked)}
/>
</IonItem>
<IonText className="auth-helper-text">
<p>
When enabled, Sign in opens the app immediately so you can
review the full experience without authentication.
</p>
</IonText>
<IonItem lines="none" className="auth-input-item">
<IonLabel position="stacked">Email</IonLabel>
<IonInput
value={email}
type="email"
disabled={demoMode && mode === 'login'}
onIonInput={(e) => setEmail(e.detail.value ?? '')}
/>
</IonItem>
<IonItem lines="none" className="auth-input-item">
<IonLabel position="stacked">Password</IonLabel>
<IonInput
value={password}
type="password"
disabled={demoMode && mode === 'login'}
onIonInput={(e) => setPassword(e.detail.value ?? '')}
/>
</IonItem>
<IonButton
expand="block"
onClick={handleSubmit}
disabled={isSubmitting}
>
{mode === 'login' ? 'Sign in' : 'Create account'}
</IonButton>
{mode === 'login' && (
<IonButton
fill="clear"
expand="block"
onClick={handleResendConfirmation}
disabled={isSubmitting}
>
Resend confirmation email
</IonButton>
)}
<IonButton
fill="clear"
expand="block"
onClick={() => setMode(mode === 'login' ? 'signup' : 'login')}
>
{mode === 'login'
? 'Need an account? Sign up'
: 'Already have an account? Sign in'}
</IonButton>
</div>
</div>
</IonContent>
</IonPage>
);
};
export default Auth;
-529
View File
@@ -1,529 +0,0 @@
import React, { useEffect, useMemo, useState } from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonInput,
IonItem,
IonLabel,
IonList,
IonLoading,
IonPage,
IonSelect,
IonSelectOption,
IonTextarea,
IonText,
IonTitle,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import {
addOutline,
bagHandleOutline,
chevronBackOutline,
removeOutline,
timeOutline,
trashOutline,
} from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import type { Tables, TablesInsert } from '../database.types';
import { useAuth } from '../context/AuthContext';
import { CartItem, LAST_ORDER_STORAGE_KEY, readCart, writeCart } from './Home';
import { setStatusBarStyle, Style } from '../utils/statusBar';
type Address = Tables<'addresses'>;
type CheckoutForm = {
customerName: string;
customerPhone: string;
deliveryAddress: string;
deliveryNotes: string;
addressId: string;
};
type FormErrors = Partial<Record<keyof CheckoutForm, string>>;
type SavedOrderInfo = {
id: string;
orderNumber: string;
total: number;
itemCount: number;
status: string;
customerName: string;
customerPhone: string;
deliveryAddress: string;
deliveryNotes: string;
};
const initialForm: CheckoutForm = {
customerName: '',
customerPhone: '',
deliveryAddress: '',
deliveryNotes: '',
addressId: '',
};
const Cart: React.FC = () => {
const history = useHistory();
const { user, profile } = useAuth();
const [cart, setCart] = useState<CartItem[]>([]);
const [addresses, setAddresses] = useState<Address[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [form, setForm] = useState<CheckoutForm>(initialForm);
const [formErrors, setFormErrors] = useState<FormErrors>({});
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Dark);
});
useEffect(() => {
setCart(readCart());
}, []);
useEffect(() => {
const syncCartFromStorage = () => setCart(readCart());
window.addEventListener('storage', syncCartFromStorage);
window.addEventListener(
'cart:updated',
syncCartFromStorage as EventListener
);
return () => {
window.removeEventListener('storage', syncCartFromStorage);
window.removeEventListener(
'cart:updated',
syncCartFromStorage as EventListener
);
};
}, []);
useEffect(() => {
const loadAddresses = async () => {
if (!user) {
setAddresses([]);
setForm((current) => ({
...current,
customerName: current.customerName || profile?.full_name || '',
customerPhone: current.customerPhone || profile?.phone || '',
addressId: '',
}));
return;
}
const { data } = await supabase
.from('addresses')
.select('*')
.eq('user_id', user.id)
.order('is_default', { ascending: false });
const nextAddresses = data ?? [];
setAddresses(nextAddresses);
const defaultAddress =
nextAddresses.find((address) => address.is_default) ?? nextAddresses[0];
setForm((current) => ({
...current,
customerName:
current.customerName ||
profile?.full_name ||
defaultAddress?.recipient_name ||
'',
customerPhone:
current.customerPhone ||
profile?.phone ||
defaultAddress?.phone ||
'',
deliveryAddress:
current.deliveryAddress || defaultAddress?.address_line || '',
deliveryNotes: current.deliveryNotes || defaultAddress?.notes || '',
addressId: defaultAddress?.id || '',
}));
};
void loadAddresses();
}, [user?.id, profile?.full_name, profile?.phone]);
const syncCart = (nextCart: CartItem[]) => {
setCart(nextCart);
writeCart(nextCart);
};
const showError = (message: string) => {
setErrorMessage(message);
window.setTimeout(() => setErrorMessage(''), 4000);
};
const handleFieldChange = (field: keyof CheckoutForm, value: string) => {
setForm((current) => ({ ...current, [field]: value }));
if (formErrors[field]) {
setFormErrors((current) => ({ ...current, [field]: undefined }));
}
};
const handleAddressSelect = (addressId: string) => {
const selected = addresses.find((address) => address.id === addressId);
if (!selected) return;
setForm((current) => ({
...current,
addressId,
customerName: selected.recipient_name,
customerPhone: selected.phone,
deliveryAddress: selected.address_line,
deliveryNotes: selected.notes || '',
}));
};
const validateForm = () => {
const nextErrors: FormErrors = {};
if (!form.customerName.trim()) {
nextErrors.customerName = 'Please enter the customer name.';
}
if (form.customerPhone.trim().replace(/\D/g, '').length < 7) {
nextErrors.customerPhone = 'Please enter a valid phone number.';
}
if (form.deliveryAddress.trim().length < 10) {
nextErrors.deliveryAddress =
'Please add a more complete delivery address.';
}
setFormErrors(nextErrors);
return Object.keys(nextErrors).length === 0;
};
const itemCount = useMemo(
() => cart.reduce((sum, item) => sum + item.quantity, 0),
[cart]
);
const subtotal = useMemo(
() => cart.reduce((sum, item) => sum + item.price * item.quantity, 0),
[cart]
);
const deliveryFee = cart.length > 0 ? 2.99 : 0;
const total = subtotal + deliveryFee;
const updateQuantity = (id: string, delta: number) =>
syncCart(
cart
.map((item) =>
item.id === id ? { ...item, quantity: item.quantity + delta } : item
)
.filter((item) => item.quantity > 0)
);
const removeItem = (id: string) =>
syncCart(cart.filter((item) => item.id !== id));
const placeOrder = async () => {
if (cart.length === 0 || isSubmitting) return;
if (!validateForm()) {
showError('Please complete the checkout form before placing the order.');
return;
}
setIsSubmitting(true);
const orderNumber = `QC-${Date.now().toString().slice(-6)}`;
const orderPayload: TablesInsert<'orders'> = {
order_number: orderNumber,
subtotal,
delivery_fee: deliveryFee,
total,
item_count: itemCount,
status: 'confirmed',
customer_name: form.customerName.trim(),
customer_phone: form.customerPhone.trim(),
delivery_address: form.deliveryAddress.trim(),
delivery_notes: form.deliveryNotes.trim() || null,
user_id: user?.id ?? null,
address_id: user ? form.addressId || null : null,
};
const { data: order, error: orderError } = await supabase
.from('orders')
.insert(orderPayload)
.select()
.single();
if (orderError || !order) {
setIsSubmitting(false);
showError('We could not place your order. Please try again.');
return;
}
const itemsPayload: TablesInsert<'order_items'>[] = cart.map((item) => ({
order_id: order.id,
product_id: item.id,
product_name: item.name,
unit_price: item.price,
quantity: item.quantity,
}));
const { error: itemsError } = await supabase
.from('order_items')
.insert(itemsPayload);
if (itemsError) {
await supabase.from('orders').delete().eq('id', order.id);
setIsSubmitting(false);
showError('We could not save your order items. Please try again.');
return;
}
const savedOrder: SavedOrderInfo = {
id: order.id,
orderNumber: order.order_number,
total: Number(order.total),
itemCount: order.item_count,
status: order.status,
customerName: order.customer_name ?? '',
customerPhone: order.customer_phone ?? '',
deliveryAddress: order.delivery_address ?? '',
deliveryNotes: order.delivery_notes ?? '',
};
localStorage.setItem(LAST_ORDER_STORAGE_KEY, JSON.stringify(savedOrder));
writeCart([]);
setCart([]);
setIsSubmitting(false);
history.replace('/order-confirmation');
};
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner wallet-toolbar-inner-single-action">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to home"
onClick={() => history.replace('/home')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Checkout</span>
<strong>Basket</strong>
</div>
<span className="wallet-toolbar-placeholder" />
</div>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="hybrid-page-surface ion-padding">
<IonLoading isOpen={isSubmitting} message="Placing your order..." />
{errorMessage && (
<IonText color="danger">
<p>{errorMessage}</p>
</IonText>
)}
{cart.length === 0 ? (
<div className="empty-state reference-empty-state cart-empty">
<IonIcon icon={bagHandleOutline} />
<h3>Your basket is empty</h3>
<p className="muted-text">
Add your first product to place an order.
</p>
<IonButton onClick={() => history.push('/home')}>
Browse products
</IonButton>
</div>
) : (
<div className="reference-cart-layout">
<div className="reference-cart-summary-strip">
<div>
<p className="overview-label">Items in basket</p>
<h2>
{itemCount} item{itemCount === 1 ? '' : 's'}
</h2>
</div>
<div className="summary-time-pill">
<IonIcon icon={timeOutline} />
<span>Arrives in 60 min</span>
</div>
</div>
<IonList lines="none" className="cart-list reference-cart-list">
{cart.map((item) => (
<IonItem
key={item.id}
className="cart-item reference-cart-item"
>
<IonLabel>
<h2>{item.name}</h2>
<p>${item.price.toFixed(2)} each</p>
<strong>${(item.price * item.quantity).toFixed(2)}</strong>
</IonLabel>
<div className="cart-actions reference-cart-actions">
<IonButton
fill="clear"
onClick={() => updateQuantity(item.id, -1)}
>
<IonIcon icon={removeOutline} />
</IonButton>
<span>{item.quantity}</span>
<IonButton
fill="clear"
onClick={() => updateQuantity(item.id, 1)}
>
<IonIcon icon={addOutline} />
</IonButton>
<IonButton
fill="clear"
color="danger"
onClick={() => removeItem(item.id)}
>
<IonIcon icon={trashOutline} />
</IonButton>
</div>
</IonItem>
))}
</IonList>
<div className="checkout-card reference-checkout-card">
<div className="section-heading checkout-heading">
<div>
<h2>Delivery details</h2>
<IonText color="medium">
<p>Complete this to confirm your order</p>
</IonText>
</div>
</div>
{user && addresses.length > 0 && (
<div className="form-field full-width">
<IonLabel position="stacked">Saved address</IonLabel>
<IonSelect
value={form.addressId}
placeholder="Choose a saved address"
className="checkout-input"
onIonChange={(e) => handleAddressSelect(e.detail.value)}
>
{addresses.map((address) => (
<IonSelectOption key={address.id} value={address.id}>
{address.label} · {address.address_line}
</IonSelectOption>
))}
</IonSelect>
</div>
)}
<div className="checkout-form-grid">
<div className="form-field">
<IonLabel position="stacked">Customer name</IonLabel>
<IonInput
value={form.customerName}
placeholder="Enter full name"
className="checkout-input"
onIonInput={(e) =>
handleFieldChange('customerName', e.detail.value ?? '')
}
/>
{formErrors.customerName && (
<IonText color="danger" className="field-error">
<p>{formErrors.customerName}</p>
</IonText>
)}
</div>
<div className="form-field">
<IonLabel position="stacked">Phone number</IonLabel>
<IonInput
value={form.customerPhone}
type="tel"
inputmode="tel"
placeholder="e.g. +263 77 123 4567"
className="checkout-input"
onIonInput={(e) =>
handleFieldChange('customerPhone', e.detail.value ?? '')
}
/>
{formErrors.customerPhone && (
<IonText color="danger" className="field-error">
<p>{formErrors.customerPhone}</p>
</IonText>
)}
</div>
<div className="form-field full-width">
<IonLabel position="stacked">Delivery address</IonLabel>
<IonTextarea
value={form.deliveryAddress}
autoGrow
rows={3}
placeholder="House number, street, suburb, city"
className="checkout-input checkout-textarea"
onIonInput={(e) =>
handleFieldChange('deliveryAddress', e.detail.value ?? '')
}
/>
{formErrors.deliveryAddress && (
<IonText color="danger" className="field-error">
<p>{formErrors.deliveryAddress}</p>
</IonText>
)}
</div>
<div className="form-field full-width">
<IonLabel position="stacked">Delivery notes</IonLabel>
<IonTextarea
value={form.deliveryNotes}
autoGrow
rows={3}
placeholder="Gate code, landmark, or helpful instructions"
className="checkout-input checkout-textarea"
onIonInput={(e) =>
handleFieldChange('deliveryNotes', e.detail.value ?? '')
}
/>
</div>
</div>
{user && (
<IonButton
fill="outline"
expand="block"
className="detail-secondary-button"
onClick={() => history.push('/addresses')}
>
Manage saved addresses
</IonButton>
)}
</div>
<div className="summary-card reference-order-total-card">
<div className="summary-row">
<IonText color="medium">Items</IonText>
<strong>{itemCount}</strong>
</div>
<div className="summary-row">
<IonText color="medium">Subtotal</IonText>
<strong>${subtotal.toFixed(2)}</strong>
</div>
<div className="summary-row">
<IonText color="medium">Delivery</IonText>
<strong>${deliveryFee.toFixed(2)}</strong>
</div>
<div className="summary-row total-row">
<span>Total</span>
<strong>${total.toFixed(2)}</strong>
</div>
<IonButton
expand="block"
className="reference-place-order-button"
onClick={placeOrder}
disabled={isSubmitting}
>
Place order
</IonButton>
</div>
</div>
)}
</IonContent>
</IonPage>
);
};
export default Cart;
+7 -826
View File
@@ -1,842 +1,23 @@
import React, { useEffect, useMemo, useState } from 'react';
import React from 'react';
import {
IonButton,
IonChip,
IonContent,
IonHeader,
IonIcon,
IonPage,
IonSearchbar,
IonText,
IonTitle,
IonToolbar,
IonToast,
useIonViewWillEnter,
} from '@ionic/react';
import {
bagHandleOutline,
cartOutline,
chevronForwardOutline,
homeOutline,
locationOutline,
micOutline,
personCircleOutline,
receiptOutline,
searchOutline,
storefrontOutline,
timeOutline,
} from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import ProductFilters, { SortOption } from '../components/ProductFilters';
import { useAuth } from '../context/AuthContext';
import { setStatusBarStyle, Style } from '../utils/statusBar';
import avocadoOilImage from '../assets/organic-avocado-oil.png';
import sourdoughBreadImage from '../assets/artisan-sourdough-bread.png';
import strawberriesPackImage from '../assets/fresh-strawberries-pack.png';
import farmEggsImage from '../assets/farm-eggs-carton.png';
import bananasImage from '../assets/bananas-bunch.png';
import wholeMilkImage from '../assets/whole-milk-carton.png';
import brownRiceImage from '../assets/brown-rice-bag.png';
import chickenBreastImage from '../assets/chicken-breast-pack.png';
import orangeJuiceImage from '../assets/orange-juice-bottle.png';
import rolledOatsImage from '../assets/rolled-oats-pack.png';
import greekYogurtImage from '../assets/greek-yogurt-cup.png';
import peanutButterImage from '../assets/peanut-butter-jar.png';
import spaghettiImage from '../assets/pasta-spaghetti-pack.png';
import tomatoSauceImage from '../assets/tomato-sauce-jar.png';
import cheddarCheeseImage from '../assets/cheddar-cheese-block.png';
import lettuceImage from '../assets/lettuce-head.png';
import carrotsImage from '../assets/carrots-bag.png';
import potatoesImage from '../assets/potatoes-bag.png';
import onionsImage from '../assets/onions-net-bag.png';
import salmonImage from '../assets/salmon-fillet-pack.png';
import sparklingWaterImage from '../assets/sparkling-water-pack.png';
import coffeeBeansImage from '../assets/coffee-beans-bag.png';
import greenTeaImage from '../assets/green-tea-box.png';
import oliveOilImage from '../assets/olive-oil-bottle.png';
export type Product = {
id: string;
name: string;
category: string;
description: string;
price: number;
rating: number;
prepTime: string;
image: string;
imageAlt: string;
};
export type CartItem = {
id: string;
name: string;
price: number;
quantity: number;
};
export const CART_STORAGE_KEY = 'simple-shop-cart';
export const LAST_ORDER_STORAGE_KEY = 'simple-shop-last-order';
export const products: Product[] = [
{
id: '1',
name: 'Organic Avocado Oil',
category: 'Pantry',
description:
'Cold-pressed avocado oil for cooking, roasting, and healthy everyday meals.',
price: 8.99,
rating: 4.8,
prepTime: '60 MIN',
image: avocadoOilImage,
imageAlt: 'Bottle of organic avocado oil with fresh avocados',
},
{
id: '2',
name: 'Artisan Sourdough Bread',
category: 'Bakery',
description:
'Freshly baked sourdough loaf with a crisp crust and soft, airy center.',
price: 7.49,
rating: 4.6,
prepTime: '45 MIN',
image: sourdoughBreadImage,
imageAlt: 'Fresh artisan sourdough bread loaf on a wooden board',
},
{
id: '3',
name: 'Fresh Strawberries Pack',
category: 'Fruit',
description:
'Sweet, bright strawberries packed fresh for snacks, desserts, and smoothies.',
price: 9.25,
rating: 4.9,
prepTime: '35 MIN',
image: strawberriesPackImage,
imageAlt: 'Pack of fresh strawberries with berries beside it',
},
{
id: '4',
name: 'Free Range Farm Eggs',
category: 'Dairy & Eggs',
description:
'Farm-fresh eggs with rich yolks, ideal for breakfast, baking, and meal prep.',
price: 4.5,
rating: 4.7,
prepTime: '55 MIN',
image: farmEggsImage,
imageAlt: 'Carton of free range farm eggs on a clean background',
},
{
id: '5',
name: 'Bananas Bunch',
category: 'Fruit',
description:
'Naturally sweet ripe bananas for breakfast bowls, snacks, and smoothies.',
price: 3.2,
rating: 4.7,
prepTime: '40 MIN',
image: bananasImage,
imageAlt: 'Fresh bunch of ripe yellow bananas',
},
{
id: '6',
name: 'Whole Milk Carton',
category: 'Dairy & Eggs',
description:
'Creamy whole milk for cereal, coffee, cooking, and family breakfasts.',
price: 3.99,
rating: 4.5,
prepTime: '30 MIN',
image: wholeMilkImage,
imageAlt: 'Carton of whole milk standing upright',
},
{
id: '7',
name: 'Brown Rice Bag',
category: 'Pantry',
description:
'Nutty wholegrain brown rice for bowls, sides, and meal prep dinners.',
price: 5.75,
rating: 4.6,
prepTime: '50 MIN',
image: brownRiceImage,
imageAlt: 'Sealed bag of brown rice on a white background',
},
{
id: '8',
name: 'Chicken Breast Pack',
category: 'Meat & Seafood',
description:
'Lean chicken breast fillets for grilling, roasting, and protein-packed meals.',
price: 11.9,
rating: 4.8,
prepTime: '70 MIN',
image: chickenBreastImage,
imageAlt: 'Pack of fresh chicken breast fillets',
},
{
id: '9',
name: 'Orange Juice Bottle',
category: 'Beverages',
description:
'Bright citrus orange juice for a refreshing breakfast or midday boost.',
price: 4.8,
rating: 4.6,
prepTime: '25 MIN',
image: orangeJuiceImage,
imageAlt: 'Bottle of orange juice on a clean background',
},
{
id: '10',
name: 'Rolled Oats Pack',
category: 'Breakfast',
description:
'Hearty rolled oats for porridge, overnight oats, and healthy baking.',
price: 4.25,
rating: 4.7,
prepTime: '35 MIN',
image: rolledOatsImage,
imageAlt: 'Pack of rolled oats on a white background',
},
{
id: '11',
name: 'Greek Yogurt Cup',
category: 'Dairy & Eggs',
description:
'Thick plain Greek yogurt with a rich texture for breakfast and snacks.',
price: 2.65,
rating: 4.5,
prepTime: '20 MIN',
image: greekYogurtImage,
imageAlt: 'Single cup of plain Greek yogurt',
},
{
id: '12',
name: 'Peanut Butter Jar',
category: 'Pantry',
description:
'Smooth peanut butter for toast, sandwiches, smoothies, and baking.',
price: 5.2,
rating: 4.8,
prepTime: '45 MIN',
image: peanutButterImage,
imageAlt: 'Jar of peanut butter on a white background',
},
{
id: '13',
name: 'Spaghetti Pasta Pack',
category: 'Pantry',
description:
'Classic spaghetti pasta for quick weeknight dinners and family meals.',
price: 3.45,
rating: 4.6,
prepTime: '50 MIN',
image: spaghettiImage,
imageAlt: 'Pack of spaghetti pasta on a clean background',
},
{
id: '14',
name: 'Tomato Sauce Jar',
category: 'Pantry',
description:
'Rich tomato sauce for pasta, pizza bases, and simmered home cooking.',
price: 3.95,
rating: 4.7,
prepTime: '55 MIN',
image: tomatoSauceImage,
imageAlt: 'Glass jar of tomato sauce',
},
{
id: '15',
name: 'Cheddar Cheese Block',
category: 'Dairy & Eggs',
description:
'Sharp cheddar cheese block for sandwiches, snacks, sauces, and grating.',
price: 6.15,
rating: 4.7,
prepTime: '35 MIN',
image: cheddarCheeseImage,
imageAlt: 'Block of cheddar cheese on a white background',
},
{
id: '16',
name: 'Fresh Lettuce Head',
category: 'Vegetables',
description:
'Crisp green lettuce for salads, wraps, burgers, and light lunches.',
price: 2.8,
rating: 4.4,
prepTime: '30 MIN',
image: lettuceImage,
imageAlt: 'Fresh green head of lettuce',
},
{
id: '17',
name: 'Carrots Bag',
category: 'Vegetables',
description:
'Sweet crunchy carrots for roasting, soups, stir-fries, and lunch boxes.',
price: 3.1,
rating: 4.5,
prepTime: '45 MIN',
image: carrotsImage,
imageAlt: 'Bag of fresh carrots on a clean background',
},
{
id: '18',
name: 'Potatoes Bag',
category: 'Vegetables',
description:
'Versatile potatoes for frying, mashing, baking, and hearty dinners.',
price: 4.75,
rating: 4.6,
prepTime: '55 MIN',
image: potatoesImage,
imageAlt: 'Mesh bag of potatoes',
},
{
id: '19',
name: 'Onions Net Bag',
category: 'Vegetables',
description:
'Flavorful onions for stews, sauces, sautés, and everyday cooking.',
price: 3.35,
rating: 4.4,
prepTime: '50 MIN',
image: onionsImage,
imageAlt: 'Net bag of onions on a white background',
},
{
id: '20',
name: 'Salmon Fillet Pack',
category: 'Meat & Seafood',
description:
'Fresh salmon fillet packed for quick oven dinners and healthy lunches.',
price: 13.99,
rating: 4.8,
prepTime: '70 MIN',
image: salmonImage,
imageAlt: 'Packaged salmon fillet on a clean background',
},
{
id: '21',
name: 'Sparkling Water Pack',
category: 'Beverages',
description:
'Refreshing sparkling water multipack for hydration and light entertaining.',
price: 6.8,
rating: 4.5,
prepTime: '25 MIN',
image: sparklingWaterImage,
imageAlt: 'Multipack of sparkling water cans',
},
{
id: '22',
name: 'Coffee Beans Bag',
category: 'Beverages',
description:
'Roasted coffee beans with a rich aroma for espresso and filter brews.',
price: 9.6,
rating: 4.8,
prepTime: '40 MIN',
image: coffeeBeansImage,
imageAlt: 'Bag of roasted coffee beans on a white background',
},
{
id: '23',
name: 'Green Tea Box',
category: 'Beverages',
description:
'Soothing green tea for a light daily ritual and calming warm drink.',
price: 4.4,
rating: 4.5,
prepTime: '30 MIN',
image: greenTeaImage,
imageAlt: 'Box of green tea on a clean background',
},
{
id: '24',
name: 'Extra Virgin Olive Oil',
category: 'Pantry',
description:
'Fragrant olive oil for salads, drizzling, roasting, and Mediterranean meals.',
price: 10.5,
rating: 4.9,
prepTime: '60 MIN',
image: oliveOilImage,
imageAlt: 'Bottle of extra virgin olive oil on a white background',
},
];
export const readCart = (): CartItem[] => {
if (typeof window === 'undefined') return [];
try {
const savedCart = window.localStorage.getItem(CART_STORAGE_KEY);
if (!savedCart) return [];
const parsed = JSON.parse(savedCart) as CartItem[];
return Array.isArray(parsed) ? parsed : [];
} catch {
return [];
}
};
export const writeCart = (cart: CartItem[]) => {
if (typeof window === 'undefined') return;
window.localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cart));
window.dispatchEvent(new CustomEvent('cart:updated'));
};
const featuredSectionIds = ['12', '11', '23', '1', '24'];
const homeLifestyleSectionIds = ['6', '9', '21', '22', '10'];
const STORE_OPEN_HOUR = 8;
const STORE_CLOSE_HOUR = 20;
const formatPlacedTime = (date: Date) =>
date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
hour12: false,
});
const formatHourSlot = (hour24: number) => {
const normalized = ((hour24 % 24) + 24) % 24;
const hour12 = normalized % 12 === 0 ? 12 : normalized % 12;
const suffix = normalized >= 12 ? 'PM' : 'AM';
return `${hour12} ${suffix}`;
};
const formatDeliveryWindow = (startHour24: number, endHour24: number) =>
`${formatHourSlot(startHour24)}-${formatHourSlot(endHour24)}`;
const getDeliveryTiming = (now: Date) => {
const currentHour = now.getHours();
let slotStart = STORE_OPEN_HOUR;
let slotEnd = STORE_OPEN_HOUR + 1;
if (currentHour < STORE_OPEN_HOUR) {
slotStart = STORE_OPEN_HOUR;
slotEnd = STORE_OPEN_HOUR + 1;
} else if (currentHour >= STORE_CLOSE_HOUR - 1) {
slotStart = STORE_OPEN_HOUR;
slotEnd = STORE_OPEN_HOUR + 1;
} else {
slotStart = currentHour + 1;
slotEnd = Math.min(slotStart + 1, STORE_CLOSE_HOUR);
}
const etaHour = slotStart;
const etaMinute = now.getMinutes() < 30 ? 15 : 45;
const etaDate = new Date(now);
etaDate.setHours(etaHour, etaMinute, 0, 0);
if (currentHour >= STORE_CLOSE_HOUR - 1) {
etaDate.setDate(etaDate.getDate() + 1);
}
return {
placedLabel: formatPlacedTime(now),
windowLabel: formatDeliveryWindow(slotStart, slotEnd),
etaLabel: etaDate.toLocaleTimeString([], {
hour: 'numeric',
minute: '2-digit',
hour12: true,
}),
};
};
const ProductShelf: React.FC<{
title: string;
products: Product[];
onOpenProduct: (id: string) => void;
onQuickAdd?: (product: Product) => void;
}> = ({ title, products: shelfProducts, onOpenProduct, onQuickAdd }) => (
<section className="shelf-section">
<div className="shelf-section-header">
<h2>{title}</h2>
<IonButton fill="clear" className="view-all-button">
View All
</IonButton>
</div>
<div className="shelf-scroll">
{shelfProducts.map((product) => (
<button
key={product.id}
type="button"
className="shelf-product-card"
onClick={() => onOpenProduct(product.id)}
>
<div className="shelf-image-wrap">
<img
src={product.image}
alt={product.imageAlt}
className="shelf-product-image"
/>
<button
type="button"
className="shelf-add-badge"
onClick={(event) => {
event.stopPropagation();
onQuickAdd?.(product);
}}
aria-label={`Add ${product.name} to cart`}
>
+
</button>
</div>
<div className="shelf-card-copy">
<span className="browse-product-category">{product.category}</span>
<h3 className="shelf-product-title">{product.name}</h3>
<div className="shelf-price-block">
<span className="shelf-price">${product.price.toFixed(2)}</span>
</div>
<p className="shelf-product-description">{product.description}</p>
<div className="shelf-meta-pill">
<IonIcon icon={timeOutline} />
<span>{product.prepTime}</span>
</div>
</div>
</button>
))}
</div>
</section>
);
const Home: React.FC = () => {
const history = useHistory();
const { user } = useAuth();
const [query, setQuery] = useState('');
const [now, setNow] = useState(() => new Date());
const [cartCount, setCartCount] = useState(0);
const [selectedCategory, setSelectedCategory] = useState('All');
const [sortOption, setSortOption] = useState<SortOption>('popular');
const [isFilterOpen, setIsFilterOpen] = useState(false);
const [toastMessage, setToastMessage] = useState('');
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Dark);
const count = readCart().reduce((sum, item) => sum + item.quantity, 0);
setCartCount(count);
});
useEffect(() => {
const syncCount = () =>
setCartCount(readCart().reduce((sum, item) => sum + item.quantity, 0));
syncCount();
window.addEventListener('storage', syncCount);
window.addEventListener('cart:updated', syncCount as EventListener);
return () => {
window.removeEventListener('storage', syncCount);
window.removeEventListener('cart:updated', syncCount as EventListener);
};
}, []);
useEffect(() => {
const interval = window.setInterval(() => {
setNow(new Date());
}, 60000);
return () => window.clearInterval(interval);
}, []);
const categories = useMemo(
() => Array.from(new Set(products.map((product) => product.category))),
[]
);
const filteredProducts = useMemo(() => {
const term = query.toLowerCase().trim();
const nextProducts = products.filter((product) => {
const matchesCategory =
selectedCategory === 'All' || product.category === selectedCategory;
const matchesQuery =
!term ||
[product.name, product.category, product.description]
.join(' ')
.toLowerCase()
.includes(term);
return matchesCategory && matchesQuery;
});
const sorted = [...nextProducts];
if (sortOption === 'price-asc') sorted.sort((a, b) => a.price - b.price);
if (sortOption === 'price-desc') sorted.sort((a, b) => b.price - a.price);
if (sortOption === 'name-asc') {
sorted.sort((a, b) => a.name.localeCompare(b.name));
}
if (sortOption === 'popular') sorted.sort((a, b) => b.rating - a.rating);
return sorted;
}, [query, selectedCategory, sortOption]);
const featuredProducts = useMemo(
() => products.filter((product) => featuredSectionIds.includes(product.id)),
[]
);
const lifestyleProducts = useMemo(
() =>
products.filter((product) =>
homeLifestyleSectionIds.includes(product.id)
),
[]
);
const addressLabel = '22 Acacia St';
const { placedLabel, windowLabel, etaLabel } = getDeliveryTiming(now);
const handleQuickAdd = (product: Product) => {
const cart = readCart();
const existingItem = cart.find((item) => item.id === product.id);
const nextCart = existingItem
? cart.map((item) =>
item.id === product.id
? { ...item, quantity: item.quantity + 1 }
: item
)
: [
...cart,
{
id: product.id,
name: product.name,
price: product.price,
quantity: 1,
},
];
writeCart(nextCart);
setCartCount(nextCart.reduce((sum, item) => sum + item.quantity, 0));
setToastMessage(`${product.name} added to basket`);
};
return (
const Home: React.FC = () => (
<IonPage>
<IonHeader className="home-premium-header ion-no-border">
<IonHeader>
<IonToolbar>
<div className="home-premium-toolbar">
<div className="home-premium-location-block">
<span>Deliver to</span>
<button type="button" className="home-premium-location-button">
<IonIcon icon={locationOutline} />
<strong>{addressLabel}</strong>
<IonIcon icon={chevronForwardOutline} />
</button>
</div>
<div className="home-premium-header-actions">
<div className="home-open-pill">Open</div>
<button
type="button"
className="home-premium-cart-button"
onClick={() => history.push('/cart')}
aria-label="Open basket"
>
<IonIcon icon={cartOutline} />
<span>{cartCount}</span>
</button>
</div>
</div>
<IonTitle>Home</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent
fullscreen
className="hybrid-home-content premium-home-content"
>
<div className="home-premium-hero">
<div className="home-premium-hero-copy">
<span>Fresh groceries, fast</span>
<h1>Shop today's picks</h1>
<p>Curated essentials delivered in your next available slot.</p>
</div>
<div className="home-premium-chip-grid">
<div className="home-premium-chip">
<IonIcon icon={timeOutline} />
<div>
<span>Placed</span>
<strong>{placedLabel}</strong>
</div>
</div>
<div className="home-premium-chip">
<IonIcon icon={bagHandleOutline} />
<div>
<span>Delivery</span>
<strong>{windowLabel}</strong>
</div>
</div>
</div>
<div className="home-premium-search-card">
<IonSearchbar
value={query}
onIonInput={(event) => setQuery(event.detail.value ?? '')}
placeholder="Search products and brands"
searchIcon={searchOutline}
/>
<div className="home-premium-search-actions">
<IonIcon icon={storefrontOutline} />
<IonIcon icon={micOutline} />
</div>
</div>
<button
type="button"
className="home-premium-tracking-card"
onClick={() => history.push('/orders')}
>
<div className="home-premium-tracking-icon">
<IonIcon icon={bagHandleOutline} />
</div>
<div className="home-premium-tracking-copy">
<span>Order tracking</span>
<strong>Order placed</strong>
<p>ETA {etaLabel}</p>
</div>
<IonIcon icon={chevronForwardOutline} />
</button>
</div>
<div className="home-shelves-area hybrid-shelves-area premium-shelves-area">
<ProductShelf
title="GROCERIES PAYDAY DEALS"
products={featuredProducts}
onOpenProduct={(id) => history.push(`/product/${id}`)}
onQuickAdd={handleQuickAdd}
/>
<ProductShelf
title="HOME & LIFESTYLE PAYDAY DEALS"
products={lifestyleProducts}
onOpenProduct={(id) => history.push(`/product/${id}`)}
onQuickAdd={handleQuickAdd}
/>
<div className="browse-section">
<div className="section-heading reference-section-heading">
<div>
<h2>Browse everything</h2>
<IonText color="medium">
<p>{filteredProducts.length} products available</p>
</IonText>
</div>
</div>
<ProductFilters
categories={categories}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
sortOption={sortOption}
setSortOption={setSortOption}
isOpen={isFilterOpen}
onClose={() => setIsFilterOpen((value) => !value)}
/>
{filteredProducts.length === 0 ? (
<div className="empty-state reference-empty-state">
<IonIcon icon={bagHandleOutline} />
<h3>No products found</h3>
<p>Try a different search term or category.</p>
<IonButton
onClick={() => {
setQuery('');
setSelectedCategory('All');
}}
>
Clear filters
</IonButton>
</div>
) : (
<div className="browse-product-grid">
{filteredProducts.map((product) => (
<button
key={product.id}
type="button"
className="browse-product-card"
onClick={() => history.push(`/product/${product.id}`)}
>
<div className="browse-product-image-wrap">
<img src={product.image} alt={product.imageAlt} />
<button
type="button"
className="browse-add-badge"
onClick={(event) => {
event.stopPropagation();
handleQuickAdd(product);
}}
aria-label={`Add ${product.name} to cart`}
>
+
</button>
</div>
<div className="browse-product-copy">
<span className="browse-product-category">
{product.category}
</span>
<h3>{product.name}</h3>
<div className="browse-price-row">
<strong>${product.price.toFixed(2)}</strong>
<div className="browse-meta-pill">
<IonIcon icon={timeOutline} />
<span>{product.prepTime}</span>
</div>
</div>
<p>{product.description}</p>
</div>
</button>
))}
</div>
)}
</div>
</div>
<div className="bottom-nav-spacer" />
<IonToast
isOpen={Boolean(toastMessage)}
message={toastMessage}
duration={1800}
position="bottom"
onDidDismiss={() => setToastMessage('')}
/>
<div className="reference-bottom-nav">
<button type="button" className="bottom-nav-item active">
<IonIcon icon={homeOutline} />
<span>Home</span>
</button>
<button
type="button"
className="bottom-nav-item"
onClick={() => setIsFilterOpen(true)}
>
<IonIcon icon={searchOutline} />
<span>Discover</span>
</button>
<button
type="button"
className="bottom-nav-item"
onClick={() => history.push('/orders')}
>
<IonIcon icon={storefrontOutline} />
<span>My Shop</span>
</button>
<button
type="button"
className="bottom-nav-item"
onClick={() => history.push(user ? '/profile' : '/auth')}
>
<IonIcon icon={personCircleOutline} />
<span>My Profile</span>
</button>
<button
type="button"
className="bottom-nav-item"
onClick={() => history.push('/cart')}
>
<IonIcon icon={cartOutline} />
<span>Basket</span>
</button>
</div>
<IonContent className="ion-padding">
<p>Welcome! Start building your app here.</p>
</IonContent>
</IonPage>
);
};
);
export default Home;
-197
View File
@@ -1,197 +0,0 @@
import React, { useEffect, useState } from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonList,
IonPage,
IonRefresher,
IonRefresherContent,
IonText,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import {
chevronBackOutline,
chevronForwardOutline,
receiptOutline,
} from 'ionicons/icons';
import { RefresherEventDetail } from '@ionic/core';
import { useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import type { Tables } from '../database.types';
import { useAuth } from '../context/AuthContext';
import { setStatusBarStyle, Style } from '../utils/statusBar';
type Order = Tables<'orders'>;
const statusCopy: Record<string, string> = {
confirmed: 'Confirmed',
packed: 'Packed',
out_for_delivery: 'Out for delivery',
delivered: 'Delivered',
};
const MyOrders: React.FC = () => {
const history = useHistory();
const { user } = useAuth();
const [orders, setOrders] = useState<Order[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [errorMessage, setErrorMessage] = useState('');
useIonViewWillEnter(() => {
void setStatusBarStyle(Style.Dark);
});
const loadOrders = async () => {
if (!user) {
setOrders([]);
setErrorMessage('');
setIsLoading(false);
return;
}
try {
setErrorMessage('');
const { data, error } = await supabase
.from('orders')
.select('*')
.eq('user_id', user.id)
.order('created_at', { ascending: false });
if (error) {
throw error;
}
setOrders(data ?? []);
} catch (error) {
console.error('Failed to load orders', error);
setOrders([]);
setErrorMessage('We could not load your orders right now.');
window.setTimeout(() => setErrorMessage(''), 4000);
} finally {
setIsLoading(false);
}
};
useEffect(() => {
if (!user) {
setOrders([]);
setErrorMessage('');
setIsLoading(false);
return;
}
setIsLoading(true);
void loadOrders();
}, [user?.id]);
const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
await loadOrders();
event.detail.complete();
};
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner wallet-toolbar-inner-single-action">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to home"
onClick={() => history.replace('/home')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Tracking</span>
<strong>My Orders</strong>
</div>
<span className="wallet-toolbar-placeholder" />
</div>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
<IonRefresherContent />
</IonRefresher>
{errorMessage && (
<IonText color="danger">
<p>{errorMessage}</p>
</IonText>
)}
{!user ? (
<div className="empty-state cart-empty">
<IonIcon icon={receiptOutline} />
<h3>No tracked orders yet</h3>
<p className="muted-text">
Sign in later to sync orders, or place an order now and track it
from the confirmation screen.
</p>
<IonButton onClick={() => history.push('/home')}>
Continue shopping
</IonButton>
</div>
) : isLoading ? (
<div className="empty-state cart-empty">
<IonIcon icon={receiptOutline} />
<h3>Loading your orders</h3>
<p className="muted-text">
We are fetching your latest order updates.
</p>
</div>
) : orders.length === 0 ? (
<div className="empty-state cart-empty">
<IonIcon icon={receiptOutline} />
<h3>No orders yet</h3>
<p className="muted-text">
Your placed orders will appear here so you can track their status.
</p>
<IonButton onClick={() => history.push('/home')}>
Start shopping
</IonButton>
</div>
) : (
<IonList lines="none" className="orders-list">
{orders.map((order) => (
<button
key={order.id}
type="button"
className="order-card"
onClick={() => history.push(`/orders/${order.id}`)}
>
<div className="order-card-top">
<div>
<span className="order-label">Order</span>
<h3>{order.order_number}</h3>
</div>
<IonIcon icon={chevronForwardOutline} />
</div>
<div className="order-card-row">
<span>Status</span>
<strong>{statusCopy[order.status] ?? order.status}</strong>
</div>
<div className="order-card-row">
<span>Items</span>
<strong>{order.item_count}</strong>
</div>
<div className="order-card-row">
<span>Total</span>
<strong>${Number(order.total).toFixed(2)}</strong>
</div>
<div className="order-card-date">
{new Date(order.created_at).toLocaleString()}
</div>
</button>
))}
</IonList>
)}
</IonContent>
</IonPage>
);
};
export default MyOrders;
-163
View File
@@ -1,163 +0,0 @@
import React, { useEffect, useState } from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonPage,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import { checkmarkCircle, chevronBackOutline } from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { LAST_ORDER_STORAGE_KEY } from './Home';
import {
setStatusBarBackground,
setStatusBarStyle,
Style,
} from '../utils/statusBar';
type OrderInfo = {
id: string;
orderNumber: string;
total: number;
itemCount: number;
status: string;
customerName: string;
customerPhone: string;
deliveryAddress: string;
deliveryNotes: string;
};
const OrderConfirmation: React.FC = () => {
const history = useHistory();
const [order, setOrder] = useState<OrderInfo | null>(null);
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Dark);
setStatusBarBackground('#ffffff');
});
useEffect(() => {
try {
const savedOrder = localStorage.getItem(LAST_ORDER_STORAGE_KEY);
if (!savedOrder) {
setOrder(null);
return;
}
setOrder(JSON.parse(savedOrder) as OrderInfo);
} catch {
setOrder(null);
}
}, []);
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner wallet-toolbar-inner-single-action">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to home"
onClick={() => history.replace('/home')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Success</span>
<strong>Order placed</strong>
</div>
<span className="wallet-toolbar-placeholder" />
</div>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<div className="confirmation-card">
<IonIcon icon={checkmarkCircle} color="success" />
<h1>Thanks for your order!</h1>
<p className="muted-text">
Your order has been placed successfully and is now being prepared.
</p>
{order ? (
<>
<div className="confirmation-details">
<div>
<span>Order number</span>
<strong>{order.orderNumber}</strong>
</div>
<div>
<span>Status</span>
<strong>{order.status.replaceAll('_', ' ')}</strong>
</div>
<div>
<span>Items</span>
<strong>{order.itemCount}</strong>
</div>
<div>
<span>Total paid</span>
<strong>${order.total.toFixed(2)}</strong>
</div>
</div>
<div className="delivery-details-card">
<h2>Delivery information</h2>
<div className="delivery-detail-row">
<span>Customer</span>
<strong>{order.customerName}</strong>
</div>
<div className="delivery-detail-row">
<span>Phone</span>
<strong>{order.customerPhone}</strong>
</div>
<div className="delivery-detail-row delivery-detail-block">
<span>Address</span>
<strong>{order.deliveryAddress}</strong>
</div>
{order.deliveryNotes && (
<div className="delivery-detail-row delivery-detail-block">
<span>Notes</span>
<strong>{order.deliveryNotes}</strong>
</div>
)}
</div>
</>
) : (
<p className="muted-text">
We could not load the order summary, but your next browse session
is ready.
</p>
)}
{order && (
<IonButton
expand="block"
onClick={() => history.replace(`/orders/${order.id}`)}
>
Track this order
</IonButton>
)}
<IonButton
fill="outline"
expand="block"
onClick={() => history.replace('/orders')}
>
View all orders
</IonButton>
<IonButton
fill="clear"
expand="block"
onClick={() => history.replace('/home')}
>
Continue shopping
</IonButton>
</div>
</IonContent>
</IonPage>
);
};
export default OrderConfirmation;
-246
View File
@@ -1,246 +0,0 @@
import React, { useEffect, useMemo, useState } from 'react';
import {
IonButton,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonLoading,
IonPage,
IonRefresher,
IonRefresherContent,
IonText,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import { RefresherEventDetail } from '@ionic/core';
import { chevronBackOutline } from 'ionicons/icons';
import { RouteComponentProps, useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import type { Tables } from '../database.types';
import { useAuth } from '../context/AuthContext';
import { setStatusBarStyle, Style } from '../utils/statusBar';
type Props = RouteComponentProps<{ id: string }>;
type Order = Tables<'orders'>;
type OrderItem = Tables<'order_items'>;
const statusSteps = [
'confirmed',
'packed',
'out_for_delivery',
'delivered',
] as const;
const statusTitles: Record<(typeof statusSteps)[number], string> = {
confirmed: 'Confirmed',
packed: 'Packed',
out_for_delivery: 'Out for delivery',
delivered: 'Delivered',
};
const OrderDetail: React.FC<Props> = ({ match }) => {
const history = useHistory();
const { user } = useAuth();
const [order, setOrder] = useState<Order | null>(null);
const [items, setItems] = useState<OrderItem[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [errorMessage, setErrorMessage] = useState('');
useIonViewWillEnter(() => {
void setStatusBarStyle(Style.Dark);
});
const loadOrder = async () => {
if (!user) {
setIsLoading(false);
return;
}
setIsLoading(true);
const [
{ data: orderData, error: orderError },
{ data: itemData, error: itemError },
] = await Promise.all([
supabase
.from('orders')
.select('*')
.eq('id', match.params.id)
.eq('user_id', user.id)
.single(),
supabase
.from('order_items')
.select('*')
.eq('order_id', match.params.id)
.order('created_at', { ascending: true }),
]);
if (orderError || itemError || !orderData) {
setErrorMessage('We could not load this order.');
window.setTimeout(() => setErrorMessage(''), 4000);
setOrder(null);
setItems([]);
setIsLoading(false);
return;
}
setOrder(orderData);
setItems(itemData ?? []);
setIsLoading(false);
};
useEffect(() => {
void loadOrder();
}, [match.params.id, user?.id]);
const activeStepIndex = useMemo(
() =>
order
? Math.max(
statusSteps.indexOf(order.status as (typeof statusSteps)[number]),
0
)
: 0,
[order]
);
const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
await loadOrder();
event.detail.complete();
};
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner wallet-toolbar-inner-single-action">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to orders"
onClick={() => history.replace('/orders')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Tracking</span>
<strong>Order details</strong>
</div>
<span className="wallet-toolbar-placeholder" />
</div>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
<IonRefresherContent />
</IonRefresher>
<IonLoading isOpen={isLoading} message="Loading order details..." />
{errorMessage && (
<IonText color="danger">
<p>{errorMessage}</p>
</IonText>
)}
{!user ? (
<div className="empty-state cart-empty">
<h3>Sign in to view order details</h3>
<IonButton onClick={() => history.replace('/auth')}>
Sign in
</IonButton>
</div>
) : !isLoading && !order ? (
<div className="empty-state cart-empty">
<h3>Order not found</h3>
<p className="muted-text">
We could not find that order. Try returning to your order list.
</p>
<IonButton onClick={() => history.replace('/orders')}>
Back to orders
</IonButton>
</div>
) : (
order && (
<>
<div className="tracking-summary-card">
<span className="order-label">Order number</span>
<h1>{order.order_number}</h1>
<p className="muted-text">
Placed on {new Date(order.created_at).toLocaleString()}
</p>
<div className="order-card-row">
<span>Current status</span>
<strong>
{statusTitles[
order.status as (typeof statusSteps)[number]
] ?? order.status}
</strong>
</div>
<div className="order-card-row">
<span>Total</span>
<strong>${Number(order.total).toFixed(2)}</strong>
</div>
</div>
<div className="timeline-card">
<h2>Delivery progress</h2>
<div className="tracking-timeline">
{statusSteps.map((step, index) => (
<div
key={step}
className={`timeline-step ${index <= activeStepIndex ? 'active' : ''}`}
>
<div className="timeline-dot" />
<div>
<strong>{statusTitles[step]}</strong>
<p className="muted-text">
{index < activeStepIndex
? 'Completed'
: index === activeStepIndex
? 'Current step'
: 'Up next'}
</p>
</div>
</div>
))}
</div>
</div>
<div className="timeline-card delivery-details-card">
<h2>Delivery details</h2>
<div className="delivery-detail-row">
<span>Customer</span>
<strong>{order.customer_name || '—'}</strong>
</div>
<div className="delivery-detail-row">
<span>Phone</span>
<strong>{order.customer_phone || '—'}</strong>
</div>
<div className="delivery-detail-row delivery-detail-block">
<span>Address</span>
<strong>{order.delivery_address || '—'}</strong>
</div>
{order.delivery_notes && (
<div className="delivery-detail-row delivery-detail-block">
<span>Notes</span>
<strong>{order.delivery_notes}</strong>
</div>
)}
</div>
<div className="timeline-card">
<h2>Items in this order</h2>
<IonList lines="none" className="cart-list">
{items.map((item) => (
<IonItem key={item.id} className="cart-item">
<IonLabel>
<h2>{item.product_name}</h2>
<p>${Number(item.unit_price).toFixed(2)} each</p>
<strong>
Qty {item.quantity} · $
{(Number(item.unit_price) * item.quantity).toFixed(2)}
</strong>
</IonLabel>
</IonItem>
))}
</IonList>
</div>
</>
)
)}
</IonContent>
</IonPage>
);
};
export default OrderDetail;
-352
View File
@@ -1,352 +0,0 @@
import React, { useEffect, useState } from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonLoading,
IonPage,
IonText,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import {
addOutline,
cardOutline,
checkmarkCircleOutline,
chevronBackOutline,
trashOutline,
} from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import { useAuth } from '../context/AuthContext';
import type { Tables } from '../database.types';
import { setStatusBarStyle, Style } from '../utils/statusBar';
type PaymentMethodRow = Tables<'payment_methods'>;
type DisplayPaymentMethod = Pick<
PaymentMethodRow,
| 'id'
| 'brand'
| 'last4'
| 'expiry_month'
| 'expiry_year'
| 'is_default'
| 'cardholder_name'
>;
const formatExpiry = (month: number, year: number) =>
`${String(month).padStart(2, '0')}/${String(year).slice(-2)}`;
const PaymentMethods: React.FC = () => {
const history = useHistory();
const { user } = useAuth();
const [methods, setMethods] = useState<PaymentMethodRow[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [message, setMessage] = useState('');
const [error, setError] = useState('');
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Light);
});
const showMessage = (text: string) => {
setMessage(text);
window.setTimeout(() => setMessage(''), 4000);
};
const loadMethods = async () => {
if (!user) {
setMethods([]);
setIsLoading(false);
return;
}
setIsLoading(true);
setError('');
const { data, error: loadError } = await supabase
.from('payment_methods')
.select('*')
.eq('user_id', user.id)
.order('is_default', { ascending: false })
.order('created_at', { ascending: false });
if (loadError) {
setError('Unable to load your payment methods.');
}
setMethods(data ?? []);
setIsLoading(false);
};
useEffect(() => {
void loadMethods();
}, [user]);
const setDefaultMethod = async (methodId: string) => {
if (!user) return;
await supabase
.from('payment_methods')
.update({ is_default: false })
.eq('user_id', user.id);
const { error: updateError } = await supabase
.from('payment_methods')
.update({ is_default: true })
.eq('id', methodId)
.eq('user_id', user.id);
if (updateError) {
setError('Could not update your default payment method.');
return;
}
showMessage('Default payment method updated.');
void loadMethods();
};
const renderCardVisual = (method: DisplayPaymentMethod) => (
<div className="payment-method-visual-card">
<div className="wallet-card-top-row">
<div className="wallet-card-chip" />
<span className="wallet-card-brand">{method.brand.toUpperCase()}</span>
</div>
<div className="wallet-card-number"> {method.last4}</div>
<div className="wallet-card-meta-row">
<div>
<span>Cardholder</span>
<strong>{method.cardholder_name || 'Saved Card'}</strong>
</div>
<div className="wallet-card-meta-right">
<span>Valid Thru</span>
<strong>
{formatExpiry(method.expiry_month, method.expiry_year)}
</strong>
</div>
</div>
</div>
);
const removeMethod = async (method: PaymentMethodRow) => {
const { error: deleteError } = await supabase
.from('payment_methods')
.delete()
.eq('id', method.id)
.eq('user_id', method.user_id);
if (deleteError) {
setError('Could not remove that payment method.');
return;
}
if (method.is_default && user) {
const { data: remaining } = await supabase
.from('payment_methods')
.select('id')
.eq('user_id', user.id)
.order('created_at', { ascending: false })
.limit(1);
const nextId = remaining?.[0]?.id;
if (nextId) {
await supabase
.from('payment_methods')
.update({ is_default: true })
.eq('id', nextId)
.eq('user_id', user.id);
}
}
showMessage('Payment method removed.');
void loadMethods();
};
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to wallet"
onClick={() => history.replace('/wallet')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Wallet</span>
<strong>Payment methods</strong>
</div>
<IonButton
fill="clear"
className="wallet-header-add-button"
aria-label="Add payment method"
onClick={() => history.push('/wallet/payment-methods/add')}
>
<IonIcon icon={addOutline} slot="icon-only" />
</IonButton>
</div>
</IonToolbar>
</IonHeader>
<IonContent
fullscreen
className="wallet-page wallet-page-vibrant payment-methods-page ion-padding"
>
<IonLoading isOpen={isLoading} message="Loading payment methods..." />
{!user ? (
<>
<div className="payment-methods-hero-card">
<span>Cards & checkout</span>
<h1>Payment methods</h1>
<p>
Review saved cards, choose the checkout default, and keep wallet
payments ready for faster ordering.
</p>
</div>
<div className="payment-method-grid">
{[
{
id: 'demo-visa',
brand: 'visa',
last4: '4242',
expiry_month: 8,
expiry_year: 2028,
is_default: true,
cardholder_name: 'Demo User',
},
{
id: 'demo-mastercard',
brand: 'mastercard',
last4: '1881',
expiry_month: 11,
expiry_year: 2027,
is_default: false,
cardholder_name: 'Demo User',
},
].map((method) => (
<div
key={method.id}
className="payment-method-detail-card-modern"
>
{renderCardVisual(method)}
<div className="payment-method-card-footer">
<div>
{method.is_default ? (
<span className="payment-status-pill active">
<IonIcon icon={checkmarkCircleOutline} />
Checkout card
</span>
) : (
<span className="payment-status-pill">Backup card</span>
)}
</div>
<div className="payment-method-modern-actions">
{!method.is_default && (
<IonButton fill="outline" size="small" disabled>
Set default
</IonButton>
)}
<IonButton fill="clear" color="medium" disabled>
<IonIcon icon={trashOutline} slot="icon-only" />
</IonButton>
</div>
</div>
</div>
))}
</div>
</>
) : (
<>
<div className="payment-methods-hero-card">
<span>Cards & checkout</span>
<h1>Payment methods</h1>
<p>
Store masked card details so checkout is quicker next time. You
can choose one card as your checkout default.
</p>
</div>
{message && (
<IonText color="success">
<p className="wallet-inline-message">{message}</p>
</IonText>
)}
{error && (
<IonText color="danger">
<p className="wallet-inline-message">{error}</p>
</IonText>
)}
{methods.length === 0 ? (
<div className="wallet-surface-card wallet-empty-block">
<IonIcon icon={cardOutline} />
<div>
<h3>No payment methods yet</h3>
<p>Add your first card to make repeat ordering faster.</p>
</div>
<IonButton
expand="block"
onClick={() => history.push('/wallet/payment-methods/add')}
>
<IonIcon icon={addOutline} slot="start" />
Add your first card
</IonButton>
</div>
) : (
<div className="payment-method-grid">
{methods.map((method) => (
<div
key={method.id}
className="payment-method-detail-card-modern"
>
{renderCardVisual(method)}
<div className="payment-method-card-footer">
<div>
{method.is_default ? (
<span className="payment-status-pill active">
<IonIcon icon={checkmarkCircleOutline} />
Checkout card
</span>
) : (
<span className="payment-status-pill">
Backup card
</span>
)}
</div>
<div className="payment-method-modern-actions">
{!method.is_default && (
<IonButton
fill="outline"
size="small"
onClick={() => setDefaultMethod(method.id)}
>
Set default
</IonButton>
)}
<IonButton
fill="clear"
color="danger"
aria-label="Remove payment method"
onClick={() => removeMethod(method)}
>
<IonIcon icon={trashOutline} slot="icon-only" />
</IonButton>
</div>
</div>
</div>
))}
</div>
)}
</>
)}
</IonContent>
</IonPage>
);
};
export default PaymentMethods;
-205
View File
@@ -1,205 +0,0 @@
import React, { useEffect, useMemo, useState } from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonPage,
IonText,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import { cartOutline, chevronBackOutline } from 'ionicons/icons';
import { RouteComponentProps, useHistory } from 'react-router-dom';
import { CartItem, products, readCart, writeCart } from './Home';
import { setStatusBarStyle, Style } from '../utils/statusBar';
type Props = RouteComponentProps<{ id: string }>;
const ProductDetail: React.FC<Props> = ({ match }) => {
const history = useHistory();
const [quantity, setQuantity] = useState(1);
const [message, setMessage] = useState('');
const [cartCount, setCartCount] = useState(0);
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Light);
const count = readCart().reduce((sum, item) => sum + item.quantity, 0);
setCartCount(count);
});
useEffect(() => {
const syncCount = () => {
const count = readCart().reduce((sum, item) => sum + item.quantity, 0);
setCartCount(count);
};
syncCount();
window.addEventListener('storage', syncCount);
window.addEventListener('cart:updated', syncCount as EventListener);
return () => {
window.removeEventListener('storage', syncCount);
window.removeEventListener('cart:updated', syncCount as EventListener);
};
}, []);
const product = useMemo(
() => products.find((item) => item.id === match.params.id),
[match.params.id]
);
const showMessage = (text: string) => {
setMessage(text);
window.setTimeout(() => setMessage(''), 4000);
};
const addToCart = () => {
if (!product) return;
const cart: CartItem[] = readCart();
const existing = cart.find((item) => item.id === product.id);
const nextCart = existing
? cart.map((item) =>
item.id === product.id
? { ...item, quantity: item.quantity + quantity }
: item
)
: [
...cart,
{
id: product.id,
name: product.name,
price: product.price,
quantity,
},
];
writeCart(nextCart);
showMessage('Added to basket');
};
if (!product) {
return (
<IonPage>
<IonHeader className="hybrid-subpage-header ion-no-border">
<IonToolbar className="hybrid-subpage-toolbar">
<IonButtons slot="start">
<IonButton fill="clear" onClick={() => history.replace('/home')}>
<IonIcon icon={chevronBackOutline} />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding reference-surface">
<div className="empty-state reference-empty-state">
<h3>Product not found</h3>
<p className="muted-text">This product is no longer available.</p>
<IonButton onClick={() => history.replace('/home')}>
Browse products
</IonButton>
</div>
</IonContent>
</IonPage>
);
}
return (
<IonPage>
<IonContent
fullscreen
className="product-detail-page-surface premium-product-surface"
>
<div className="premium-product-shell">
<div className="premium-product-actions">
<button
type="button"
className="premium-back-circle"
aria-label="Back to products"
onClick={() => history.replace('/home')}
>
<IonIcon icon={chevronBackOutline} />
</button>
<button
type="button"
className="premium-cart-tile"
aria-label="Open basket"
onClick={() => history.push('/cart')}
>
<span className="premium-cart-tile-inner">
<IonIcon icon={cartOutline} />
</span>
{cartCount > 0 && (
<span className="premium-cart-count-bubble">{cartCount}</span>
)}
</button>
</div>
<section className="premium-product-intro">
<h1>{product.name}</h1>
<div className="premium-product-meta-row">
<span className="premium-product-badge">{product.category}</span>
<span>High quality</span>
<span>In stock</span>
</div>
</section>
<section className="premium-product-image-panel">
<img src={product.image} alt={product.imageAlt} />
</section>
<section className="premium-product-details-card">
<div className="premium-details-header">
<h2>Details</h2>
</div>
<p>{product.description}</p>
<div className="premium-buy-row">
<div className="premium-price-block">
<strong>${product.price.toFixed(2)}</strong>
<span>each</span>
</div>
<div className="premium-quantity-control" aria-label="Quantity">
<IonButton
fill="clear"
aria-label="Decrease quantity"
onClick={() => setQuantity((value) => Math.max(1, value - 1))}
>
<span aria-hidden="true"></span>
</IonButton>
<strong>{quantity}</strong>
<IonButton
fill="clear"
aria-label="Increase quantity"
onClick={() => setQuantity((value) => value + 1)}
>
<span aria-hidden="true">+</span>
</IonButton>
</div>
</div>
</section>
{message && (
<IonText color="success" className="premium-product-message">
<p>{message}</p>
</IonText>
)}
</div>
<div className="premium-product-cta">
<div>
<span>Total</span>
<strong>${(product.price * quantity).toFixed(2)}</strong>
</div>
<IonButton onClick={addToCart}>Add to basket</IonButton>
</div>
</IonContent>
</IonPage>
);
};
export default ProductDetail;
-147
View File
@@ -1,147 +0,0 @@
import React, { useEffect, useState } from 'react';
import {
IonButton,
IonContent,
IonHeader,
IonIcon,
IonInput,
IonItem,
IonLabel,
IonPage,
IonText,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import { chevronBackOutline } from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import { useAuth } from '../context/AuthContext';
import { setStatusBarStyle, Style } from '../utils/statusBar';
const Profile: React.FC = () => {
const history = useHistory();
const { user, profile, refreshProfile, signOut } = useAuth();
const [fullName, setFullName] = useState('');
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Dark);
});
useEffect(() => {
setFullName(profile?.full_name ?? '');
setPhone(profile?.phone ?? '');
}, [profile]);
const showMessage = (msg: string) => {
setMessage(msg);
window.setTimeout(() => setMessage(''), 4000);
};
const saveProfile = async () => {
if (!user) return;
const { error } = await supabase.from('profiles').upsert({
id: user.id,
full_name: fullName.trim() || null,
phone: phone.trim() || null,
updated_at: new Date().toISOString(),
});
if (!error) {
await refreshProfile();
showMessage('Profile saved.');
}
};
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner wallet-toolbar-inner-single-action">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to home"
onClick={() => history.replace('/home')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Account</span>
<strong>Profile</strong>
</div>
<span className="wallet-toolbar-placeholder" />
</div>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<div className="auth-card">
<h1>Your account</h1>
<p className="muted-text">Signed in as {user?.email}</p>
{message && (
<IonText color="success">
<p>{message}</p>
</IonText>
)}
<div className="auth-form">
<IonItem lines="none" className="auth-input-item">
<IonLabel position="stacked">Full name</IonLabel>
<IonInput
value={fullName}
onIonInput={(e) => setFullName(e.detail.value ?? '')}
/>
</IonItem>
<IonItem lines="none" className="auth-input-item">
<IonLabel position="stacked">Phone</IonLabel>
<IonInput
value={phone}
type="tel"
onIonInput={(e) => setPhone(e.detail.value ?? '')}
/>
</IonItem>
<IonButton expand="block" onClick={saveProfile}>
Save profile
</IonButton>
<IonButton
expand="block"
fill="outline"
onClick={() => history.push('/addresses')}
>
Saved addresses
</IonButton>
<IonButton
expand="block"
fill="outline"
onClick={() => history.push('/wallet')}
>
Wallet & payment methods
</IonButton>
{profile?.is_admin && (
<IonButton
expand="block"
fill="outline"
onClick={() => history.push('/admin/orders')}
>
Admin workflow
</IonButton>
)}
<IonButton
color="medium"
expand="block"
fill="clear"
onClick={async () => {
await signOut();
history.replace('/auth');
}}
>
Sign out
</IonButton>
</div>
</div>
</IonContent>
</IonPage>
);
};
export default Profile;
-458
View File
@@ -1,458 +0,0 @@
import React, { useEffect, useMemo, useState } from 'react';
import {
IonButton,
IonContent,
IonHeader,
IonIcon,
IonLoading,
IonPage,
IonText,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import {
addOutline,
arrowDownCircleOutline,
cardOutline,
chevronBackOutline,
chevronForwardOutline,
walletOutline,
} from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import { supabase } from '../supabase';
import { useAuth } from '../context/AuthContext';
import type { Tables } from '../database.types';
import { setStatusBarStyle, Style } from '../utils/statusBar';
type WalletRow = Tables<'wallets'>;
type PaymentMethodRow = Tables<'payment_methods'>;
type WalletTransactionRow = Tables<'wallet_transactions'>;
const formatMoney = (amount: number, currency: string) =>
new Intl.NumberFormat('en-US', {
style: 'currency',
currency,
minimumFractionDigits: 2,
}).format(amount);
const Wallet: React.FC = () => {
const history = useHistory();
const { user } = useAuth();
const [wallet, setWallet] = useState<WalletRow | null>(null);
const [methods, setMethods] = useState<PaymentMethodRow[]>([]);
const [transactions, setTransactions] = useState<WalletTransactionRow[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState('');
useIonViewWillEnter(() => {
setStatusBarStyle(Style.Light);
});
useEffect(() => {
const loadWallet = async () => {
if (!user) {
setWallet(null);
setMethods([]);
setTransactions([]);
setIsLoading(false);
return;
}
setIsLoading(true);
setError('');
const { data: walletData, error: walletError } = await supabase
.from('wallets')
.select('*')
.eq('user_id', user.id)
.maybeSingle();
if (walletError) {
setError('Unable to load your wallet right now.');
setIsLoading(false);
return;
}
setWallet(walletData ?? null);
const [
{ data: methodData, error: methodError },
{ data: txData, error: txError },
] = await Promise.all([
supabase
.from('payment_methods')
.select('*')
.eq('user_id', user.id)
.order('is_default', { ascending: false })
.order('created_at', { ascending: false })
.limit(3),
walletData
? supabase
.from('wallet_transactions')
.select('*')
.eq('wallet_id', walletData.id)
.order('created_at', { ascending: false })
.limit(5)
: Promise.resolve({ data: [], error: null }),
]);
if (methodError || txError) {
setError('Some wallet details could not be loaded.');
}
setMethods(methodData ?? []);
setTransactions(txData ?? []);
setIsLoading(false);
};
void loadWallet();
}, [user]);
const balanceLabel = useMemo(() => {
if (!wallet) return '$0.00';
return formatMoney(wallet.balance, wallet.currency);
}, [wallet]);
return (
<IonPage>
<IonHeader className="ion-no-border wallet-header wallet-header-modern">
<IonToolbar>
<div className="wallet-toolbar-inner">
<IonButton
fill="clear"
className="wallet-back-button wallet-back-button-modern"
aria-label="Back to profile"
onClick={() => history.replace('/profile')}
>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
<div className="wallet-toolbar-title-block">
<span>Payments</span>
<strong>Wallet</strong>
</div>
<IonButton
fill="clear"
className="wallet-header-add-button"
aria-label="Add payment method"
onClick={() => history.push('/wallet/payment-methods/add')}
>
<IonIcon icon={addOutline} slot="icon-only" />
</IonButton>
</div>
</IonToolbar>
</IonHeader>
<IonContent
fullscreen
className="wallet-page wallet-page-vibrant ion-padding"
>
<IonLoading isOpen={isLoading} message="Loading wallet..." />
{!user ? (
<>
<div className="wallet-balance-card wallet-balance-card-vibrant">
<div>
<span className="wallet-balance-label">Available balance</span>
<h1>$48.50</h1>
<p>Refund credits ready for your next basket.</p>
<div className="wallet-balance-actions">
<span>Refund wallet</span>
<span>Instant checkout</span>
</div>
</div>
<div className="wallet-balance-icon">
<IonIcon icon={walletOutline} />
</div>
</div>
<div className="wallet-insight-strip">
<div>
<span>Refunds</span>
<strong>Instant</strong>
</div>
<div>
<span>Checkout</span>
<strong>Faster</strong>
</div>
<div>
<span>Security</span>
<strong>Masked</strong>
</div>
</div>
<div className="wallet-section-heading">
<h2>Saved payment methods</h2>
<IonButton
fill="clear"
onClick={() => history.push('/wallet/payment-methods')}
>
See all
</IonButton>
</div>
<div className="wallet-method-stack">
{[
{
id: 'demo-visa',
brand: 'visa',
last4: '4242',
expiry_month: 8,
expiry_year: 2028,
is_default: true,
cardholder_name: 'Demo User',
},
].map((method) => (
<button
key={method.id}
type="button"
className="wallet-method-card wallet-method-preview-card"
onClick={() => history.push('/wallet/payment-methods')}
>
<div className="wallet-card-visual wallet-card-visual-demo">
<div className="wallet-card-top-row">
<div className="wallet-card-chip" />
<span className="wallet-card-brand">
{method.brand.toUpperCase()}
</span>
</div>
<div className="wallet-card-number">
{method.last4}
</div>
<div className="wallet-card-meta-row">
<div>
<span>Cardholder</span>
<strong>{method.cardholder_name}</strong>
</div>
<div className="wallet-card-meta-right">
<span>Valid Thru</span>
<strong>
{String(method.expiry_month).padStart(2, '0')}/
{String(method.expiry_year).slice(-2)}
</strong>
</div>
</div>
</div>
<div className="wallet-method-preview-footer wallet-method-preview-footer-end">
<IonIcon icon={chevronForwardOutline} />
</div>
</button>
))}
</div>
<div className="wallet-section-heading wallet-section-spacing">
<h2>Recent wallet activity</h2>
</div>
<div className="wallet-activity-list">
{[
{
id: 'txn-1',
title: 'Refund from cancelled order',
description: 'Order QC-481920 refund credited to wallet',
amount: 18.5,
created_at: new Date().toISOString(),
},
{
id: 'txn-2',
title: 'Promotional wallet credit',
description: 'Welcome bonus added to your balance',
amount: 30,
created_at: new Date(Date.now() - 86400000).toISOString(),
},
].map((transaction) => (
<div key={transaction.id} className="wallet-activity-card">
<div>
<strong>{transaction.title}</strong>
<p>{transaction.description}</p>
</div>
<div className="wallet-activity-right">
<span className="wallet-positive">
{formatMoney(transaction.amount, 'USD')}
</span>
<small>
{new Date(transaction.created_at).toLocaleDateString()}
</small>
</div>
</div>
))}
</div>
<div className="wallet-refund-card">
<h3>How refunds work</h3>
<p>
In demo mode, this wallet preview shows how refund credits and
saved payment methods will appear for signed-in users.
</p>
</div>
</>
) : (
<>
<div className="wallet-balance-card wallet-balance-card-vibrant">
<div>
<span className="wallet-balance-label">Available balance</span>
<h1>{balanceLabel}</h1>
<p>Refunds and credits ready for your next basket.</p>
<div className="wallet-balance-actions">
<span>Refund wallet</span>
<span>Instant checkout</span>
</div>
</div>
<div className="wallet-balance-icon">
<IonIcon icon={walletOutline} />
</div>
</div>
{error && (
<IonText color="danger">
<p className="wallet-inline-message">{error}</p>
</IonText>
)}
<div className="wallet-insight-strip">
<div>
<span>Refunds</span>
<strong>Instant</strong>
</div>
<div>
<span>Checkout</span>
<strong>Faster</strong>
</div>
<div>
<span>Security</span>
<strong>Masked</strong>
</div>
</div>
<div className="wallet-section-heading">
<h2>Saved payment methods</h2>
<IonButton
fill="clear"
onClick={() => history.push('/wallet/payment-methods')}
>
See all
</IonButton>
</div>
{methods.length === 0 ? (
<div className="wallet-surface-card wallet-empty-block">
<IonIcon icon={cardOutline} />
<div>
<h3>No saved payment methods</h3>
<p>Add a card once so future checkouts feel faster.</p>
</div>
<IonButton
expand="block"
onClick={() => history.push('/wallet/payment-methods/add')}
>
<IonIcon icon={addOutline} slot="start" />
Add payment method
</IonButton>
</div>
) : (
<div className="wallet-method-stack">
{(() => {
const method =
methods.find((entry) => entry.is_default) ?? methods[0];
if (!method) return null;
return (
<button
key={method.id}
type="button"
className="wallet-method-card wallet-method-preview-card"
onClick={() => history.push('/wallet/payment-methods')}
>
<div className="wallet-card-visual">
<div className="wallet-card-top-row">
<div className="wallet-card-chip" />
<span className="wallet-card-brand">
{method.brand.toUpperCase()}
</span>
</div>
<div className="wallet-card-number">
{method.last4}
</div>
<div className="wallet-card-meta-row">
<div>
<span>Cardholder</span>
<strong>
{method.cardholder_name || 'Saved Card'}
</strong>
</div>
<div className="wallet-card-meta-right">
<span>Valid Thru</span>
<strong>
{String(method.expiry_month).padStart(2, '0')}/
{String(method.expiry_year).slice(-2)}
</strong>
</div>
</div>
</div>
<div className="wallet-method-preview-footer wallet-method-preview-footer-end">
<IonIcon icon={chevronForwardOutline} />
</div>
</button>
);
})()}
</div>
)}
<div className="wallet-section-heading wallet-section-spacing">
<h2>Recent wallet activity</h2>
</div>
{transactions.length === 0 ? (
<div className="wallet-surface-card wallet-empty-block compact-empty-block">
<IonIcon icon={arrowDownCircleOutline} />
<div>
<h3>No wallet activity yet</h3>
<p>
Refund credits and manual wallet adjustments will appear
here.
</p>
</div>
</div>
) : (
<div className="wallet-activity-list">
{transactions.map((transaction) => (
<div key={transaction.id} className="wallet-activity-card">
<div>
<strong>{transaction.title}</strong>
<p>{transaction.description || 'Wallet transaction'}</p>
</div>
<div className="wallet-activity-right">
<span
className={
transaction.amount >= 0
? 'wallet-positive'
: 'wallet-negative'
}
>
{formatMoney(
transaction.amount,
wallet?.currency || 'USD'
)}
</span>
<small>
{new Date(transaction.created_at).toLocaleDateString()}
</small>
</div>
</div>
))}
</div>
)}
<div className="wallet-refund-card">
<h3>How refunds work</h3>
<p>
When a refund is approved, the credited amount will appear in
your wallet balance and in the activity list above.
</p>
</div>
</>
)}
</IonContent>
</IonPage>
);
};
export default Wallet;
-7
View File
@@ -1,7 +0,0 @@
import { createClient } from '@supabase/supabase-js';
import type { Database } from './database.types';
export const supabase = createClient<Database>(
'https://ztrqscwsjnfvcuaakqus.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inp0cnFzY3dzam5mdmN1YWFrcXVzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk4ODk5MzEsImV4cCI6MjA5NTQ2NTkzMX0.htIOqPM90Uk0dYIdD8X8_tLfq5URcSvmCArfVRF4jeQ',
);
+39 -3971
View File
File diff suppressed because it is too large Load Diff
+5 -14
View File
@@ -1,18 +1,14 @@
import { StatusBar, Style } from '@capacitor/status-bar';
export { Style };
``
const _origin = (() => {
try {
if (document.referrer) return new URL(document.referrer).origin;
} catch {}
try { if (document.referrer) return new URL(document.referrer).origin; } catch {}
return window.location.origin;
})();
/** Set status bar icon/text colour. Use instead of StatusBar.setStyle directly. */
export async function setStatusBarStyle(style: Style): Promise<void> {
try {
await StatusBar.setStyle({ style });
} catch {}
try { await StatusBar.setStyle({ style }); } catch {}
if (window.parent !== window) {
window.parent.postMessage({ type: '__apsuite_statusbar', style }, _origin);
}
@@ -20,13 +16,8 @@ export async function setStatusBarStyle(style: Style): Promise<void> {
/** Set status bar background colour (Android). Use instead of StatusBar.setBackgroundColor directly. */
export async function setStatusBarBackground(color: string): Promise<void> {
try {
await (StatusBar as any).setBackgroundColor({ color });
} catch {}
try { await (StatusBar as any).setBackgroundColor({ color }); } catch {}
if (window.parent !== window) {
window.parent.postMessage(
{ type: '__apsuite_statusbar_bg', color },
_origin
);
window.parent.postMessage({ type: '__apsuite_statusbar_bg', color }, _origin);
}
}
+18
View File
@@ -0,0 +1,18 @@
ext {
minSdkVersion = 24
compileSdkVersion = 36
targetSdkVersion = 36
androidxActivityVersion = '1.11.0'
androidxAppCompatVersion = '1.7.1'
androidxCoordinatorLayoutVersion = '1.3.0'
androidxCoreVersion = '1.17.0'
androidxFragmentVersion = '1.8.9'
coreSplashScreenVersion = '1.2.0'
androidxWebkitVersion = '1.14.0'
junitVersion = '4.13.2'
androidxJunitVersion = '1.3.0'
androidxEspressoCoreVersion = '3.7.0'
cordovaAndroidVersion = '14.0.1'
rgcfaIncludeGoogle = true
androidxCredentialsVersion = '1.3.0'
}
+13 -13
View File
@@ -216,16 +216,16 @@ __metadata:
languageName: node
linkType: hard
"@capacitor-firebase/authentication@npm:^8.0.0":
version: 8.3.0
resolution: "@capacitor-firebase/authentication@npm:8.3.0"
"@capacitor-firebase/authentication@npm:^7.0.0":
version: 7.5.0
resolution: "@capacitor-firebase/authentication@npm:7.5.0"
peerDependencies:
"@capacitor/core": ">=8.0.0"
firebase: ^12.6.0
"@capacitor/core": ">=7.0.0"
firebase: ^11.2.0
peerDependenciesMeta:
firebase:
optional: true
checksum: 10c0/a52f6ec85d18438ed616c78f29a8cea4a64621d13208a4d79d914344090630ce549f4e2d5d75da94b012e8799b4794e0af8d0e736edd97973b57205b62258ed9
checksum: 10c0/aea4854cd6f8f2282bbbfb5cb0e30dc7152cd593a70c6792a1583fa085803f9330a77584f3ae66ee8c9b65b035374c2fe86545b191d57c0814778b6276306e1e
languageName: node
linkType: hard
@@ -1043,11 +1043,11 @@ __metadata:
linkType: hard
"@googlemaps/js-api-loader@npm:^2.0.2":
version: 2.1.0
resolution: "@googlemaps/js-api-loader@npm:2.1.0"
version: 2.0.2
resolution: "@googlemaps/js-api-loader@npm:2.0.2"
dependencies:
"@types/google.maps": "npm:^3.53.1"
checksum: 10c0/dc9593252f59af6c8af0056d1045bc6ce8335962fde51b4e294b864f47d3c640c4259c3afedfb9c0f60b62f76d9c8786062888c6f22518ce88f2e0d95dc6b510
checksum: 10c0/1bd8f1e117145de83a7cfca7c05cf4cfb2d9095d507497f8b0e590be94de3a6a27a7a3c80801de6f58d77e5a2ce169a6b6d9c9d0dfc20ea1039d890226318c46
languageName: node
linkType: hard
@@ -1889,9 +1889,9 @@ __metadata:
linkType: hard
"@types/google.maps@npm:^3.53.1, @types/google.maps@npm:^3.58.1":
version: 3.65.0
resolution: "@types/google.maps@npm:3.65.0"
checksum: 10c0/d41bc1ed2c63f297a8956b097953515e87aa21d25ef918102067efa97113ea558bb42be521337af93698b36d4c6283439b3e087b4b57c7033f59128cdc7159cb
version: 3.64.1
resolution: "@types/google.maps@npm:3.64.1"
checksum: 10c0/4ade621941045c7e1b1ead30e0b4025b7fccf2b4cfb7c9b5f48c31cceb964c74d17c28b6105be15b99df85c23e19b25415e9fd7bdd7b1d40b7000d22dbbb4e7e
languageName: node
linkType: hard
@@ -2032,7 +2032,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "app@workspace:."
dependencies:
"@capacitor-firebase/authentication": "npm:^8.0.0"
"@capacitor-firebase/authentication": "npm:^7.0.0"
"@capacitor/android": "npm:8.3.4"
"@capacitor/app": "npm:8.1.0"
"@capacitor/cli": "npm:8.3.4"