Compare commits

..

1 Commits

Author SHA1 Message Date
AppCakes dcb9174408 build: e33c3ecd-6e30-4f54-947f-6e498f5888d3 2026-05-31 14:18:57 +00:00
63 changed files with 1208 additions and 8886 deletions
+1
View File
@@ -0,0 +1 @@
VITE_GOOGLE_MAPS_KEY=AIzaSyA42Ue9SEQwTaQo5DjbhxPZcpqVT36M4_U
Binary file not shown.
+1 -1
View File
@@ -4,7 +4,7 @@ android {
namespace = "io.ionic.starter"
compileSdk = rootProject.ext.compileSdkVersion
defaultConfig {
applicationId "io.ionic.starter"
applicationId "com.habitmode.llemba.com"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
+6
View File
@@ -21,6 +21,12 @@
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="io.flavorstudio.app" />
</intent-filter>
</activity>
+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">FlavorStudio</string>
<string name="title_activity_main">FlavorStudio</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: 'com.habitmode.llemba.com',
appName: 'FlavorStudio',
webDir: 'dist',
plugins: {
FirebaseAuthentication: {
+22
View File
@@ -55,6 +55,13 @@ workflows:
if [ -n "$CM_DEBUG_KEYSTORE" ]; then
echo "$CM_DEBUG_KEYSTORE" | base64 --decode > /tmp/debug-keystore.p12
fi
- name: Check native credentials
script: |
if [ -n "$VITE_GOOGLE_MAPS_KEY" ]; then
echo "VITE_GOOGLE_MAPS_KEY: set (length=${#VITE_GOOGLE_MAPS_KEY}, ends …${VITE_GOOGLE_MAPS_KEY: -4})"
else
echo "WARNING: VITE_GOOGLE_MAPS_KEY not set — Google Maps will not render"
fi
- name: Build debug APK
script: |
cd android
@@ -68,6 +75,21 @@ workflows:
else
./gradlew assembleDebug --no-daemon
fi
- name: Verify manifest substitution
script: |
MANIFEST="android/app/build/intermediates/merged_manifests/debug/AndroidManifest.xml"
if [ -f "$MANIFEST" ]; then
VAL=$(grep -A1 'geo.API_KEY' "$MANIFEST" | grep -o 'android:value="[^"]*"' | cut -d'"' -f2)
if [ -z "$VAL" ]; then
echo "WARNING: geo.API_KEY meta-data not found in merged manifest"
elif [ "$VAL" = '${googleMapsApiKey}' ]; then
echo "WARNING: geo.API_KEY placeholder was not substituted — key missing from build env"
else
echo "geo.API_KEY substituted OK (ends …${VAL: -4})"
fi
else
echo "Merged manifest not found at $MANIFEST"
fi
artifacts:
- android/app/build/outputs/apk/debug/app-debug.apk
+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.flavorstudio.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.flavorstudio.app;
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
SWIFT_VERSION = 5.0;
+3 -3
View File
@@ -7,7 +7,7 @@
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>bringg</string>
<string>FlavorStudio</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.flavorstudio.app</string>
<key>CFBundleURLSchemes</key>
<array>
<string>com.bringg.app</string>
<string>io.flavorstudio.app</string>
</array>
</dict>
</array>
+363
View File
@@ -0,0 +1,363 @@
workflows:
android-debug:
name: Android Debug APK
max_build_duration: 45
instance_type: mac_mini_m2
environment:
node: 22
java: 21
cache:
cache_paths:
- $HOME/.gradle/caches
- $HOME/.gradle/wrapper
scripts:
- name: Strip unused scaffold packages
script: |
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
if ! grep -rq "$pkg" src/; then
node -e "const fs=require('fs'),p=JSON.parse(fs.readFileSync('package.json','utf8'));delete p.dependencies['${pkg}'];fs.writeFileSync('package.json',JSON.stringify(p,null,2));"
echo "Stripped $pkg (not used in src/)"
else
echo "Keeping $pkg (used in src/)"
fi
done
- name: Install dependencies
script: rm -f package-lock.json && npm install --legacy-peer-deps
- name: Build web assets
script: npm run build
- name: Write Firebase config
script: |
if [ -n "$GOOGLE_SERVICES_JSON" ]; then
echo "$GOOGLE_SERVICES_JSON" | base64 --decode > android/app/google-services.json
echo "Wrote google-services.json ($(wc -c < android/app/google-services.json) bytes)"
else
echo "GOOGLE_SERVICES_JSON is empty — skipping"
fi
if [ -n "$GOOGLE_SERVICE_INFO_PLIST" ]; then
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
- name: Capacitor sync
script: npx cap sync android
- name: Set up debug keystore
script: |
if [ -n "$CM_DEBUG_KEYSTORE" ]; then
echo "$CM_DEBUG_KEYSTORE" | base64 --decode > /tmp/debug-keystore.p12
fi
- name: Build debug APK
script: |
cd android
if [ -n "$CM_DEBUG_KEYSTORE" ]; then
./gradlew assembleDebug \
-Pandroid.injected.signing.store.file=/tmp/debug-keystore.p12 \
-Pandroid.injected.signing.store.password=$CM_DEBUG_KEYSTORE_PASSWORD \
-Pandroid.injected.signing.key.alias=debug \
-Pandroid.injected.signing.key.password=$CM_DEBUG_KEYSTORE_PASSWORD \
--no-daemon
else
./gradlew assembleDebug --no-daemon
fi
artifacts:
- android/app/build/outputs/apk/debug/app-debug.apk
android-release-apk:
name: Android Release APK
max_build_duration: 45
instance_type: mac_mini_m2
environment:
node: 22
java: 21
cache:
cache_paths:
- $HOME/.gradle/caches
- $HOME/.gradle/wrapper
scripts:
- name: Strip unused scaffold packages
script: |
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
if ! grep -rq "$pkg" src/; then
node -e "const fs=require('fs'),p=JSON.parse(fs.readFileSync('package.json','utf8'));delete p.dependencies['${pkg}'];fs.writeFileSync('package.json',JSON.stringify(p,null,2));"
echo "Stripped $pkg (not used in src/)"
else
echo "Keeping $pkg (used in src/)"
fi
done
- name: Install dependencies
script: rm -f package-lock.json && npm install --legacy-peer-deps
- name: Build web assets
script: npm run build
- name: Write Firebase config
script: |
if [ -n "$GOOGLE_SERVICES_JSON" ]; then
echo "$GOOGLE_SERVICES_JSON" | base64 --decode > android/app/google-services.json
fi
- name: Capacitor sync
script: npx cap sync android
- name: Set up keystore
script: echo "$CM_KEYSTORE" | base64 --decode > /tmp/keystore.jks
- name: Build Release APK
script: |
cd android
./gradlew assembleRelease \
-Pandroid.injected.signing.store.file=/tmp/keystore.jks \
-Pandroid.injected.signing.store.password=$CM_KEYSTORE_PASSWORD \
-Pandroid.injected.signing.key.alias=$CM_KEY_ALIAS \
-Pandroid.injected.signing.key.password=$CM_KEY_PASSWORD \
--no-daemon
artifacts:
- android/app/build/outputs/apk/release/app-release.apk
android-release-aab:
name: Android Release AAB
max_build_duration: 45
instance_type: mac_mini_m2
environment:
node: 22
java: 21
cache:
cache_paths:
- $HOME/.gradle/caches
- $HOME/.gradle/wrapper
scripts:
- name: Strip unused scaffold packages
script: |
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
if ! grep -rq "$pkg" src/; then
node -e "const fs=require('fs'),p=JSON.parse(fs.readFileSync('package.json','utf8'));delete p.dependencies['${pkg}'];fs.writeFileSync('package.json',JSON.stringify(p,null,2));"
echo "Stripped $pkg (not used in src/)"
else
echo "Keeping $pkg (used in src/)"
fi
done
- name: Install dependencies
script: rm -f package-lock.json && npm install --legacy-peer-deps
- name: Build web assets
script: npm run build
- name: Write Firebase config
script: |
if [ -n "$GOOGLE_SERVICES_JSON" ]; then
echo "$GOOGLE_SERVICES_JSON" | base64 --decode > android/app/google-services.json
fi
- name: Capacitor sync
script: npx cap sync android
- name: Set up keystore
script: echo "$CM_KEYSTORE" | base64 --decode > /tmp/keystore.jks
- name: Build Release AAB
script: |
cd android
./gradlew bundleRelease \
-Pandroid.injected.signing.store.file=/tmp/keystore.jks \
-Pandroid.injected.signing.store.password=$CM_KEYSTORE_PASSWORD \
-Pandroid.injected.signing.key.alias=$CM_KEY_ALIAS \
-Pandroid.injected.signing.key.password=$CM_KEY_PASSWORD \
--no-daemon
artifacts:
- android/app/build/outputs/bundle/release/app-release.aab
android-release:
name: Android Publish to Google Play
max_build_duration: 60
instance_type: mac_mini_m2
environment:
node: 22
java: 21
cache:
cache_paths:
- $HOME/.gradle/caches
- $HOME/.gradle/wrapper
scripts:
- name: Strip unused scaffold packages
script: |
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
if ! grep -rq "$pkg" src/; then
node -e "const fs=require('fs'),p=JSON.parse(fs.readFileSync('package.json','utf8'));delete p.dependencies['${pkg}'];fs.writeFileSync('package.json',JSON.stringify(p,null,2));"
echo "Stripped $pkg (not used in src/)"
else
echo "Keeping $pkg (used in src/)"
fi
done
- name: Install dependencies
script: rm -f package-lock.json && npm install --legacy-peer-deps
- name: Build web assets
script: npm run build
- name: Write Firebase config
script: |
if [ -n "$GOOGLE_SERVICES_JSON" ]; then
echo "$GOOGLE_SERVICES_JSON" | base64 --decode > android/app/google-services.json
fi
- name: Capacitor sync
script: npx cap sync android
- name: Set up keystore
script: echo "$CM_KEYSTORE" | base64 --decode > /tmp/keystore.jks
- name: Build Release AAB
script: |
cd android
./gradlew bundleRelease \
-Pandroid.injected.signing.store.file=/tmp/keystore.jks \
-Pandroid.injected.signing.store.password=$CM_KEYSTORE_PASSWORD \
-Pandroid.injected.signing.key.alias=$CM_KEY_ALIAS \
-Pandroid.injected.signing.key.password=$CM_KEY_PASSWORD \
--no-daemon
publishing:
google_play:
credentials: $GOOGLE_PLAY_SERVICE_ACCOUNT_CREDENTIALS
track: $GOOGLE_PLAY_TRACK
submit_as_draft: false
artifacts:
- android/app/build/outputs/bundle/release/app-release.aab
ios-debug:
name: iOS Debug IPA
max_build_duration: 60
instance_type: mac_mini_m2
environment:
node: 22
xcode: latest
scripts:
- name: Strip unused scaffold packages
script: |
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
if ! grep -rq "$pkg" src/; then
node -e "const fs=require('fs'),p=JSON.parse(fs.readFileSync('package.json','utf8'));delete p.dependencies['${pkg}'];fs.writeFileSync('package.json',JSON.stringify(p,null,2));"
echo "Stripped $pkg (not used in src/)"
else
echo "Keeping $pkg (used in src/)"
fi
done
- name: Install dependencies
script: rm -f package-lock.json && npm install --legacy-peer-deps
- name: Build web assets
script: npm run build
- name: Capacitor sync
script: npx cap sync ios
- 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: Set up signing
script: |
keychain initialize
if [ -n "$APP_STORE_CONNECT_PRIVATE_KEY" ]; then
app-store-connect fetch-signing-files \
$(xcode-project detect-bundle-id) \
--type IOS_APP_DEVELOPMENT \
--certificate-key=@env:APP_STORE_CONNECT_PRIVATE_KEY \
--issuer-id=$APP_STORE_CONNECT_ISSUER_ID \
--key-id=$APP_STORE_CONNECT_KEY_IDENTIFIER \
--create
xcode-project use-profiles
elif [ -n "$CM_CERTIFICATE" ]; then
echo "$CM_CERTIFICATE" | base64 --decode > /tmp/cert.p12
keychain add-certificates \
--certificate /tmp/cert.p12 \
--certificate-password "$CM_CERTIFICATE_PASSWORD"
mkdir -p "$HOME/Library/MobileDevice/Provisioning Profiles"
echo "$CM_PROVISIONING_PROFILE" | base64 --decode > "$HOME/Library/MobileDevice/Provisioning Profiles/profile.mobileprovision"
xcode-project use-profiles
else
echo "No signing credentials configured — build will fail at signing"
exit 1
fi
- name: Build IPA
script: |
xcode-project build-ipa \
--workspace ios/App/App.xcworkspace \
--scheme App
artifacts:
- build/ios/ipa/*.ipa
ios-release:
name: iOS Release IPA
max_build_duration: 90
instance_type: mac_mini_m2
environment:
node: 22
xcode: latest
scripts:
- name: Strip unused scaffold packages
script: |
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
if ! grep -rq "$pkg" src/; then
node -e "const fs=require('fs'),p=JSON.parse(fs.readFileSync('package.json','utf8'));delete p.dependencies['${pkg}'];fs.writeFileSync('package.json',JSON.stringify(p,null,2));"
echo "Stripped $pkg (not used in src/)"
else
echo "Keeping $pkg (used in src/)"
fi
done
- name: Install dependencies
script: rm -f package-lock.json && npm install --legacy-peer-deps
- name: Build web assets
script: npm run build
- name: Capacitor sync
script: npx cap sync ios
- 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: Set up signing
script: |
keychain initialize
if [ -n "$APP_STORE_CONNECT_PRIVATE_KEY" ]; then
app-store-connect fetch-signing-files \
$(xcode-project detect-bundle-id) \
--type IOS_APP_STORE \
--certificate-key=@env:APP_STORE_CONNECT_PRIVATE_KEY \
--issuer-id=$APP_STORE_CONNECT_ISSUER_ID \
--key-id=$APP_STORE_CONNECT_KEY_IDENTIFIER \
--create
xcode-project use-profiles
else
echo "$CM_CERTIFICATE" | base64 --decode > /tmp/cert.p12
keychain add-certificates \
--certificate /tmp/cert.p12 \
--certificate-password "$CM_CERTIFICATE_PASSWORD"
mkdir -p "$HOME/Library/MobileDevice/Provisioning Profiles"
echo "$CM_PROVISIONING_PROFILE" | base64 --decode > "$HOME/Library/MobileDevice/Provisioning Profiles/profile.mobileprovision"
xcode-project use-profiles
fi
- name: Build IPA
script: |
xcode-project build-ipa \
--workspace ios/App/App.xcworkspace \
--scheme App \
--config Release
- name: Publish
script: |
if [ "$SUBMIT_TO_TESTFLIGHT" = "true" ] || [ "$SUBMIT_TO_APP_STORE" = "true" ]; then
app-store-connect publish \
--certificate-key=@env:APP_STORE_CONNECT_PRIVATE_KEY \
--issuer-id=$APP_STORE_CONNECT_ISSUER_ID \
--key-id=$APP_STORE_CONNECT_KEY_IDENTIFIER \
--submit-to-testflight=$SUBMIT_TO_TESTFLIGHT \
--submit-to-app-store=$SUBMIT_TO_APP_STORE
fi
artifacts:
- build/ios/ipa/*.ipa
+2 -2
View File
@@ -21,8 +21,8 @@
"@capacitor/push-notifications": "^8.1.1",
"@capacitor/status-bar": "8.0.2",
"@ionic/pwa-elements": "^3.0.0",
"@ionic/react": "^8.5.0",
"@ionic/react-router": "^8.5.0",
"@ionic/react": "8.8.7",
"@ionic/react-router": "8.8.7",
"@supabase/supabase-js": "^2.0.0",
"firebase": "^11.0.0",
"ionicons": "^7.4.0",
+4 -43
View File
@@ -17,55 +17,16 @@ import '@ionic/react/css/display.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 HelloWorld from './pages/HelloWorld';
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<AuthProvider>
<IonRouterOutlet>
<IonRouterOutlet animated={true}>
<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" />
<Route path="/hello-world" component={HelloWorld} exact />
<Route exact path="/" render={() => <Redirect 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;
+90
View File
@@ -0,0 +1,90 @@
import React from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonPage,
IonTitle,
IonToolbar,
} from '@ionic/react';
import { chevronBackOutline, globeOutline } from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
const HelloWorld: React.FC = () => {
const history = useHistory();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonButton aria-label="Back" onClick={() => history.goBack()}>
<IonIcon icon={chevronBackOutline} slot="icon-only" />
</IonButton>
</IonButtons>
<IonTitle>Hello World</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent
className="ion-padding"
style={
{ '--background': 'var(--ion-color-light)' } as React.CSSProperties
}
>
<div
style={{
minHeight: '70vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
gap: 16,
}}
>
<div
style={{
width: 72,
height: 72,
borderRadius: 24,
background: 'rgba(var(--ion-color-primary-rgb), 0.12)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<IonIcon
icon={globeOutline}
style={{ fontSize: 36, color: 'var(--ion-color-primary)' }}
/>
</div>
<div>
<h1
style={{
margin: '0 0 8px',
fontSize: 28,
fontWeight: 700,
color: 'var(--ion-color-dark)',
}}
>
Hello, world!
</h1>
<p
style={{
margin: 0,
color: 'var(--ion-color-medium)',
lineHeight: 1.5,
}}
>
You made it to the new page.
</p>
</div>
</div>
</IonContent>
</IonPage>
);
};
export default HelloWorld;
+609 -769
View File
File diff suppressed because it is too large Load Diff
-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;
+2 -2
View File
@@ -2,6 +2,6 @@ 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',
'https://twfddmesszhmlsvdgrcv.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR3ZmRkbWVzc3pobWxzdmRncmN2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk1Njg0NDQsImV4cCI6MjA5NTE0NDQ0NH0.52RDOTgew7wQLK4dILj_Trxox7VLr7pv6dYX--UO10M',
);
+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'
}
+3 -1
View File
@@ -21,7 +21,9 @@ export default defineConfig({
port: 8100,
allowedHosts: true,
hmr: {
clientPort: process.env.HMR_CLIENT_PORT ? parseInt(process.env.HMR_CLIENT_PORT) : undefined,
clientPort: process.env.HMR_CLIENT_PORT
? parseInt(process.env.HMR_CLIENT_PORT)
: undefined,
},
},
css: { devSourcemap: false },
+17 -42
View File
@@ -217,15 +217,15 @@ __metadata:
linkType: hard
"@capacitor-firebase/authentication@npm:^8.0.0":
version: 8.3.0
resolution: "@capacitor-firebase/authentication@npm:8.3.0"
version: 8.2.0
resolution: "@capacitor-firebase/authentication@npm:8.2.0"
peerDependencies:
"@capacitor/core": ">=8.0.0"
firebase: ^12.6.0
peerDependenciesMeta:
firebase:
optional: true
checksum: 10c0/a52f6ec85d18438ed616c78f29a8cea4a64621d13208a4d79d914344090630ce549f4e2d5d75da94b012e8799b4794e0af8d0e736edd97973b57205b62258ed9
checksum: 10c0/497c8063e3145ee719dbeb206bd30d7e9581471a7dfa6e6bb3067e96c29468a8035430101abcb0c724bec936e30ca1863344723115ae0b3a9a317e192c0ef3d2
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
@@ -1108,17 +1108,6 @@ __metadata:
languageName: node
linkType: hard
"@ionic/core@npm:8.8.8":
version: 8.8.8
resolution: "@ionic/core@npm:8.8.8"
dependencies:
"@stencil/core": "npm:4.43.0"
ionicons: "npm:^8.0.13"
tslib: "npm:^2.1.0"
checksum: 10c0/fea32925aaebec558c1c3bb9c30f8c0806d3480a67936e63cdcce8846138688d9b6b5b853ebe771132f0f79efef16568b17d11495f7997ea325a265a7e7d7af3
languageName: node
linkType: hard
"@ionic/pwa-elements@npm:^3.0.0":
version: 3.4.0
resolution: "@ionic/pwa-elements@npm:3.4.0"
@@ -1126,36 +1115,22 @@ __metadata:
languageName: node
linkType: hard
"@ionic/react-router@npm:^8.5.0":
version: 8.8.8
resolution: "@ionic/react-router@npm:8.8.8"
"@ionic/react-router@npm:8.8.7":
version: 8.8.7
resolution: "@ionic/react-router@npm:8.8.7"
dependencies:
"@ionic/react": "npm:8.8.8"
"@ionic/react": "npm:8.8.7"
tslib: "npm:*"
peerDependencies:
react: ">=16.8.6"
react-dom: ">=16.8.6"
react-router: ^5.0.1
react-router-dom: ^5.0.1
checksum: 10c0/be9555ec4dbfd0565cada39d42236eb0b9e2283a13f500b42d5c0c06d6198c17a7be385cfb2ce4f9e89236c71992c30169328b861943a3fe7344c672ad94ae0c
checksum: 10c0/302d6ad9c0d450cf6466ff18622aa7708af77c1c4a676d2ff39eca6add440fe96d36a157feae146c3da460c32e7799357320b3270740b050ab040a664b9f0ff2
languageName: node
linkType: hard
"@ionic/react@npm:8.8.8":
version: 8.8.8
resolution: "@ionic/react@npm:8.8.8"
dependencies:
"@ionic/core": "npm:8.8.8"
ionicons: "npm:^8.0.13"
tslib: "npm:*"
peerDependencies:
react: ">=16.8.6"
react-dom: ">=16.8.6"
checksum: 10c0/b1b8888f487dc564735adde57ef3cd054e6c9bc38601f133823e69cb98d8e51c99c8902fe48fdd11ee5521ae58b322f110a1fbc8b8fd9bc62e27fc0b806bddd0
languageName: node
linkType: hard
"@ionic/react@npm:^8.5.0":
"@ionic/react@npm:8.8.7":
version: 8.8.7
resolution: "@ionic/react@npm:8.8.7"
dependencies:
@@ -1889,9 +1864,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
@@ -2044,8 +2019,8 @@ __metadata:
"@capacitor/push-notifications": "npm:^8.1.1"
"@capacitor/status-bar": "npm:8.0.2"
"@ionic/pwa-elements": "npm:^3.0.0"
"@ionic/react": "npm:^8.5.0"
"@ionic/react-router": "npm:^8.5.0"
"@ionic/react": "npm:8.8.7"
"@ionic/react-router": "npm:8.8.7"
"@supabase/supabase-js": "npm:^2.0.0"
"@types/katex": "npm:^0.16.0"
"@types/react": "npm:^19.0.0"