Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 AppCakes
|
8ef288f145 |
Binary file not shown.
Vendored
BIN
Binary file not shown.
@@ -4,7 +4,7 @@ android {
|
||||
namespace = "io.ionic.starter"
|
||||
compileSdk = rootProject.ext.compileSdkVersion
|
||||
defaultConfig {
|
||||
applicationId "com.kumusha.app"
|
||||
applicationId "io.ionic.starter"
|
||||
minSdkVersion rootProject.ext.minSdkVersion
|
||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||
versionCode 1
|
||||
|
||||
@@ -21,12 +21,6 @@
|
||||
<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="com.kumusha.app" />
|
||||
</intent-filter>
|
||||
|
||||
</activity>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<resources>
|
||||
<string name="app_name">kumusha</string>
|
||||
<string name="title_activity_main">kumusha</string>
|
||||
<string name="app_name">bringg</string>
|
||||
<string name="title_activity_main">bringg</string>
|
||||
<string name="package_name">io.ionic.starter</string>
|
||||
<string name="custom_url_scheme">io.ionic.starter</string>
|
||||
</resources>
|
||||
|
||||
@@ -15,4 +15,5 @@ ext {
|
||||
cordovaAndroidVersion = '14.0.1'
|
||||
rgcfaIncludeGoogle = true
|
||||
androidxCredentialsVersion = '1.3.0'
|
||||
javaVersion = JavaVersion.VERSION_17
|
||||
}
|
||||
+2
-5
@@ -1,17 +1,14 @@
|
||||
import type { CapacitorConfig } from '@capacitor/cli';
|
||||
|
||||
const config: CapacitorConfig = {
|
||||
appId: 'com.kumusha.app',
|
||||
appName: 'kumusha',
|
||||
appId: 'com.bringg.app',
|
||||
appName: 'bringg',
|
||||
webDir: 'dist',
|
||||
plugins: {
|
||||
FirebaseAuthentication: {
|
||||
skipNativeAuth: false,
|
||||
providers: [],
|
||||
},
|
||||
PushNotifications: {
|
||||
presentationOptions: ['badge', 'sound', 'banner'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Vendored
BIN
Binary file not shown.
Vendored
BIN
Binary file not shown.
@@ -26,7 +26,6 @@
|
||||
504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
|
||||
504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
|
||||
504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
|
||||
1A4EB3C21FED79650016851F /* App.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = App.entitlements; sourceTree = "<group>"; };
|
||||
50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
|
||||
958DCC722DB07C7200EA8C5F /* debug.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = debug.xcconfig; path = ../debug.xcconfig; sourceTree = SOURCE_ROOT; };
|
||||
/* End PBXFileReference section */
|
||||
@@ -69,7 +68,6 @@
|
||||
504EC30E1FED79650016851F /* Assets.xcassets */,
|
||||
504EC3101FED79650016851F /* LaunchScreen.storyboard */,
|
||||
504EC3131FED79650016851F /* Info.plist */,
|
||||
1A4EB3C21FED79650016851F /* App.entitlements */,
|
||||
2FAD9762203C412B000D30F8 /* config.xml */,
|
||||
50B271D01FEDC1A000F3C39B /* public */,
|
||||
);
|
||||
@@ -297,7 +295,6 @@
|
||||
baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
|
||||
buildSettings = {
|
||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
||||
CODE_SIGN_STYLE = Automatic;
|
||||
CURRENT_PROJECT_VERSION = 1;
|
||||
INFOPLIST_FILE = App/Info.plist;
|
||||
@@ -308,7 +305,7 @@
|
||||
);
|
||||
MARKETING_VERSION = 1.0;
|
||||
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.kumusha.app;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.bringg.app;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
|
||||
SWIFT_VERSION = 5.0;
|
||||
@@ -320,7 +317,6 @@
|
||||
isa = XCBuildConfiguration;
|
||||
buildSettings = {
|
||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
||||
CODE_SIGN_STYLE = Automatic;
|
||||
CURRENT_PROJECT_VERSION = 1;
|
||||
INFOPLIST_FILE = App/Info.plist;
|
||||
@@ -330,7 +326,7 @@
|
||||
"@executable_path/Frameworks",
|
||||
);
|
||||
MARKETING_VERSION = 1.0;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.kumusha.app;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.bringg.app;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
||||
SWIFT_VERSION = 5.0;
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import UIKit
|
||||
import Capacitor
|
||||
import FirebaseCore
|
||||
import FirebaseMessaging
|
||||
|
||||
@UIApplicationMain
|
||||
class AppDelegate: UIResponder, UIApplicationDelegate {
|
||||
@@ -9,7 +7,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
|
||||
var window: UIWindow?
|
||||
|
||||
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
|
||||
FirebaseApp.configure()
|
||||
// Override point for customization after application launch.
|
||||
return true
|
||||
}
|
||||
|
||||
@@ -48,19 +46,4 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
|
||||
return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
|
||||
}
|
||||
|
||||
func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
|
||||
Messaging.messaging().apnsToken = deviceToken
|
||||
Messaging.messaging().token { token, error in
|
||||
if let error = error {
|
||||
NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
|
||||
} else if let token = token {
|
||||
NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: token)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
|
||||
NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<key>CFBundleDevelopmentRegion</key>
|
||||
<string>en</string>
|
||||
<key>CFBundleDisplayName</key>
|
||||
<string>kumusha</string>
|
||||
<string>bringg</string>
|
||||
<key>CFBundleExecutable</key>
|
||||
<string>$(EXECUTABLE_NAME)</string>
|
||||
<key>CFBundleIdentifier</key>
|
||||
@@ -47,18 +47,14 @@
|
||||
</array>
|
||||
<key>UIViewControllerBasedStatusBarAppearance</key>
|
||||
<true/>
|
||||
<key>NSPhotoLibraryUsageDescription</key>
|
||||
<string>Kumusha needs access to your photo library so you can add profile and recipient photos.</string>
|
||||
<key>NSCameraUsageDescription</key>
|
||||
<string>Kumusha needs camera access so you can add profile and recipient photos.</string>
|
||||
<key>CFBundleURLTypes</key>
|
||||
<array>
|
||||
<dict>
|
||||
<key>CFBundleURLName</key>
|
||||
<string>com.kumusha.app</string>
|
||||
<string>com.bringg.app</string>
|
||||
<key>CFBundleURLSchemes</key>
|
||||
<array>
|
||||
<string>com.kumusha.app</string>
|
||||
<string>com.bringg.app</string>
|
||||
</array>
|
||||
</dict>
|
||||
</array>
|
||||
|
||||
+3
-8
@@ -14,24 +14,19 @@
|
||||
"@capacitor/android": "8.3.4",
|
||||
"@capacitor/app": "8.1.0",
|
||||
"@capacitor/core": "8.3.4",
|
||||
"@capacitor/filesystem": "^8.1.2",
|
||||
"@capacitor/google-maps": "^8.0.0",
|
||||
"@capacitor/haptics": "8.0.2",
|
||||
"@capacitor/ios": "8.3.4",
|
||||
"@capacitor/keyboard": "8.0.3",
|
||||
"@capacitor/preferences": "^8.0.1",
|
||||
"@capacitor/push-notifications": "^8.1.1",
|
||||
"@capacitor/share": "^8.0.1",
|
||||
"@capacitor/status-bar": "8.0.2",
|
||||
"@hookform/resolvers": "^3.9.0",
|
||||
"@ionic/pwa-elements": "^3.0.0",
|
||||
"@ionic/react": "8.8.7",
|
||||
"@ionic/react-router": "8.8.7",
|
||||
"@supabase/supabase-js": "^2.108.1",
|
||||
"@ionic/react": "^8.5.0",
|
||||
"@ionic/react-router": "^8.5.0",
|
||||
"@supabase/supabase-js": "^2.0.0",
|
||||
"firebase": "^11.0.0",
|
||||
"ionicons": "^7.4.0",
|
||||
"katex": "^0.16.0",
|
||||
"qrcode.react": "^4.2.0",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-hook-form": "^7.54.0",
|
||||
|
||||
Vendored
BIN
Binary file not shown.
+54
-298
@@ -1,29 +1,7 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Redirect, Route, useHistory, useLocation } from 'react-router-dom';
|
||||
import {
|
||||
IonApp,
|
||||
IonIcon,
|
||||
IonLabel,
|
||||
IonRouterOutlet,
|
||||
IonTabBar,
|
||||
IonTabButton,
|
||||
IonTabs,
|
||||
} from '@ionic/react';
|
||||
import React from 'react';
|
||||
import { Redirect, Route } from 'react-router-dom';
|
||||
import { IonApp, IonRouterOutlet } from '@ionic/react';
|
||||
import { IonReactRouter } from '@ionic/react-router';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { PushNotifications } from '@capacitor/push-notifications';
|
||||
import type {
|
||||
ActionPerformed,
|
||||
PushNotificationSchema,
|
||||
} from '@capacitor/push-notifications';
|
||||
import { supabase } from './supabase';
|
||||
import {
|
||||
heart,
|
||||
heartOutline,
|
||||
listOutline,
|
||||
peopleOutline,
|
||||
personOutline,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
import '@ionic/react/css/core.css';
|
||||
import '@ionic/react/css/normalize.css';
|
||||
@@ -35,283 +13,61 @@ import '@ionic/react/css/text-alignment.css';
|
||||
import '@ionic/react/css/text-transformation.css';
|
||||
import '@ionic/react/css/flex-utils.css';
|
||||
import '@ionic/react/css/display.css';
|
||||
import '@ionic/react/css/palettes/dark.system.css';
|
||||
|
||||
import './theme/variables.css';
|
||||
|
||||
import { setStatusBarStyle, Style } from './utils/statusBar';
|
||||
import { AuthProvider, useAuth } from './contexts/AuthContext';
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
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';
|
||||
|
||||
// Auth Pages
|
||||
import AuthPage from './pages/AuthPage';
|
||||
import VerifyEmailPage from './pages/VerifyEmailPage';
|
||||
import ForgotPasswordPage from './pages/ForgotPasswordPage';
|
||||
import VerifyResetPage from './pages/VerifyResetPage';
|
||||
import SetupProfilePage from './pages/SetupProfilePage';
|
||||
|
||||
// Main App Pages
|
||||
import HomePage from './pages/HomePage';
|
||||
import RecipientsPage from './pages/RecipientsPage';
|
||||
import RecipientFormPage from './pages/RecipientFormPage';
|
||||
import RecipientDetailPage from './pages/RecipientDetailPage';
|
||||
import SupportFlowPage from './pages/SupportFlowPage';
|
||||
import OrderDetailPage from './pages/OrderDetailPage';
|
||||
import VoucherDetailPage from './pages/VoucherDetailPage';
|
||||
import ActivityPage from './pages/ActivityPage';
|
||||
import NotificationsPage from './pages/NotificationsPage';
|
||||
import ProfilePage from './pages/ProfilePage';
|
||||
import EditProfilePage from './pages/EditProfilePage';
|
||||
|
||||
const SetupProfileRoute: React.FC = () => {
|
||||
const { user, profileStatus } = useAuth();
|
||||
return (
|
||||
<Route
|
||||
path="/setup-profile"
|
||||
render={() => {
|
||||
if (!user) return <Redirect to="/auth" />;
|
||||
if (profileStatus === 'loading') return null;
|
||||
if (profileStatus === 'loaded') return <Redirect to="/home" />;
|
||||
return <SetupProfilePage />;
|
||||
}}
|
||||
exact
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const SendSupportFab: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const hiddenPaths = [
|
||||
'/auth',
|
||||
'/verify-email',
|
||||
'/forgot-password',
|
||||
'/verify-reset',
|
||||
'/setup-profile',
|
||||
'/support/new',
|
||||
];
|
||||
const showOnPaths = ['/home', '/recipients', '/activity', '/profile'];
|
||||
const isVisibleRoute =
|
||||
showOnPaths.includes(location.pathname) ||
|
||||
/^\/recipients\/[0-9a-fA-F-]{36}$/.test(location.pathname);
|
||||
|
||||
if (!isVisibleRoute || hiddenPaths.includes(location.pathname)) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="app-send-support-fab"
|
||||
aria-label="Send support"
|
||||
onClick={() => history.push('/support/new')}
|
||||
>
|
||||
<IonIcon icon={heart} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const PushNotificationHandler: React.FC = () => {
|
||||
const { user, profile } = useAuth();
|
||||
const history = useHistory();
|
||||
|
||||
useEffect(() => {
|
||||
if (!Capacitor.isNativePlatform() || !user || !profile) return;
|
||||
|
||||
const setupPush = async () => {
|
||||
const handleNotificationTap = (notification: PushNotificationSchema) => {
|
||||
const { orderId, voucherId, screen } = notification.data || {};
|
||||
if (voucherId) {
|
||||
history.push(`/voucher/${voucherId}`, { parentRoot: '/home' });
|
||||
} else if (orderId) {
|
||||
history.push(`/orders/${orderId}`, { parentRoot: '/home' });
|
||||
} else if (screen) {
|
||||
history.push(screen, { parentRoot: '/home' });
|
||||
}
|
||||
};
|
||||
|
||||
// Capacitor automatically triggers pushNotificationActionPerformed
|
||||
// for the notification that launched the app once the listener is attached.
|
||||
|
||||
// Check if user has explicitly enabled push notifications
|
||||
if (!profile.notification_push_enabled) return;
|
||||
|
||||
const status = await PushNotifications.checkPermissions();
|
||||
if (status.receive === 'granted') {
|
||||
await PushNotifications.register();
|
||||
} else if (status.receive === 'prompt') {
|
||||
const result = await PushNotifications.requestPermissions();
|
||||
if (result.receive === 'granted') {
|
||||
await PushNotifications.register();
|
||||
}
|
||||
}
|
||||
|
||||
PushNotifications.addListener('registration', async (token) => {
|
||||
await supabase
|
||||
.from('profiles')
|
||||
.update({ fcm_token: token.value })
|
||||
.eq('id', user.id);
|
||||
});
|
||||
|
||||
PushNotifications.addListener('registrationError', (err) => {
|
||||
console.error('Push registration error:', err);
|
||||
});
|
||||
|
||||
PushNotifications.addListener('pushNotificationReceived', () => {
|
||||
// Handled natively via presentationOptions banner
|
||||
});
|
||||
|
||||
PushNotifications.addListener(
|
||||
'pushNotificationActionPerformed',
|
||||
(action: ActionPerformed) => {
|
||||
handleNotificationTap(action.notification);
|
||||
}
|
||||
);
|
||||
|
||||
await PushNotifications.removeAllDeliveredNotifications();
|
||||
};
|
||||
|
||||
setupPush();
|
||||
|
||||
return () => {
|
||||
if (Capacitor.isNativePlatform()) {
|
||||
PushNotifications.removeAllListeners();
|
||||
}
|
||||
};
|
||||
}, [user, profile, history]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const RootRedirect: React.FC = () => {
|
||||
const { user, profileStatus } = useAuth();
|
||||
|
||||
if (!user) return <Redirect to="/auth" />;
|
||||
if (profileStatus === 'loading') return null;
|
||||
if (profileStatus === 'missing') {
|
||||
return <Redirect to="/setup-profile" />;
|
||||
}
|
||||
return <Redirect to="/home" />;
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
useEffect(() => {
|
||||
setStatusBarStyle(Style.Light);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<IonApp>
|
||||
const App: React.FC = () => (
|
||||
<IonApp>
|
||||
<IonReactRouter>
|
||||
<AuthProvider>
|
||||
<IonReactRouter>
|
||||
<IonRouterOutlet>
|
||||
{/* Auth Routes */}
|
||||
<Route path="/auth" component={AuthPage} exact />
|
||||
<Route path="/verify-email" component={VerifyEmailPage} exact />
|
||||
<Route
|
||||
path="/forgot-password"
|
||||
component={ForgotPasswordPage}
|
||||
exact
|
||||
/>
|
||||
<Route path="/verify-reset" component={VerifyResetPage} exact />
|
||||
|
||||
{/* Setup Profile Route - Requires authenticated user but not necessarily complete profile */}
|
||||
<SetupProfileRoute />
|
||||
|
||||
{/* Top-level Protected Routes (no tab bar) */}
|
||||
<ProtectedRoute
|
||||
path="/support/new"
|
||||
component={SupportFlowPage}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/orders/:id([0-9a-fA-F-]{36})"
|
||||
component={OrderDetailPage}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/recipients/new"
|
||||
component={RecipientFormPage}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/recipients/:id([0-9a-fA-F-]{36})"
|
||||
component={RecipientDetailPage}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/recipients/:id([0-9a-fA-F-]{36})/edit"
|
||||
component={RecipientFormPage}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/profile/edit"
|
||||
component={EditProfilePage}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/notifications"
|
||||
component={NotificationsPage}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/voucher/:id([0-9a-fA-F-]{36})"
|
||||
component={VoucherDetailPage}
|
||||
exact
|
||||
/>
|
||||
|
||||
{/* Tab Routes */}
|
||||
<ProtectedRoute
|
||||
path={['/home', '/recipients', '/activity', '/profile']}
|
||||
exact
|
||||
component={() => (
|
||||
<IonTabs>
|
||||
<IonRouterOutlet>
|
||||
<Route path="/home" component={HomePage} exact />
|
||||
<Route
|
||||
path="/recipients"
|
||||
component={RecipientsPage}
|
||||
exact
|
||||
/>
|
||||
<Route path="/activity" component={ActivityPage} exact />
|
||||
<Route path="/profile" component={ProfilePage} exact />
|
||||
</IonRouterOutlet>
|
||||
|
||||
<IonTabBar slot="bottom" className="app-tab-bar">
|
||||
<IonTabButton tab="home" href="/home">
|
||||
<IonIcon icon={heartOutline} />
|
||||
<IonLabel>Care</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="recipients" href="/recipients">
|
||||
<IonIcon icon={peopleOutline} />
|
||||
<IonLabel>Recipients</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton disabled tab="send-support-fab" />
|
||||
<IonTabButton tab="activity" href="/activity">
|
||||
<IonIcon icon={listOutline} />
|
||||
<IonLabel>Activity</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="profile" href="/profile">
|
||||
<IonIcon icon={personOutline} />
|
||||
<IonLabel>Profile</IonLabel>
|
||||
</IonTabButton>
|
||||
</IonTabBar>
|
||||
</IonTabs>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Orders Redirect */}
|
||||
<Route
|
||||
exact
|
||||
path="/orders"
|
||||
render={() => <Redirect to="/activity" />}
|
||||
/>
|
||||
|
||||
{/* Root Redirect */}
|
||||
<Route exact path="/" component={RootRedirect} />
|
||||
</IonRouterOutlet>
|
||||
<SendSupportFab />
|
||||
<PushNotificationHandler />
|
||||
</IonReactRouter>
|
||||
<IonRouterOutlet>
|
||||
<Route path="/home" component={Home} exact />
|
||||
<Route path="/auth" component={Auth} exact />
|
||||
<Route path="/product/:id" component={ProductDetail} exact />
|
||||
<Route path="/cart" component={Cart} exact />
|
||||
<Route path="/orders" component={MyOrders} exact />
|
||||
<Route path="/orders/:id" component={OrderDetail} exact />
|
||||
<Route path="/profile" component={Profile} exact />
|
||||
<Route path="/addresses" component={Addresses} exact />
|
||||
<Route path="/wallet" component={Wallet} exact />
|
||||
<Route
|
||||
path="/wallet/payment-methods"
|
||||
component={PaymentMethods}
|
||||
exact
|
||||
/>
|
||||
<Route
|
||||
path="/wallet/payment-methods/add"
|
||||
component={AddPaymentMethod}
|
||||
exact
|
||||
/>
|
||||
<Route path="/admin/orders" component={AdminOrders} exact />
|
||||
<Route path="/admin/orders/:id" component={AdminOrderDetail} exact />
|
||||
<Route
|
||||
path="/order-confirmation"
|
||||
component={OrderConfirmation}
|
||||
exact
|
||||
/>
|
||||
<Redirect exact from="/" to="/home" />
|
||||
</IonRouterOutlet>
|
||||
</AuthProvider>
|
||||
</IonApp>
|
||||
);
|
||||
};
|
||||
</IonReactRouter>
|
||||
</IonApp>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 839 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 476 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 501 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 602 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 554 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 553 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 437 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 676 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 673 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 452 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 545 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 461 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 689 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 447 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 690 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 599 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 464 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 629 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 515 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 655 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 697 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 476 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
@@ -1,155 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import {
|
||||
medkitOutline,
|
||||
flashOutline,
|
||||
phonePortraitOutline,
|
||||
chevronForwardOutline,
|
||||
} from 'ionicons/icons';
|
||||
import momImage from '../assets/mom.jpg';
|
||||
import dadImage from '../assets/dad.jpg';
|
||||
import basketIcon from '../assets/basket.png';
|
||||
|
||||
interface ActivityListItemProps {
|
||||
id: string;
|
||||
eventType: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
amount?: number;
|
||||
statusText?: string;
|
||||
statusTone?: 'success' | 'warning' | 'partial';
|
||||
avatarLabel?: string;
|
||||
avatarTone?: string;
|
||||
avatarImage?: string;
|
||||
onClick?: (id: string) => void;
|
||||
onStatusClick?: () => void;
|
||||
}
|
||||
|
||||
const ActivityListItem: React.FC<ActivityListItemProps> = ({
|
||||
id,
|
||||
eventType,
|
||||
title,
|
||||
subtitle,
|
||||
amount,
|
||||
statusText,
|
||||
statusTone = 'warning',
|
||||
avatarLabel,
|
||||
avatarTone = 'brand',
|
||||
avatarImage,
|
||||
onClick,
|
||||
onStatusClick,
|
||||
}) => {
|
||||
const getIconAndColor = () => {
|
||||
if (
|
||||
eventType.includes('grocery') ||
|
||||
title.toLowerCase().includes('grocer')
|
||||
) {
|
||||
return {
|
||||
iconSrc: basketIcon,
|
||||
badgeClass: 'grocery',
|
||||
};
|
||||
}
|
||||
if (
|
||||
eventType.includes('medication') ||
|
||||
title.toLowerCase().includes('medic')
|
||||
) {
|
||||
return {
|
||||
icon: medkitOutline,
|
||||
badgeClass: 'medication',
|
||||
};
|
||||
}
|
||||
if (
|
||||
eventType.includes('airtime') ||
|
||||
title.toLowerCase().includes('airtime')
|
||||
) {
|
||||
return {
|
||||
icon: phonePortraitOutline,
|
||||
badgeClass: 'airtime',
|
||||
};
|
||||
}
|
||||
return {
|
||||
icon: flashOutline,
|
||||
badgeClass: 'electricity',
|
||||
};
|
||||
};
|
||||
|
||||
const { icon, iconSrc, badgeClass } = getIconAndColor();
|
||||
|
||||
const avatarSearchText =
|
||||
`${title} ${subtitle} ${avatarLabel ?? ''}`.toLowerCase();
|
||||
const resolvedAvatar =
|
||||
avatarImage ??
|
||||
(avatarSearchText.includes('mum') || avatarSearchText.includes('mom')
|
||||
? momImage
|
||||
: avatarSearchText.includes('dad') || avatarSearchText.includes('father')
|
||||
? dadImage
|
||||
: undefined);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onClick && onClick(id)}
|
||||
className="activity-feed-item"
|
||||
disabled={!onClick}
|
||||
>
|
||||
<div className="activity-feed-avatar-wrap">
|
||||
<div
|
||||
className={`activity-feed-avatar activity-feed-avatar-${avatarTone}`}
|
||||
>
|
||||
{resolvedAvatar ? (
|
||||
<img
|
||||
src={resolvedAvatar}
|
||||
alt=""
|
||||
className="activity-feed-avatar-image"
|
||||
/>
|
||||
) : (
|
||||
<span>{avatarLabel ?? 'KU'}</span>
|
||||
)}
|
||||
<div
|
||||
className={`activity-feed-avatar-badge activity-feed-avatar-badge-${badgeClass}`}
|
||||
>
|
||||
{iconSrc ? (
|
||||
<img src={iconSrc} alt="" className="activity-feed-badge-image" />
|
||||
) : (
|
||||
<IonIcon icon={icon} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="activity-feed-main">
|
||||
<div className="activity-feed-row">
|
||||
<div className="activity-feed-copy">
|
||||
<p className="activity-feed-title">{title}</p>
|
||||
<p className="activity-feed-subtitle">{subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="activity-feed-right">
|
||||
{amount !== undefined && (
|
||||
<p className="activity-feed-amount">${amount.toFixed(2)}</p>
|
||||
)}
|
||||
{statusText && (
|
||||
<button
|
||||
type="button"
|
||||
className={`activity-feed-status activity-feed-status-${statusTone}`}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
if (onStatusClick) {
|
||||
onStatusClick();
|
||||
return;
|
||||
}
|
||||
onClick?.(id);
|
||||
}}
|
||||
>
|
||||
<span>{statusText}</span>
|
||||
<IonIcon icon={chevronForwardOutline} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityListItem;
|
||||
@@ -0,0 +1,36 @@
|
||||
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;
|
||||
@@ -1,116 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { eyeOffOutline, eyeOutline } from 'ionicons/icons';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
|
||||
interface AuthFormFieldsProps {
|
||||
mode: 'login' | 'register';
|
||||
email: string;
|
||||
password: string;
|
||||
confirmPassword?: string;
|
||||
onEmailChange: (val: string) => void;
|
||||
onPasswordChange: (val: string) => void;
|
||||
onConfirmPasswordChange?: (val: string) => void;
|
||||
errors?: { [key: string]: string };
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const AuthFormFields: React.FC<AuthFormFieldsProps> = ({
|
||||
mode,
|
||||
email,
|
||||
password,
|
||||
confirmPassword,
|
||||
onEmailChange,
|
||||
onPasswordChange,
|
||||
onConfirmPasswordChange,
|
||||
errors = {},
|
||||
disabled = false,
|
||||
}) => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="auth-form-fields">
|
||||
<div className="field-group">
|
||||
<label className="auth-field-label">Email address</label>
|
||||
<input
|
||||
className={`auth-text-input ${errors.email ? 'has-error' : ''}`}
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => onEmailChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
placeholder="you@example.com"
|
||||
autoComplete="email"
|
||||
/>
|
||||
{errors.email ? (
|
||||
<p className="auth-field-error">{errors.email}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="field-group">
|
||||
<label className="auth-field-label">Password</label>
|
||||
<div className="auth-password-wrap">
|
||||
<input
|
||||
className={`auth-text-input ${errors.password ? 'has-error' : ''}`}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => onPasswordChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
placeholder="Enter your password"
|
||||
autoComplete={
|
||||
mode === 'login' ? 'current-password' : 'new-password'
|
||||
}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="auth-password-toggle"
|
||||
onClick={() => setShowPassword((value) => !value)}
|
||||
disabled={disabled}
|
||||
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
||||
>
|
||||
<IonIcon icon={showPassword ? eyeOffOutline : eyeOutline} />
|
||||
</button>
|
||||
</div>
|
||||
{errors.password ? (
|
||||
<p className="auth-field-error">{errors.password}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{mode === 'register' && onConfirmPasswordChange && (
|
||||
<div className="field-group">
|
||||
<label className="auth-field-label">Confirm password</label>
|
||||
<div className="auth-password-wrap">
|
||||
<input
|
||||
className={`auth-text-input ${errors.confirmPassword ? 'has-error' : ''}`}
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
value={confirmPassword}
|
||||
onChange={(e) => onConfirmPasswordChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
placeholder="Re-enter your password"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="auth-password-toggle"
|
||||
onClick={() => setShowConfirmPassword((value) => !value)}
|
||||
disabled={disabled}
|
||||
aria-label={
|
||||
showConfirmPassword
|
||||
? 'Hide confirm password'
|
||||
: 'Show confirm password'
|
||||
}
|
||||
>
|
||||
<IonIcon
|
||||
icon={showConfirmPassword ? eyeOffOutline : eyeOutline}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{errors.confirmPassword ? (
|
||||
<p className="auth-field-error">{errors.confirmPassword}</p>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthFormFields;
|
||||
@@ -1,121 +0,0 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import { camera, personOutline } from 'ionicons/icons';
|
||||
|
||||
interface AvatarPickerProps {
|
||||
previewUrl: string | null;
|
||||
onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
initials?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const AvatarPicker: React.FC<AvatarPickerProps> = ({
|
||||
previewUrl,
|
||||
onFileChange,
|
||||
initials,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleClick = () => {
|
||||
if (!disabled) {
|
||||
fileInputRef.current?.click();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="avatar-picker-container"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
margin: '8px 0 4px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={previewUrl ? 'Change photo' : 'Add photo'}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '96px',
|
||||
height: '96px',
|
||||
padding: 0,
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
opacity: disabled ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="avatar-preview-circle"
|
||||
style={{
|
||||
width: '88px',
|
||||
height: '88px',
|
||||
margin: '0 auto',
|
||||
borderRadius: '24px',
|
||||
backgroundColor: previewUrl
|
||||
? 'transparent'
|
||||
: 'rgba(109,40,217,0.10)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{previewUrl ? (
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Avatar preview"
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : initials ? (
|
||||
<span
|
||||
style={{ fontSize: '28px', fontWeight: '700', color: '#6d28d9' }}
|
||||
>
|
||||
{initials}
|
||||
</span>
|
||||
) : (
|
||||
<IonIcon
|
||||
icon={personOutline}
|
||||
style={{ fontSize: '32px', color: '#6d28d9' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '12px',
|
||||
background: '#ffffff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 8px 16px rgba(109, 40, 217, 0.15)',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={camera}
|
||||
style={{ fontSize: '20px', color: '#6d28d9' }}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={onFileChange}
|
||||
disabled={disabled}
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AvatarPicker;
|
||||
@@ -1,88 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import {
|
||||
chevronForwardOutline,
|
||||
timeOutline,
|
||||
flashOutline,
|
||||
wifiOutline,
|
||||
medkitOutline,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
interface CareAlertPillProps {
|
||||
id: string;
|
||||
type: string;
|
||||
title: string;
|
||||
severity: 'warning' | 'neutral';
|
||||
onClick: (id: string) => void;
|
||||
}
|
||||
|
||||
const CareAlertPill: React.FC<CareAlertPillProps> = ({
|
||||
id,
|
||||
type,
|
||||
title,
|
||||
severity,
|
||||
onClick,
|
||||
}) => {
|
||||
const getIconForType = () => {
|
||||
switch (type) {
|
||||
case 'electricity_low':
|
||||
return flashOutline;
|
||||
case 'airtime_expiring':
|
||||
return wifiOutline;
|
||||
case 'medication_due':
|
||||
return medkitOutline;
|
||||
default:
|
||||
return timeOutline;
|
||||
}
|
||||
};
|
||||
|
||||
const getColors = () => {
|
||||
if (severity === 'warning') {
|
||||
return { bg: 'rgba(245,158,11,0.08)', icon: '#f59e0b', text: '#111827' };
|
||||
}
|
||||
return { bg: '#ffffff', icon: '#6d28d9', text: '#111827' };
|
||||
};
|
||||
|
||||
const colors = getColors();
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => onClick(id)}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
backgroundColor: colors.bg,
|
||||
borderRadius: '24px',
|
||||
padding: '14px 16px',
|
||||
border: 'none',
|
||||
flexShrink: 0,
|
||||
maxWidth: '280px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={getIconForType()}
|
||||
style={{ fontSize: '20px', color: colors.icon, flexShrink: 0 }}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: colors.text,
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
<IonIcon
|
||||
icon={chevronForwardOutline}
|
||||
style={{ fontSize: '16px', color: '#9ca3af', marginLeft: 'auto' }}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default CareAlertPill;
|
||||
@@ -1,246 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonSkeletonText } from '@ionic/react';
|
||||
|
||||
const DashboardSkeleton: React.FC = () => {
|
||||
return (
|
||||
<div style={{ padding: '0' }}>
|
||||
{/* Top Greeting Row */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '16px 20px 12px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '48px', height: '48px', borderRadius: '50%' }}
|
||||
/>
|
||||
<div>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '18px',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '8px',
|
||||
}}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '80px', height: '14px', borderRadius: '4px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loved Ones Carousel */}
|
||||
<div
|
||||
style={{
|
||||
padding: '0 20px 6px',
|
||||
display: 'flex',
|
||||
gap: '12px',
|
||||
overflowX: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '16px',
|
||||
width: '292px',
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '14px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '48px', height: '48px', borderRadius: '16px' }}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '16px',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '4px',
|
||||
}}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '80px', height: '12px', borderRadius: '4px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '100%', height: '48px', borderRadius: '12px' }}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '48px',
|
||||
borderRadius: '999px',
|
||||
marginTop: 'auto',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '16px',
|
||||
width: '292px',
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '14px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '48px', height: '48px', borderRadius: '16px' }}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '16px',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '4px',
|
||||
}}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '80px', height: '12px', borderRadius: '4px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '100%', height: '48px', borderRadius: '12px' }}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '48px',
|
||||
borderRadius: '999px',
|
||||
marginTop: 'auto',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div style={{ padding: '0 20px', margin: '20px 0' }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '120px',
|
||||
height: '16px',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '44px', height: '44px', borderRadius: '12px' }}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '60px', height: '14px', borderRadius: '4px' }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity List */}
|
||||
<div style={{ padding: '0 20px', margin: '20px 0' }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '16px',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '8px 0',
|
||||
}}
|
||||
>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '14px 16px',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '40px', height: '40px', borderRadius: '12px' }}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '140px',
|
||||
height: '14px',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '6px',
|
||||
}}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '12px',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardSkeleton;
|
||||
@@ -1,86 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import { searchOutline, optionsOutline } from 'ionicons/icons';
|
||||
|
||||
interface ListSearchRowProps {
|
||||
value: string;
|
||||
onChange: (val: string) => void;
|
||||
placeholder?: string;
|
||||
onFilterClick?: () => void;
|
||||
showFilter?: boolean;
|
||||
}
|
||||
|
||||
const ListSearchRow: React.FC<ListSearchRowProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Search...',
|
||||
onFilterClick,
|
||||
showFilter = false,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
margin: '0 20px 12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '16px',
|
||||
padding: '0 16px',
|
||||
height: '48px',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={searchOutline}
|
||||
style={{ fontSize: '20px', color: '#9ca3af', flexShrink: 0 }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
style={{
|
||||
flex: 1,
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
padding: '0 12px',
|
||||
fontSize: '15px',
|
||||
color: '#111827',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{showFilter && (
|
||||
<button
|
||||
onClick={onFilterClick}
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '16px',
|
||||
backgroundColor: '#ffffff',
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={optionsOutline}
|
||||
style={{ fontSize: '20px', color: '#6d28d9' }}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListSearchRow;
|
||||
@@ -1,210 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import {
|
||||
chevronForwardOutline,
|
||||
checkmarkCircleOutline,
|
||||
timeOutline,
|
||||
closeCircleOutline,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
export interface OrderSummary {
|
||||
id: string;
|
||||
recipientName: string;
|
||||
serviceType: string;
|
||||
merchantName?: string;
|
||||
amount: number;
|
||||
amountLabel?: string;
|
||||
status: string;
|
||||
createdAt: string;
|
||||
avatarUrl?: string | null;
|
||||
}
|
||||
|
||||
interface OrderSummaryCardProps {
|
||||
order: OrderSummary;
|
||||
onClick: (id: string) => void;
|
||||
}
|
||||
|
||||
const OrderSummaryCard: React.FC<OrderSummaryCardProps> = ({
|
||||
order,
|
||||
onClick,
|
||||
}) => {
|
||||
const getStatusDisplay = (status: string) => {
|
||||
switch (status) {
|
||||
case 'paid':
|
||||
return {
|
||||
text: 'Paid',
|
||||
color: '#3b82f6',
|
||||
bg: 'rgba(59,130,246,0.1)',
|
||||
icon: checkmarkCircleOutline,
|
||||
};
|
||||
case 'ready_for_redemption':
|
||||
return {
|
||||
text: 'Ready',
|
||||
color: '#16a34a',
|
||||
bg: 'rgba(22,163,74,0.1)',
|
||||
icon: checkmarkCircleOutline,
|
||||
};
|
||||
case 'redeemed':
|
||||
return {
|
||||
text: 'Redeemed',
|
||||
color: '#16a34a',
|
||||
bg: 'rgba(22,163,74,0.1)',
|
||||
icon: checkmarkCircleOutline,
|
||||
};
|
||||
case 'delivered':
|
||||
return {
|
||||
text: 'Delivered',
|
||||
color: '#16a34a',
|
||||
bg: 'rgba(22,163,74,0.1)',
|
||||
icon: checkmarkCircleOutline,
|
||||
};
|
||||
case 'pending_payment':
|
||||
return {
|
||||
text: 'Pending',
|
||||
color: '#f59e0b',
|
||||
bg: 'rgba(245,158,11,0.1)',
|
||||
icon: timeOutline,
|
||||
};
|
||||
case 'failed':
|
||||
case 'cancelled':
|
||||
return {
|
||||
text: 'Failed',
|
||||
color: '#ef4444',
|
||||
bg: 'rgba(239,68,68,0.1)',
|
||||
icon: closeCircleOutline,
|
||||
};
|
||||
default:
|
||||
return {
|
||||
text: status,
|
||||
color: '#6b7280',
|
||||
bg: '#f3f4f6',
|
||||
icon: timeOutline,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const statusDisplay = getStatusDisplay(order.status);
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => onClick(order.id)}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '16px',
|
||||
margin: '0 20px 12px',
|
||||
gap: '14px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '16px',
|
||||
backgroundColor: 'rgba(109,40,217,0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{order.avatarUrl ? (
|
||||
<img
|
||||
src={order.avatarUrl}
|
||||
alt={order.recipientName}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
style={{ fontSize: '18px', fontWeight: '700', color: '#6d28d9' }}
|
||||
>
|
||||
{order.recipientName.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{order.serviceType} for {order.recipientName}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
marginTop: '2px',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{order.merchantName || 'Service provider'}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '400',
|
||||
color: '#9ca3af',
|
||||
marginTop: '4px',
|
||||
}}
|
||||
>
|
||||
{new Date(order.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-end',
|
||||
gap: '6px',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: '15px', fontWeight: '700', color: '#111827' }}>
|
||||
{order.amountLabel ?? `${order.amount.toFixed(2)}`}
|
||||
</span>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
backgroundColor: statusDisplay.bg,
|
||||
padding: '2px 8px',
|
||||
borderRadius: '999px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
color: statusDisplay.color,
|
||||
}}
|
||||
>
|
||||
{statusDisplay.text}
|
||||
</span>
|
||||
<IonIcon
|
||||
icon={statusDisplay.icon}
|
||||
style={{ fontSize: '12px', color: statusDisplay.color }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<IonIcon
|
||||
icon={chevronForwardOutline}
|
||||
style={{ fontSize: '16px', color: '#9ca3af', marginLeft: '4px' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderSummaryCard;
|
||||
@@ -1,82 +0,0 @@
|
||||
import React, { useRef } from 'react';
|
||||
|
||||
interface OtpInputSlotsProps {
|
||||
value: string[];
|
||||
onChange: (index: number, val: string) => void;
|
||||
onPaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const OtpInputSlots: React.FC<OtpInputSlotsProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
onPaste,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
|
||||
|
||||
const handleKeyDown = (
|
||||
index: number,
|
||||
e: React.KeyboardEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.key === 'Backspace' && value[index] === '') {
|
||||
if (index > 0) {
|
||||
inputRefs.current[index - 1]?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleInput = (
|
||||
index: number,
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const val = e.target.value.replace(/[^0-9]/g, '');
|
||||
const lastChar = val.slice(-1);
|
||||
|
||||
onChange(index, lastChar);
|
||||
|
||||
if (lastChar && index < 5) {
|
||||
inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="otp-input-row"
|
||||
style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}
|
||||
>
|
||||
{[0, 1, 2, 3, 4, 5].map((index) => (
|
||||
<input
|
||||
key={index}
|
||||
ref={(el) => {
|
||||
inputRefs.current[index] = el;
|
||||
}}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxLength={1}
|
||||
value={value[index] || ''}
|
||||
onChange={(e) => handleInput(index, e)}
|
||||
onKeyDown={(e) => handleKeyDown(index, e)}
|
||||
onPaste={onPaste}
|
||||
disabled={disabled}
|
||||
style={{
|
||||
width: '44px',
|
||||
height: '56px',
|
||||
textAlign: 'center',
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
color: value[index] ? '#6d28d9' : '#111827',
|
||||
backgroundColor: value[index] ? 'rgba(109,40,217,0.08)' : '#fafafa',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
outline: 'none',
|
||||
}}
|
||||
className="otp-slot"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OtpInputSlots;
|
||||
@@ -0,0 +1,101 @@
|
||||
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;
|
||||
@@ -1,37 +1,29 @@
|
||||
import React from 'react';
|
||||
import { Route, Redirect } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import SplashPage from '../pages/SplashPage';
|
||||
import { Redirect, Route, RouteProps } from 'react-router-dom';
|
||||
import { IonLoading } from '@ionic/react';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
|
||||
interface Props {
|
||||
component: React.ComponentType<any>;
|
||||
path: string | string[];
|
||||
exact?: boolean;
|
||||
}
|
||||
|
||||
const BYPASS_AUTH = false;
|
||||
|
||||
const ProtectedRouteLoader: React.FC = () => (
|
||||
<SplashPage title="Send support to loved ones from anywhere" />
|
||||
);
|
||||
type Props = RouteProps;
|
||||
|
||||
const ProtectedRoute: React.FC<Props> = ({ component: Component, ...rest }) => {
|
||||
const { user, profile, profileStatus } = useAuth();
|
||||
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" />;
|
||||
}
|
||||
if (profileStatus === 'loading') {
|
||||
return <ProtectedRouteLoader />;
|
||||
}
|
||||
if (profileStatus === 'missing') {
|
||||
return <Redirect to="/setup-profile" />;
|
||||
}
|
||||
return <Component {...props} />;
|
||||
|
||||
const RouteComponent = Component as React.ComponentType<any>;
|
||||
return <RouteComponent {...props} />;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import {
|
||||
cartOutline,
|
||||
medkitOutline,
|
||||
phonePortraitOutline,
|
||||
flashOutline,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
interface QuickSupportActionCardProps {
|
||||
serviceType: 'grocery' | 'medication' | 'airtime' | 'electricity';
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const QuickSupportActionCard: React.FC<QuickSupportActionCardProps> = ({
|
||||
serviceType,
|
||||
label,
|
||||
onClick,
|
||||
}) => {
|
||||
const getIconAndColor = () => {
|
||||
switch (serviceType) {
|
||||
case 'grocery':
|
||||
return {
|
||||
icon: cartOutline,
|
||||
color: '#6d28d9',
|
||||
bg: 'rgba(109,40,217,0.1)',
|
||||
};
|
||||
case 'medication':
|
||||
return {
|
||||
icon: medkitOutline,
|
||||
color: '#ef4444',
|
||||
bg: 'rgba(239,68,68,0.1)',
|
||||
};
|
||||
case 'airtime':
|
||||
return {
|
||||
icon: phonePortraitOutline,
|
||||
color: '#3b82f6',
|
||||
bg: 'rgba(59,130,246,0.1)',
|
||||
};
|
||||
case 'electricity':
|
||||
return {
|
||||
icon: flashOutline,
|
||||
color: '#f59e0b',
|
||||
bg: 'rgba(245,158,11,0.1)',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: cartOutline,
|
||||
color: '#6d28d9',
|
||||
bg: 'rgba(109,40,217,0.1)',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const { icon, color, bg } = getIconAndColor();
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '16px',
|
||||
border: 'none',
|
||||
width: '100%',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '44px',
|
||||
height: '44px',
|
||||
borderRadius: '12px',
|
||||
backgroundColor: bg,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon icon={icon} style={{ fontSize: '20px', color }} />
|
||||
</div>
|
||||
<span style={{ fontSize: '14px', fontWeight: '700', color: '#111827' }}>
|
||||
{label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuickSupportActionCard;
|
||||
@@ -1,239 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import {
|
||||
cartOutline,
|
||||
medkitOutline,
|
||||
flashOutline,
|
||||
timeOutline,
|
||||
checkmarkCircleOutline,
|
||||
ellipsisVertical,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
export interface CareStatus {
|
||||
serviceType: 'grocery' | 'medication' | 'electricity' | 'airtime';
|
||||
label: string;
|
||||
statusText: string;
|
||||
isOk: boolean;
|
||||
}
|
||||
|
||||
export interface RecipientSummary {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
location: string;
|
||||
avatarUrl: string | null;
|
||||
statuses: CareStatus[];
|
||||
}
|
||||
|
||||
interface RecipientCareCardProps {
|
||||
recipient: RecipientSummary;
|
||||
onSendSupport: (id: string) => void;
|
||||
onMenuClick?: (id: string) => void;
|
||||
}
|
||||
|
||||
const getIconForService = (type: string) => {
|
||||
switch (type) {
|
||||
case 'grocery':
|
||||
return cartOutline;
|
||||
case 'medication':
|
||||
return medkitOutline;
|
||||
case 'electricity':
|
||||
return flashOutline;
|
||||
default:
|
||||
return cartOutline;
|
||||
}
|
||||
};
|
||||
|
||||
const getColorForService = (type: string) => {
|
||||
switch (type) {
|
||||
case 'grocery':
|
||||
return '#6d28d9';
|
||||
case 'medication':
|
||||
return '#ef4444';
|
||||
case 'electricity':
|
||||
return '#f59e0b';
|
||||
default:
|
||||
return '#3b82f6';
|
||||
}
|
||||
};
|
||||
|
||||
const RecipientCareCard: React.FC<RecipientCareCardProps> = ({
|
||||
recipient,
|
||||
onSendSupport,
|
||||
onMenuClick,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '16px',
|
||||
width: '292px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '14px',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '16px',
|
||||
backgroundColor: 'rgba(109,40,217,0.1)',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{recipient.avatarUrl ? (
|
||||
<img
|
||||
src={recipient.avatarUrl}
|
||||
alt={recipient.firstName}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: '700',
|
||||
color: '#6d28d9',
|
||||
}}
|
||||
>
|
||||
{recipient.firstName.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
||||
<h3
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '16px',
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
}}
|
||||
>
|
||||
{recipient.firstName}
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#16a34a',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
margin: '2px 0 0',
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
{recipient.location}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onMenuClick && onMenuClick(recipient.id)}
|
||||
style={{ background: 'transparent', border: 'none', padding: '4px' }}
|
||||
>
|
||||
<IonIcon
|
||||
icon={ellipsisVertical}
|
||||
style={{ fontSize: '20px', color: '#6b7280' }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||
{recipient.statuses.map((status, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#fafafa',
|
||||
borderRadius: '12px',
|
||||
padding: '12px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<IonIcon
|
||||
icon={getIconForService(status.serviceType)}
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
color: getColorForService(status.serviceType),
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
}}
|
||||
>
|
||||
{status.label}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '500',
|
||||
color: status.isOk ? '#16a34a' : '#f59e0b',
|
||||
marginTop: '2px',
|
||||
}}
|
||||
>
|
||||
{status.statusText}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<IonIcon
|
||||
icon={status.isOk ? checkmarkCircleOutline : timeOutline}
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
color: status.isOk ? '#16a34a' : '#f59e0b',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => onSendSupport(recipient.id)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '14px',
|
||||
backgroundColor: '#6d28d9',
|
||||
color: '#ffffff',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '700',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '8px',
|
||||
marginTop: 'auto',
|
||||
}}
|
||||
>
|
||||
<IonIcon icon={cartOutline} style={{ fontSize: '18px' }} />
|
||||
Send Again
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecipientCareCard;
|
||||
@@ -1,121 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import { chevronForwardOutline } from 'ionicons/icons';
|
||||
|
||||
export interface RecipientListItem {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
relationship: string;
|
||||
location: string;
|
||||
lastActivityText?: string;
|
||||
avatarUrl: string | null;
|
||||
}
|
||||
|
||||
interface RecipientListCardProps {
|
||||
recipient: RecipientListItem;
|
||||
onClick: (id: string) => void;
|
||||
}
|
||||
|
||||
const RecipientListCard: React.FC<RecipientListCardProps> = ({
|
||||
recipient,
|
||||
onClick,
|
||||
}) => {
|
||||
const [imageFailed, setImageFailed] = useState(false);
|
||||
const shouldShowAvatar = Boolean(recipient.avatarUrl) && !imageFailed;
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => onClick(recipient.id)}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '16px',
|
||||
margin: '0 20px 12px',
|
||||
gap: '14px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '52px',
|
||||
height: '52px',
|
||||
borderRadius: '16px',
|
||||
backgroundColor: 'rgba(109,40,217,0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{shouldShowAvatar ? (
|
||||
<img
|
||||
src={recipient.avatarUrl ?? ''}
|
||||
alt={recipient.firstName}
|
||||
onError={() => setImageFailed(true)}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
style={{ fontSize: '20px', fontWeight: '700', color: '#6d28d9' }}
|
||||
>
|
||||
{recipient.firstName.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<h3
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '16px',
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{recipient.firstName} {recipient.lastName}
|
||||
</h3>
|
||||
<span
|
||||
style={{ fontSize: '13px', fontWeight: '600', color: '#6d28d9' }}
|
||||
>
|
||||
{recipient.relationship}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
margin: '4px 0 0',
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
{recipient.location}
|
||||
</div>
|
||||
{recipient.lastActivityText && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: '2px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
Last activity: {recipient.lastActivityText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<IonIcon
|
||||
icon={chevronForwardOutline}
|
||||
style={{ fontSize: '18px', color: '#9ca3af', flexShrink: 0 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecipientListCard;
|
||||
@@ -1,115 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonIcon, IonToggle } from '@ionic/react';
|
||||
import { chevronForwardOutline } from 'ionicons/icons';
|
||||
|
||||
interface SettingsRowProps {
|
||||
icon: string;
|
||||
iconColor?: string;
|
||||
iconBg?: string;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
onClick?: () => void;
|
||||
type?: 'link' | 'toggle' | 'button';
|
||||
checked?: boolean;
|
||||
onToggle?: (checked: boolean) => void;
|
||||
destructive?: boolean;
|
||||
}
|
||||
|
||||
const SettingsRow: React.FC<SettingsRowProps> = ({
|
||||
icon,
|
||||
iconColor = '#6d28d9',
|
||||
iconBg = 'rgba(109,40,217,0.1)',
|
||||
title,
|
||||
subtitle,
|
||||
onClick,
|
||||
type = 'link',
|
||||
checked = false,
|
||||
onToggle,
|
||||
destructive = false,
|
||||
}) => {
|
||||
const content = (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '12px',
|
||||
backgroundColor: destructive ? 'rgba(239,68,68,0.1)' : iconBg,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={icon}
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
color: destructive ? '#ef4444' : iconColor,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: destructive ? '#ef4444' : '#111827',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
{subtitle && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
marginTop: '2px',
|
||||
}}
|
||||
>
|
||||
{subtitle}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{type === 'link' && (
|
||||
<IonIcon
|
||||
icon={chevronForwardOutline}
|
||||
style={{ fontSize: '18px', color: '#9ca3af' }}
|
||||
/>
|
||||
)}
|
||||
{type === 'toggle' && (
|
||||
<IonToggle
|
||||
checked={checked}
|
||||
onIonChange={(e) => onToggle && onToggle(e.detail.checked)}
|
||||
style={{ padding: 0 }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const containerStyle: React.CSSProperties = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '12px 16px',
|
||||
gap: '14px',
|
||||
minHeight: '56px',
|
||||
cursor: onClick || type === 'toggle' ? 'pointer' : 'default',
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
};
|
||||
|
||||
if (type === 'link' || type === 'button') {
|
||||
return (
|
||||
<button onClick={onClick} style={containerStyle}>
|
||||
{content}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return <div style={containerStyle}>{content}</div>;
|
||||
};
|
||||
|
||||
export default SettingsRow;
|
||||
@@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
interface SocialAuthButtonProps {
|
||||
provider: 'google' | 'apple';
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const SocialAuthButton: React.FC<SocialAuthButtonProps> = ({
|
||||
provider,
|
||||
label,
|
||||
onClick,
|
||||
disabled = false,
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="social-auth-button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
<span className="social-auth-button__icon" aria-hidden="true">
|
||||
{provider === 'google' && (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
fill="#4285F4"
|
||||
/>
|
||||
<path
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
fill="#34A853"
|
||||
/>
|
||||
<path
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
|
||||
fill="#FBBC05"
|
||||
/>
|
||||
<path
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
fill="#EA4335"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{provider === 'apple' && (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
<span className="social-auth-button__label">Continue with {label}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default SocialAuthButton;
|
||||
@@ -0,0 +1,97 @@
|
||||
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;
|
||||
};
|
||||
@@ -1,313 +0,0 @@
|
||||
import React, {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import SplashPage from '../pages/SplashPage';
|
||||
import type { User } from '@supabase/supabase-js';
|
||||
import { supabase } from '../supabase';
|
||||
import {
|
||||
buildCacheKey,
|
||||
readCache,
|
||||
writeCache,
|
||||
clearUserCache,
|
||||
} from '../utils/localCache';
|
||||
|
||||
export interface Profile {
|
||||
id: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
full_name: string;
|
||||
phone: string;
|
||||
country_of_residence: string;
|
||||
avatar_path: string | null;
|
||||
fcm_token: string | null;
|
||||
notification_push_enabled: boolean;
|
||||
notification_email_enabled: boolean;
|
||||
notification_sms_enabled: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export type ProfileStatus = 'idle' | 'loading' | 'loaded' | 'missing' | 'error';
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
profile: Profile | null;
|
||||
profileStatus: ProfileStatus;
|
||||
refreshProfile: () => Promise<Profile | null>;
|
||||
setProfile: (profile: Profile | null) => void;
|
||||
signOut: () => Promise<void>;
|
||||
}
|
||||
|
||||
const BYPASS_AUTH = false;
|
||||
|
||||
const AuthContext = createContext<AuthContextType>({
|
||||
user: null,
|
||||
profile: null,
|
||||
profileStatus: BYPASS_AUTH ? 'idle' : 'loading',
|
||||
refreshProfile: async () => null,
|
||||
setProfile: () => {},
|
||||
signOut: async () => {},
|
||||
});
|
||||
|
||||
const withTimeout = async <T,>(
|
||||
request: PromiseLike<T>,
|
||||
timeoutMs: number,
|
||||
label: string
|
||||
): Promise<T> => {
|
||||
let timeoutId: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
const timeout = new Promise<never>((_, reject) => {
|
||||
timeoutId = setTimeout(() => {
|
||||
reject(
|
||||
new Error(
|
||||
`${label} timed out. Please check your connection and try again.`
|
||||
)
|
||||
);
|
||||
}, timeoutMs);
|
||||
});
|
||||
|
||||
try {
|
||||
return await Promise.race([Promise.resolve(request), timeout]);
|
||||
} finally {
|
||||
if (timeoutId) clearTimeout(timeoutId);
|
||||
}
|
||||
};
|
||||
|
||||
export const useAuth = () => useContext(AuthContext);
|
||||
|
||||
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [profile, setProfileState] = useState<Profile | null>(null);
|
||||
const [profileStatus, setProfileStatus] = useState<ProfileStatus>(
|
||||
BYPASS_AUTH ? 'idle' : 'loading'
|
||||
);
|
||||
const [initializing, setInitializing] = useState(!BYPASS_AUTH);
|
||||
const activeProfileFetchRef = useRef(0);
|
||||
const mountedRef = useRef(false);
|
||||
const currentUserIdRef = useRef<string | null>(null);
|
||||
|
||||
const applyProfile = useCallback((nextProfile: Profile | null) => {
|
||||
if (!mountedRef.current) return;
|
||||
setProfileState(nextProfile);
|
||||
setProfileStatus(nextProfile ? 'loaded' : 'missing');
|
||||
}, []);
|
||||
|
||||
const setProfile = useCallback(
|
||||
(nextProfile: Profile | null) => {
|
||||
activeProfileFetchRef.current += 1;
|
||||
applyProfile(nextProfile);
|
||||
},
|
||||
[applyProfile]
|
||||
);
|
||||
|
||||
const fetchProfile = useCallback(
|
||||
async (
|
||||
userId: string,
|
||||
options?: { showLoading?: boolean }
|
||||
): Promise<Profile | null> => {
|
||||
const fetchId = activeProfileFetchRef.current + 1;
|
||||
activeProfileFetchRef.current = fetchId;
|
||||
|
||||
if ((options?.showLoading ?? true) && mountedRef.current) {
|
||||
setProfileStatus('loading');
|
||||
}
|
||||
|
||||
const cacheKey = buildCacheKey(userId, 'profile');
|
||||
try {
|
||||
const cachedProfile = await readCache<Profile>(cacheKey);
|
||||
if (
|
||||
cachedProfile &&
|
||||
mountedRef.current &&
|
||||
fetchId === activeProfileFetchRef.current &&
|
||||
currentUserIdRef.current === userId
|
||||
) {
|
||||
applyProfile(cachedProfile);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[AuthProvider] Failed to read cached profile', err);
|
||||
}
|
||||
|
||||
try {
|
||||
const { data, error } = await withTimeout(
|
||||
supabase.from('profiles').select('*').eq('id', userId).maybeSingle(),
|
||||
8000,
|
||||
'Profile loading'
|
||||
);
|
||||
|
||||
if (
|
||||
!mountedRef.current ||
|
||||
fetchId !== activeProfileFetchRef.current ||
|
||||
currentUserIdRef.current !== userId
|
||||
) {
|
||||
return data ? (data as Profile) : null;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
console.error('[AuthProvider] Failed to fetch profile', error);
|
||||
setProfileState(null);
|
||||
setProfileStatus('error');
|
||||
return null;
|
||||
}
|
||||
|
||||
const nextProfile = data ? (data as Profile) : null;
|
||||
applyProfile(nextProfile);
|
||||
if (nextProfile) {
|
||||
void writeCache(cacheKey, nextProfile);
|
||||
}
|
||||
return nextProfile;
|
||||
} catch (error) {
|
||||
if (
|
||||
mountedRef.current &&
|
||||
fetchId === activeProfileFetchRef.current &&
|
||||
currentUserIdRef.current === userId
|
||||
) {
|
||||
console.error('[AuthProvider] Profile fetch crashed', error);
|
||||
setProfileState(null);
|
||||
setProfileStatus('error');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
[applyProfile]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
mountedRef.current = true;
|
||||
|
||||
if (BYPASS_AUTH) {
|
||||
setInitializing(false);
|
||||
setProfileStatus('idle');
|
||||
return () => {
|
||||
mountedRef.current = false;
|
||||
activeProfileFetchRef.current += 1;
|
||||
};
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
supabase.auth
|
||||
.getSession()
|
||||
.then(async ({ data }) => {
|
||||
if (cancelled || !mountedRef.current) return;
|
||||
const currentUser = data.session?.user ?? null;
|
||||
|
||||
const keepSignedIn = localStorage.getItem('kumusha_keep_signed_in');
|
||||
if (currentUser && keepSignedIn === 'false') {
|
||||
currentUserIdRef.current = null;
|
||||
setUser(null);
|
||||
setProfileState(null);
|
||||
setProfileStatus('idle');
|
||||
await clearUserCache(currentUser.id);
|
||||
await supabase.auth.signOut();
|
||||
if (!cancelled && mountedRef.current) {
|
||||
setInitializing(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
currentUserIdRef.current = currentUser?.id ?? null;
|
||||
setUser(currentUser);
|
||||
if (currentUser) {
|
||||
await fetchProfile(currentUser.id, { showLoading: false });
|
||||
} else {
|
||||
setProfileState(null);
|
||||
setProfileStatus('idle');
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('[AuthProvider] Failed to initialise session', error);
|
||||
if (!cancelled && mountedRef.current) {
|
||||
currentUserIdRef.current = null;
|
||||
setUser(null);
|
||||
setProfileState(null);
|
||||
setProfileStatus('missing');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled && mountedRef.current) {
|
||||
setInitializing(false);
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
data: { subscription },
|
||||
} = supabase.auth.onAuthStateChange(async (_event, session) => {
|
||||
const nextUser = session?.user ?? null;
|
||||
if (!mountedRef.current) return;
|
||||
const previousUserId = currentUserIdRef.current;
|
||||
currentUserIdRef.current = nextUser?.id ?? null;
|
||||
|
||||
if (nextUser) {
|
||||
if (nextUser.id !== previousUserId) {
|
||||
setProfileState(null);
|
||||
setProfileStatus('loading');
|
||||
}
|
||||
setUser(nextUser);
|
||||
await fetchProfile(nextUser.id, { showLoading: false });
|
||||
} else {
|
||||
activeProfileFetchRef.current += 1;
|
||||
setUser(null);
|
||||
setProfileState(null);
|
||||
setProfileStatus('idle');
|
||||
if (previousUserId) {
|
||||
await clearUserCache(previousUserId);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
mountedRef.current = false;
|
||||
activeProfileFetchRef.current += 1;
|
||||
subscription.unsubscribe();
|
||||
};
|
||||
}, [fetchProfile]);
|
||||
|
||||
const signOut = useCallback(async () => {
|
||||
activeProfileFetchRef.current += 1;
|
||||
const currentUserId = currentUserIdRef.current;
|
||||
currentUserIdRef.current = null;
|
||||
setUser(null);
|
||||
setProfileState(null);
|
||||
setProfileStatus('idle');
|
||||
if (currentUserId) {
|
||||
await clearUserCache(currentUserId);
|
||||
}
|
||||
localStorage.removeItem('kumusha_keep_signed_in');
|
||||
await supabase.auth.signOut();
|
||||
}, []);
|
||||
|
||||
const refreshProfile = useCallback(() => {
|
||||
return user
|
||||
? fetchProfile(user.id, { showLoading: false })
|
||||
: Promise.resolve(null);
|
||||
}, [fetchProfile, user]);
|
||||
|
||||
const contextValue = useMemo(
|
||||
() => ({
|
||||
user,
|
||||
profile,
|
||||
profileStatus,
|
||||
refreshProfile,
|
||||
setProfile,
|
||||
signOut,
|
||||
}),
|
||||
[profile, profileStatus, refreshProfile, setProfile, signOut, user]
|
||||
);
|
||||
|
||||
if (initializing) {
|
||||
return <SplashPage title="Send support to loved ones from anywhere" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
+158
-421
@@ -14,538 +14,275 @@ export type Database = {
|
||||
}
|
||||
public: {
|
||||
Tables: {
|
||||
activity_events: {
|
||||
addresses: {
|
||||
Row: {
|
||||
amount: number | null
|
||||
address_line: string
|
||||
created_at: string
|
||||
event_at: string
|
||||
event_type: string
|
||||
id: string
|
||||
metadata: Json
|
||||
order_id: string | null
|
||||
recipient_id: string | null
|
||||
subtitle: string
|
||||
title: string
|
||||
is_default: boolean
|
||||
label: string
|
||||
notes: string | null
|
||||
phone: string
|
||||
recipient_name: string
|
||||
user_id: string
|
||||
}
|
||||
Insert: {
|
||||
amount?: number | null
|
||||
address_line: string
|
||||
created_at?: string
|
||||
event_at?: string
|
||||
event_type: string
|
||||
id?: string
|
||||
metadata?: Json
|
||||
order_id?: string | null
|
||||
recipient_id?: string | null
|
||||
subtitle: string
|
||||
title: string
|
||||
is_default?: boolean
|
||||
label: string
|
||||
notes?: string | null
|
||||
phone: string
|
||||
recipient_name: string
|
||||
user_id: string
|
||||
}
|
||||
Update: {
|
||||
amount?: number | null
|
||||
address_line?: string
|
||||
created_at?: string
|
||||
event_at?: string
|
||||
event_type?: string
|
||||
id?: string
|
||||
metadata?: Json
|
||||
order_id?: string | null
|
||||
recipient_id?: string | null
|
||||
subtitle?: string
|
||||
title?: string
|
||||
is_default?: boolean
|
||||
label?: string
|
||||
notes?: string | null
|
||||
phone?: string
|
||||
recipient_name?: string
|
||||
user_id?: string
|
||||
}
|
||||
Relationships: []
|
||||
}
|
||||
care_alerts: {
|
||||
order_items: {
|
||||
Row: {
|
||||
alert_type: string
|
||||
body: string
|
||||
created_at: string
|
||||
dismissed_at: string | null
|
||||
due_at: string | null
|
||||
id: string
|
||||
recipient_id: string
|
||||
schedule_id: string | null
|
||||
service_type: string | null
|
||||
severity: string
|
||||
title: string
|
||||
user_id: string
|
||||
order_id: string
|
||||
product_id: string
|
||||
product_name: string
|
||||
quantity: number
|
||||
unit_price: number
|
||||
}
|
||||
Insert: {
|
||||
alert_type: string
|
||||
body: string
|
||||
created_at?: string
|
||||
dismissed_at?: string | null
|
||||
due_at?: string | null
|
||||
id?: string
|
||||
recipient_id: string
|
||||
schedule_id?: string | null
|
||||
service_type?: string | null
|
||||
severity: string
|
||||
title: string
|
||||
user_id: string
|
||||
order_id: string
|
||||
product_id: string
|
||||
product_name: string
|
||||
quantity: number
|
||||
unit_price: number
|
||||
}
|
||||
Update: {
|
||||
alert_type?: string
|
||||
body?: string
|
||||
created_at?: string
|
||||
dismissed_at?: string | null
|
||||
due_at?: string | null
|
||||
id?: string
|
||||
recipient_id?: string
|
||||
schedule_id?: string | null
|
||||
service_type?: string | null
|
||||
severity?: string
|
||||
title?: string
|
||||
user_id?: string
|
||||
order_id?: string
|
||||
product_id?: string
|
||||
product_name?: string
|
||||
quantity?: number
|
||||
unit_price?: number
|
||||
}
|
||||
Relationships: [
|
||||
{
|
||||
foreignKeyName: "care_alerts_schedule_id_fkey"
|
||||
columns: ["schedule_id"]
|
||||
foreignKeyName: "order_items_order_id_fkey"
|
||||
columns: ["order_id"]
|
||||
isOneToOne: false
|
||||
referencedRelation: "support_schedules"
|
||||
referencedRelation: "orders"
|
||||
referencedColumns: ["id"]
|
||||
},
|
||||
]
|
||||
}
|
||||
merchants: {
|
||||
orders: {
|
||||
Row: {
|
||||
branch_name: string | null
|
||||
city: string
|
||||
country: string
|
||||
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
|
||||
is_active: boolean
|
||||
merchant_type: string
|
||||
name: string
|
||||
item_count: number
|
||||
order_number: string
|
||||
status: string
|
||||
subtotal: number
|
||||
total: number
|
||||
user_id: string | null
|
||||
}
|
||||
Insert: {
|
||||
branch_name?: string | null
|
||||
city: string
|
||||
country: string
|
||||
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
|
||||
is_active?: boolean
|
||||
merchant_type: string
|
||||
name: string
|
||||
item_count?: number
|
||||
order_number: string
|
||||
status?: string
|
||||
subtotal?: number
|
||||
total?: number
|
||||
user_id?: string | null
|
||||
}
|
||||
Update: {
|
||||
branch_name?: string | null
|
||||
city?: string
|
||||
country?: string
|
||||
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
|
||||
is_active?: boolean
|
||||
merchant_type?: string
|
||||
name?: string
|
||||
}
|
||||
Relationships: []
|
||||
}
|
||||
notifications: {
|
||||
Row: {
|
||||
body: string
|
||||
created_at: string
|
||||
id: string
|
||||
order_id: string | null
|
||||
priority: string
|
||||
read_at: string | null
|
||||
recipient_id: string | null
|
||||
title: string
|
||||
type: string
|
||||
user_id: string
|
||||
voucher_id: string | null
|
||||
}
|
||||
Insert: {
|
||||
body: string
|
||||
created_at?: string
|
||||
id?: string
|
||||
order_id?: string | null
|
||||
priority: string
|
||||
read_at?: string | null
|
||||
recipient_id?: string | null
|
||||
title: string
|
||||
type: string
|
||||
user_id: string
|
||||
voucher_id?: string | null
|
||||
}
|
||||
Update: {
|
||||
body?: string
|
||||
created_at?: string
|
||||
id?: string
|
||||
order_id?: string | null
|
||||
priority?: string
|
||||
read_at?: string | null
|
||||
recipient_id?: string | null
|
||||
title?: string
|
||||
type?: string
|
||||
user_id?: string
|
||||
voucher_id?: string | null
|
||||
item_count?: number
|
||||
order_number?: string
|
||||
status?: string
|
||||
subtotal?: number
|
||||
total?: number
|
||||
user_id?: string | null
|
||||
}
|
||||
Relationships: [
|
||||
{
|
||||
foreignKeyName: "notifications_voucher_id_fkey"
|
||||
columns: ["voucher_id"]
|
||||
foreignKeyName: "orders_address_id_fkey"
|
||||
columns: ["address_id"]
|
||||
isOneToOne: false
|
||||
referencedRelation: "vouchers"
|
||||
referencedRelation: "addresses"
|
||||
referencedColumns: ["id"]
|
||||
},
|
||||
]
|
||||
}
|
||||
payment_methods: {
|
||||
Row: {
|
||||
brand: string | null
|
||||
brand: string
|
||||
cardholder_name: string | null
|
||||
created_at: string
|
||||
expiry_month: number | null
|
||||
expiry_year: number | null
|
||||
expiry_month: number
|
||||
expiry_year: number
|
||||
id: string
|
||||
is_default: boolean
|
||||
last4: string | null
|
||||
provider: string
|
||||
last4: string
|
||||
user_id: string
|
||||
}
|
||||
Insert: {
|
||||
brand?: string | null
|
||||
brand: string
|
||||
cardholder_name?: string | null
|
||||
created_at?: string
|
||||
expiry_month?: number | null
|
||||
expiry_year?: number | null
|
||||
expiry_month: number
|
||||
expiry_year: number
|
||||
id?: string
|
||||
is_default?: boolean
|
||||
last4?: string | null
|
||||
provider: string
|
||||
last4: string
|
||||
user_id: string
|
||||
}
|
||||
Update: {
|
||||
brand?: string | null
|
||||
brand?: string
|
||||
cardholder_name?: string | null
|
||||
created_at?: string
|
||||
expiry_month?: number | null
|
||||
expiry_year?: number | null
|
||||
expiry_month?: number
|
||||
expiry_year?: number
|
||||
id?: string
|
||||
is_default?: boolean
|
||||
last4?: string | null
|
||||
provider?: string
|
||||
last4?: string
|
||||
user_id?: string
|
||||
}
|
||||
Relationships: []
|
||||
}
|
||||
profiles: {
|
||||
Row: {
|
||||
avatar_path: string | null
|
||||
country_of_residence: string
|
||||
created_at: string
|
||||
fcm_token: string | null
|
||||
first_name: string
|
||||
full_name: string
|
||||
full_name: string | null
|
||||
id: string
|
||||
last_name: string
|
||||
notification_email_enabled: boolean
|
||||
notification_push_enabled: boolean
|
||||
notification_sms_enabled: boolean
|
||||
phone: string
|
||||
is_admin: boolean
|
||||
phone: string | null
|
||||
updated_at: string
|
||||
}
|
||||
Insert: {
|
||||
avatar_path?: string | null
|
||||
country_of_residence: string
|
||||
created_at?: string
|
||||
fcm_token?: string | null
|
||||
first_name: string
|
||||
full_name: string
|
||||
full_name?: string | null
|
||||
id: string
|
||||
last_name: string
|
||||
notification_email_enabled?: boolean
|
||||
notification_push_enabled?: boolean
|
||||
notification_sms_enabled?: boolean
|
||||
phone: string
|
||||
is_admin?: boolean
|
||||
phone?: string | null
|
||||
updated_at?: string
|
||||
}
|
||||
Update: {
|
||||
avatar_path?: string | null
|
||||
country_of_residence?: string
|
||||
created_at?: string
|
||||
fcm_token?: string | null
|
||||
first_name?: string
|
||||
full_name?: string
|
||||
full_name?: string | null
|
||||
id?: string
|
||||
last_name?: string
|
||||
notification_email_enabled?: boolean
|
||||
notification_push_enabled?: boolean
|
||||
notification_sms_enabled?: boolean
|
||||
phone?: string
|
||||
is_admin?: boolean
|
||||
phone?: string | null
|
||||
updated_at?: string
|
||||
}
|
||||
Relationships: []
|
||||
}
|
||||
recipients: {
|
||||
Row: {
|
||||
archived_at: string | null
|
||||
city: string
|
||||
country: string
|
||||
created_at: string
|
||||
first_name: string
|
||||
id: string
|
||||
is_active: boolean
|
||||
is_archived: boolean
|
||||
last_name: string
|
||||
mobile_number: string
|
||||
photo_path: string | null
|
||||
pinned_at: string | null
|
||||
relationship: string
|
||||
sort_order: number
|
||||
updated_at: string
|
||||
user_id: string
|
||||
}
|
||||
Insert: {
|
||||
archived_at?: string | null
|
||||
city: string
|
||||
country: string
|
||||
created_at?: string
|
||||
first_name: string
|
||||
id?: string
|
||||
is_active?: boolean
|
||||
is_archived?: boolean
|
||||
last_name: string
|
||||
mobile_number: string
|
||||
photo_path?: string | null
|
||||
pinned_at?: string | null
|
||||
relationship: string
|
||||
sort_order?: number
|
||||
updated_at?: string
|
||||
user_id: string
|
||||
}
|
||||
Update: {
|
||||
archived_at?: string | null
|
||||
city?: string
|
||||
country?: string
|
||||
created_at?: string
|
||||
first_name?: string
|
||||
id?: string
|
||||
is_active?: boolean
|
||||
is_archived?: boolean
|
||||
last_name?: string
|
||||
mobile_number?: string
|
||||
photo_path?: string | null
|
||||
pinned_at?: string | null
|
||||
relationship?: string
|
||||
sort_order?: number
|
||||
updated_at?: string
|
||||
user_id?: string
|
||||
}
|
||||
Relationships: []
|
||||
}
|
||||
support_orders: {
|
||||
wallet_transactions: {
|
||||
Row: {
|
||||
amount: number
|
||||
created_at: string
|
||||
currency: string
|
||||
delivery_channel: string
|
||||
description: string | null
|
||||
id: string
|
||||
merchant_id: string | null
|
||||
meter_number: string | null
|
||||
network: string | null
|
||||
note: string | null
|
||||
payment_method: string | null
|
||||
platform_fee: number
|
||||
recipient_id: string
|
||||
recurring_schedule_id: string | null
|
||||
service_type: string
|
||||
status: string
|
||||
total_amount: number
|
||||
updated_at: string
|
||||
user_id: string
|
||||
order_id: string | null
|
||||
title: string
|
||||
type: string
|
||||
wallet_id: string
|
||||
}
|
||||
Insert: {
|
||||
amount: number
|
||||
created_at?: string
|
||||
currency?: string
|
||||
delivery_channel?: string
|
||||
description?: string | null
|
||||
id?: string
|
||||
merchant_id?: string | null
|
||||
meter_number?: string | null
|
||||
network?: string | null
|
||||
note?: string | null
|
||||
payment_method?: string | null
|
||||
platform_fee: number
|
||||
recipient_id: string
|
||||
recurring_schedule_id?: string | null
|
||||
service_type: string
|
||||
status: string
|
||||
total_amount: number
|
||||
updated_at?: string
|
||||
user_id: string
|
||||
order_id?: string | null
|
||||
title: string
|
||||
type: string
|
||||
wallet_id: string
|
||||
}
|
||||
Update: {
|
||||
amount?: number
|
||||
created_at?: string
|
||||
currency?: string
|
||||
delivery_channel?: 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
|
||||
merchant_id?: string | null
|
||||
meter_number?: string | null
|
||||
network?: string | null
|
||||
note?: string | null
|
||||
payment_method?: string | null
|
||||
platform_fee?: number
|
||||
recipient_id?: string
|
||||
recurring_schedule_id?: string | null
|
||||
service_type?: string
|
||||
status?: string
|
||||
total_amount?: number
|
||||
updated_at?: string
|
||||
user_id?: string
|
||||
}
|
||||
Relationships: [
|
||||
{
|
||||
foreignKeyName: "support_orders_merchant_id_fkey"
|
||||
columns: ["merchant_id"]
|
||||
isOneToOne: false
|
||||
referencedRelation: "merchants"
|
||||
referencedColumns: ["id"]
|
||||
},
|
||||
{
|
||||
foreignKeyName: "support_orders_recipient_id_fkey"
|
||||
columns: ["recipient_id"]
|
||||
isOneToOne: false
|
||||
referencedRelation: "recipients"
|
||||
referencedColumns: ["id"]
|
||||
},
|
||||
{
|
||||
foreignKeyName: "support_orders_recurring_schedule_id_fkey"
|
||||
columns: ["recurring_schedule_id"]
|
||||
isOneToOne: false
|
||||
referencedRelation: "support_schedules"
|
||||
referencedColumns: ["id"]
|
||||
},
|
||||
]
|
||||
}
|
||||
support_schedules: {
|
||||
Row: {
|
||||
created_at: string | null
|
||||
frequency_interval: number
|
||||
frequency_unit: string
|
||||
id: string
|
||||
is_active: boolean
|
||||
last_supported_at: string | null
|
||||
next_due_at: string
|
||||
recipient_id: string
|
||||
service_type: string
|
||||
updated_at: string | null
|
||||
user_id: string
|
||||
}
|
||||
Insert: {
|
||||
created_at?: string | null
|
||||
frequency_interval: number
|
||||
frequency_unit: string
|
||||
id?: string
|
||||
is_active?: boolean
|
||||
last_supported_at?: string | null
|
||||
next_due_at: string
|
||||
recipient_id: string
|
||||
service_type: string
|
||||
updated_at?: string | null
|
||||
user_id: string
|
||||
}
|
||||
Update: {
|
||||
created_at?: string | null
|
||||
frequency_interval?: number
|
||||
frequency_unit?: string
|
||||
id?: string
|
||||
is_active?: boolean
|
||||
last_supported_at?: string | null
|
||||
next_due_at?: string
|
||||
recipient_id?: string
|
||||
service_type?: string
|
||||
updated_at?: string | null
|
||||
user_id?: string
|
||||
}
|
||||
Relationships: [
|
||||
{
|
||||
foreignKeyName: "support_schedules_recipient_id_fkey"
|
||||
columns: ["recipient_id"]
|
||||
isOneToOne: false
|
||||
referencedRelation: "recipients"
|
||||
referencedColumns: ["id"]
|
||||
},
|
||||
]
|
||||
}
|
||||
voucher_redemptions: {
|
||||
Row: {
|
||||
created_at: string
|
||||
id: string
|
||||
merchant_id: string
|
||||
order_id: string
|
||||
receipt_reference: string | null
|
||||
redeemed_amount: number
|
||||
redeemed_at: string
|
||||
voucher_id: string
|
||||
}
|
||||
Insert: {
|
||||
created_at?: string
|
||||
id?: string
|
||||
merchant_id: string
|
||||
order_id: string
|
||||
receipt_reference?: string | null
|
||||
redeemed_amount: number
|
||||
redeemed_at?: string
|
||||
voucher_id: string
|
||||
}
|
||||
Update: {
|
||||
created_at?: string
|
||||
id?: string
|
||||
merchant_id?: string
|
||||
order_id?: string
|
||||
receipt_reference?: string | null
|
||||
redeemed_amount?: number
|
||||
redeemed_at?: string
|
||||
voucher_id?: string
|
||||
}
|
||||
Relationships: [
|
||||
{
|
||||
foreignKeyName: "voucher_redemptions_voucher_id_fkey"
|
||||
columns: ["voucher_id"]
|
||||
isOneToOne: false
|
||||
referencedRelation: "vouchers"
|
||||
referencedColumns: ["id"]
|
||||
},
|
||||
]
|
||||
}
|
||||
vouchers: {
|
||||
Row: {
|
||||
created_at: string
|
||||
expires_at: string
|
||||
id: string
|
||||
order_id: string
|
||||
qr_payload: string
|
||||
redeemed_at: string | null
|
||||
redeemed_merchant_id: string | null
|
||||
status: string
|
||||
voucher_code: string
|
||||
voucher_type: string
|
||||
}
|
||||
Insert: {
|
||||
created_at?: string
|
||||
expires_at: string
|
||||
id?: string
|
||||
order_id: string
|
||||
qr_payload: string
|
||||
redeemed_at?: string | null
|
||||
redeemed_merchant_id?: string | null
|
||||
status: string
|
||||
voucher_code: string
|
||||
voucher_type: string
|
||||
}
|
||||
Update: {
|
||||
created_at?: string
|
||||
expires_at?: string
|
||||
id?: string
|
||||
order_id?: string
|
||||
qr_payload?: string
|
||||
redeemed_at?: string | null
|
||||
redeemed_merchant_id?: string | null
|
||||
status?: string
|
||||
voucher_code?: string
|
||||
voucher_type?: string
|
||||
}
|
||||
Relationships: []
|
||||
}
|
||||
}
|
||||
|
||||
+15
-22
@@ -5,7 +5,7 @@ import { Capacitor } from '@capacitor/core';
|
||||
import App from './App';
|
||||
|
||||
// ── Ionic initialisation ──────────────────────────────────────────────────────
|
||||
// ?mode=md|ios overrides (used by Appcakes preview); otherwise follow the platform.
|
||||
// ?mode=md|ios overrides (used by AppSuite preview); otherwise follow the platform.
|
||||
const _urlMode = new URLSearchParams(window.location.search).get('mode');
|
||||
const _platform = Capacitor.getPlatform(); // 'ios' | 'android' | 'web'
|
||||
setupIonicReact({
|
||||
@@ -13,7 +13,7 @@ setupIonicReact({
|
||||
});
|
||||
|
||||
// Derive the studio parent origin dynamically so this works in both dev
|
||||
// (parent at localhost:3000) and production (parent at studio.appcakes.dev).
|
||||
// (parent at localhost:3000) and production (parent at appcakes.qqura.com).
|
||||
const studioOrigin = (() => {
|
||||
try {
|
||||
if (document.referrer) return new URL(document.referrer).origin;
|
||||
@@ -49,25 +49,23 @@ if (import.meta.hot) {
|
||||
}
|
||||
|
||||
// ── Session bridge ────────────────────────────────────────────────────────────
|
||||
// Post auth session to the Appcakes parent frame so the AI can test auth-protected
|
||||
// Post auth session to the AppSuite parent frame so the AI can test auth-protected
|
||||
// Edge Functions. Uses import.meta.glob so Vite never errors if supabase.ts is absent.
|
||||
(async () => {
|
||||
const mods = import.meta.glob('./supabase.ts', { eager: false });
|
||||
if ('./supabase.ts' in mods) {
|
||||
try {
|
||||
const { supabase } = await mods['./supabase.ts']() as { supabase: any };
|
||||
// supabase.auth.onAuthStateChange((_event: unknown, session: any) => {
|
||||
// setTimeout(() => {
|
||||
// window.parent.postMessage(
|
||||
// {
|
||||
// type: '__apsuite_session',
|
||||
// access_token: session?.access_token ?? null,
|
||||
// email: session?.user?.email ?? null,
|
||||
// },
|
||||
// studioOrigin,
|
||||
// );
|
||||
// }, 0);
|
||||
// });
|
||||
supabase.auth.onAuthStateChange((_event: unknown, session: any) => {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: '__apsuite_session',
|
||||
access_token: session?.access_token ?? null,
|
||||
email: session?.user?.email ?? null,
|
||||
},
|
||||
studioOrigin,
|
||||
);
|
||||
});
|
||||
} catch {
|
||||
// supabase client failed to initialise — session bridge unavailable
|
||||
}
|
||||
@@ -75,17 +73,12 @@ if (import.meta.hot) {
|
||||
})();
|
||||
|
||||
// ── Runtime error reporting ───────────────────────────────────────────────────
|
||||
// Forward uncaught errors to the Appcakes dev server so the AI can read them.
|
||||
// Extract projectId from the preview URL (/preview/{projectId}/) so errors are
|
||||
// scoped per-project on the server rather than mixed into a global queue.
|
||||
const _previewMatch = window.location.pathname.match(/\/preview\/([^/]+)/);
|
||||
const _projectId = _previewMatch?.[1] ?? null;
|
||||
|
||||
// Forward uncaught errors to the AppSuite dev server so the AI can read them.
|
||||
function reportError(message: string, stack?: string) {
|
||||
fetch(`${studioOrigin}/api/agent/runtime-error`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message, stack, projectId: _projectId }),
|
||||
body: JSON.stringify({ message, stack }),
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,722 +0,0 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
IonContent,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonRefresher,
|
||||
IonRefresherContent,
|
||||
IonSegment,
|
||||
IonSegmentButton,
|
||||
IonSkeletonText,
|
||||
IonLabel,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import { fileTrayOutline } from 'ionicons/icons';
|
||||
import momImage from '../assets/mom.jpg';
|
||||
import dadImage from '../assets/dad.jpg';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import ActivityListItem from '../components/ActivityListItem';
|
||||
import { setStatusBarStyle, Style } from '../utils/statusBar';
|
||||
import { buildCacheKey, readCache, writeCache } from '../utils/localCache';
|
||||
import '../styles/activity.css';
|
||||
import '../styles/recipients.css';
|
||||
|
||||
type RecipientRow = {
|
||||
id: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
photo_path: string | null;
|
||||
};
|
||||
|
||||
type MerchantRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
branch_name: string | null;
|
||||
};
|
||||
|
||||
type OrderRow = {
|
||||
id: string;
|
||||
service_type: string;
|
||||
amount: number;
|
||||
status: string;
|
||||
created_at: string;
|
||||
recipient_id: string;
|
||||
merchant_id: string | null;
|
||||
recipients: RecipientRow | null;
|
||||
merchants: MerchantRow | null;
|
||||
};
|
||||
|
||||
type VoucherRow = {
|
||||
id: string;
|
||||
order_id: string;
|
||||
status: string;
|
||||
redeemed_at: string | null;
|
||||
redeemed_merchant_id: string | null;
|
||||
};
|
||||
|
||||
type RedemptionRow = {
|
||||
id: string;
|
||||
voucher_id: string;
|
||||
order_id: string;
|
||||
merchant_id: string;
|
||||
redeemed_at: string;
|
||||
};
|
||||
|
||||
type ActivityMetadata = {
|
||||
statusText?: string;
|
||||
avatarLabel?: string;
|
||||
avatarTone?: string;
|
||||
avatarImage?: string;
|
||||
voucherId?: string;
|
||||
};
|
||||
|
||||
type UnifiedActivityItem = {
|
||||
kind: 'voucher' | 'order';
|
||||
id: string;
|
||||
event_type: string;
|
||||
service_type: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
amount: number | null;
|
||||
event_at: string;
|
||||
order_id: string;
|
||||
metadata: ActivityMetadata;
|
||||
};
|
||||
|
||||
type ActivityTypeFilter =
|
||||
| 'all'
|
||||
| 'orders'
|
||||
| 'vouchers'
|
||||
| 'completed'
|
||||
| 'alerts';
|
||||
|
||||
type ActivityFilterRange = '7' | '30' | '90' | 'all';
|
||||
|
||||
type VoucherActivityStatus = 'created' | 'redeemed' | 'partially';
|
||||
|
||||
const previewUserId = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
const dayLabel = (dateText: string) => {
|
||||
const date = new Date(dateText);
|
||||
const today = new Date();
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(today.getDate() - 1);
|
||||
|
||||
if (date.toDateString() === today.toDateString()) return 'Today';
|
||||
if (date.toDateString() === yesterday.toDateString()) return 'Yesterday';
|
||||
return date.toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const getMerchantDisplayName = (merchant?: MerchantRow | null) => {
|
||||
if (!merchant) return null;
|
||||
return `${merchant.name}${merchant.branch_name ? ` ${merchant.branch_name}` : ''}`;
|
||||
};
|
||||
|
||||
const getActivityContextLabel = (
|
||||
serviceType: string,
|
||||
statusText: string,
|
||||
merchantName?: string | null
|
||||
) => {
|
||||
const normalizedService = getNormalizedServiceType(serviceType);
|
||||
const normalizedStatus = statusText.toLowerCase();
|
||||
|
||||
if (normalizedService === 'grocery' || normalizedService === 'medication') {
|
||||
if (normalizedStatus.includes('redeemed')) {
|
||||
return merchantName ? `Redeemed at ${merchantName}` : 'Voucher redeemed';
|
||||
}
|
||||
if (normalizedStatus.includes('partial')) {
|
||||
return merchantName
|
||||
? `Partially redeemed at ${merchantName}`
|
||||
: 'Partially redeemed';
|
||||
}
|
||||
return merchantName
|
||||
? `Ready at ${merchantName}`
|
||||
: 'Voucher ready for collection';
|
||||
}
|
||||
|
||||
if (normalizedService === 'electricity') {
|
||||
return normalizedStatus.includes('completed')
|
||||
? 'Meter support delivered'
|
||||
: 'Meter support sent';
|
||||
}
|
||||
|
||||
if (normalizedService === 'airtime') {
|
||||
return normalizedStatus.includes('completed')
|
||||
? 'Top-up delivered'
|
||||
: 'Top-up sent';
|
||||
}
|
||||
|
||||
return 'Support sent';
|
||||
};
|
||||
|
||||
const getRecipientDisplayName = (recipient?: RecipientRow | null) => {
|
||||
if (!recipient) return 'Loved one';
|
||||
return `${recipient.first_name} ${recipient.last_name}`.trim();
|
||||
};
|
||||
|
||||
const getInitials = (name: string) =>
|
||||
name
|
||||
.split(' ')
|
||||
.map((part) => part.charAt(0))
|
||||
.join('')
|
||||
.slice(0, 2)
|
||||
.toUpperCase();
|
||||
|
||||
const getNormalizedServiceType = (value: string) => {
|
||||
const normalized = value.toLowerCase();
|
||||
if (normalized.includes('grocery')) return 'grocery';
|
||||
if (normalized.includes('medication') || normalized.includes('pharmacy')) {
|
||||
return 'medication';
|
||||
}
|
||||
if (normalized.includes('airtime') || normalized.includes('data')) {
|
||||
return 'airtime';
|
||||
}
|
||||
if (normalized.includes('electricity') || normalized.includes('zesa')) {
|
||||
return 'electricity';
|
||||
}
|
||||
return normalized;
|
||||
};
|
||||
|
||||
const getNormalizedServiceLabel = (serviceType: string) => {
|
||||
const normalizedService = getNormalizedServiceType(serviceType);
|
||||
if (normalizedService === 'grocery') return 'Grocery voucher';
|
||||
if (normalizedService === 'medication') return 'Medication voucher';
|
||||
if (normalizedService === 'airtime') return 'Airtime & Data';
|
||||
if (normalizedService === 'electricity') return 'Electricity';
|
||||
return serviceType.charAt(0).toUpperCase() + serviceType.slice(1);
|
||||
};
|
||||
|
||||
const isVoucherService = (serviceType: string) => {
|
||||
const normalizedService = getNormalizedServiceType(serviceType);
|
||||
return normalizedService === 'grocery' || normalizedService === 'medication';
|
||||
};
|
||||
|
||||
const getVoucherStatus = (
|
||||
orderStatus: string,
|
||||
voucher?: VoucherRow,
|
||||
redemptions: RedemptionRow[] = []
|
||||
): VoucherActivityStatus => {
|
||||
const combinedStatus = `${orderStatus} ${voucher?.status ?? ''}`
|
||||
.toLowerCase()
|
||||
.replace(/_/g, ' ');
|
||||
|
||||
if (combinedStatus.includes('partial')) return 'partially';
|
||||
if (
|
||||
combinedStatus.includes('redeemed') ||
|
||||
Boolean(voucher?.redeemed_at) ||
|
||||
Boolean(voucher?.redeemed_merchant_id) ||
|
||||
redemptions.length > 0
|
||||
) {
|
||||
return 'redeemed';
|
||||
}
|
||||
|
||||
return 'created';
|
||||
};
|
||||
|
||||
const getOrderStatus = (status: string) => {
|
||||
const normalizedStatus = status.toLowerCase().replace(/_/g, ' ');
|
||||
if (
|
||||
normalizedStatus.includes('completed') ||
|
||||
normalizedStatus.includes('delivered') ||
|
||||
normalizedStatus.includes('active')
|
||||
) {
|
||||
return 'completed';
|
||||
}
|
||||
return 'created';
|
||||
};
|
||||
|
||||
const getActivityStatusTone = (_serviceType: string, statusText?: string) => {
|
||||
const normalizedStatus = statusText?.toLowerCase() ?? '';
|
||||
|
||||
if (normalizedStatus.includes('redeemed')) return 'success';
|
||||
if (normalizedStatus.includes('partial')) return 'partial';
|
||||
return 'warning';
|
||||
};
|
||||
|
||||
const getSeededRecipientImage = (
|
||||
firstName?: string | null,
|
||||
photoPath?: string | null
|
||||
) => {
|
||||
const normalizedPath = photoPath?.trim().toLowerCase();
|
||||
if (normalizedPath === 'mom.jpg' || normalizedPath === 'mum.jpg') {
|
||||
return momImage;
|
||||
}
|
||||
if (normalizedPath === 'dad.jpg' || normalizedPath === 'father.jpg') {
|
||||
return dadImage;
|
||||
}
|
||||
|
||||
const normalizedName = firstName?.trim().toLowerCase();
|
||||
if (normalizedName === 'mum' || normalizedName === 'mom') return momImage;
|
||||
if (normalizedName === 'dad' || normalizedName === 'father') return dadImage;
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const getRecipientAvatarUrl = async (recipient?: RecipientRow | null) => {
|
||||
if (!recipient) return undefined;
|
||||
|
||||
const seededImage = getSeededRecipientImage(
|
||||
recipient.first_name,
|
||||
recipient.photo_path
|
||||
);
|
||||
if (seededImage) return seededImage;
|
||||
|
||||
if (!recipient.photo_path) return undefined;
|
||||
|
||||
const { data } = await supabase.storage
|
||||
.from('recipient-photos')
|
||||
.createSignedUrl(recipient.photo_path, 3600);
|
||||
|
||||
return data?.signedUrl;
|
||||
};
|
||||
|
||||
const getAvatarTone = (serviceType: string) => {
|
||||
const normalizedService = getNormalizedServiceType(serviceType);
|
||||
if (normalizedService === 'medication') return 'mint';
|
||||
if (normalizedService === 'airtime') return 'sky';
|
||||
if (normalizedService === 'electricity') return 'gold';
|
||||
return 'lavender';
|
||||
};
|
||||
|
||||
const activityListMemory = new Map<string, UnifiedActivityItem[]>();
|
||||
|
||||
const ActivityPage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { user } = useAuth();
|
||||
const initialUserId = user?.id ?? previewUserId;
|
||||
const initialEvents = activityListMemory.get(initialUserId) ?? [];
|
||||
const [events, setEvents] = useState<UnifiedActivityItem[]>(initialEvents);
|
||||
const [loading, setLoading] = useState(initialEvents.length === 0);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [range, setRange] = useState<ActivityFilterRange>('all');
|
||||
const [typeFilter, setTypeFilter] = useState<ActivityTypeFilter>('all');
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
setStatusBarStyle(Style.Light);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
void loadActivity();
|
||||
}, [user?.id]);
|
||||
|
||||
const showError = (message: string) => {
|
||||
setError(message);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const fetchOrdersForUser = async (userId: string) => {
|
||||
return supabase
|
||||
.from('support_orders')
|
||||
.select(
|
||||
'id,service_type,amount,status,created_at,recipient_id,merchant_id,recipients(id,first_name,last_name,photo_path),merchants(id,name,branch_name)'
|
||||
)
|
||||
.eq('user_id', userId)
|
||||
.order('created_at', { ascending: false });
|
||||
};
|
||||
|
||||
const loadActivity = async (options?: { forceRefresh?: boolean }) => {
|
||||
const activeUserId = user?.id ?? previewUserId;
|
||||
const cacheKey = buildCacheKey(activeUserId, 'activityList');
|
||||
|
||||
let hasCache = false;
|
||||
if (!options?.forceRefresh) {
|
||||
const memoryCached = activityListMemory.get(activeUserId);
|
||||
if (memoryCached) {
|
||||
setEvents(memoryCached);
|
||||
setLoading(false);
|
||||
hasCache = true;
|
||||
}
|
||||
|
||||
try {
|
||||
const cached = await readCache<UnifiedActivityItem[]>(cacheKey);
|
||||
if (cached && Array.isArray(cached)) {
|
||||
activityListMemory.set(activeUserId, cached);
|
||||
setEvents(cached);
|
||||
setLoading(false);
|
||||
hasCache = true;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[activity cache] error', err);
|
||||
}
|
||||
}
|
||||
|
||||
if (!hasCache) {
|
||||
setLoading(true);
|
||||
}
|
||||
setError(null);
|
||||
|
||||
let { data: ordersData, error: ordersError } =
|
||||
await fetchOrdersForUser(activeUserId);
|
||||
|
||||
if (!ordersError && user?.id && (ordersData ?? []).length === 0) {
|
||||
const previewResult = await fetchOrdersForUser(previewUserId);
|
||||
ordersData = previewResult.data;
|
||||
ordersError = previewResult.error;
|
||||
}
|
||||
|
||||
if (ordersError) {
|
||||
showError(ordersError.message || 'Failed to load activity');
|
||||
if (!hasCache) setEvents([]);
|
||||
if (!hasCache) setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const orders = (ordersData ?? []) as unknown as OrderRow[];
|
||||
const orderIds = orders.map((order) => order.id);
|
||||
const recipientIds = Array.from(
|
||||
new Set(orders.map((order) => order.recipient_id).filter(Boolean))
|
||||
);
|
||||
|
||||
const [recipientsRes, vouchersRes, redemptionsRes, merchantsRes] =
|
||||
await Promise.all([
|
||||
recipientIds.length > 0
|
||||
? supabase
|
||||
.from('recipients')
|
||||
.select('id,first_name,last_name,photo_path')
|
||||
.in('id', recipientIds)
|
||||
: Promise.resolve({ data: [], error: null }),
|
||||
orderIds.length > 0
|
||||
? supabase
|
||||
.from('vouchers')
|
||||
.select('id,order_id,status,redeemed_at,redeemed_merchant_id')
|
||||
.in('order_id', orderIds)
|
||||
: Promise.resolve({ data: [], error: null }),
|
||||
orderIds.length > 0
|
||||
? supabase
|
||||
.from('voucher_redemptions')
|
||||
.select('id,voucher_id,order_id,merchant_id,redeemed_at')
|
||||
.in('order_id', orderIds)
|
||||
: Promise.resolve({ data: [], error: null }),
|
||||
supabase.from('merchants').select('id,name,branch_name'),
|
||||
]);
|
||||
|
||||
if (
|
||||
recipientsRes.error ||
|
||||
vouchersRes.error ||
|
||||
redemptionsRes.error ||
|
||||
merchantsRes.error
|
||||
) {
|
||||
showError(
|
||||
recipientsRes.error?.message ||
|
||||
vouchersRes.error?.message ||
|
||||
redemptionsRes.error?.message ||
|
||||
merchantsRes.error?.message ||
|
||||
'Failed to load activity details'
|
||||
);
|
||||
if (!hasCache) setEvents([]);
|
||||
if (!hasCache) setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const recipientsById = new Map(
|
||||
((recipientsRes.data ?? []) as RecipientRow[]).map((recipient) => [
|
||||
recipient.id,
|
||||
recipient,
|
||||
])
|
||||
);
|
||||
const vouchersByOrderId = new Map(
|
||||
((vouchersRes.data ?? []) as VoucherRow[]).map((voucher) => [
|
||||
voucher.order_id,
|
||||
voucher,
|
||||
])
|
||||
);
|
||||
const redemptionsByOrderId = (
|
||||
(redemptionsRes.data ?? []) as RedemptionRow[]
|
||||
).reduce<Map<string, RedemptionRow[]>>((acc, redemption) => {
|
||||
const existing = acc.get(redemption.order_id) ?? [];
|
||||
existing.push(redemption);
|
||||
acc.set(redemption.order_id, existing);
|
||||
return acc;
|
||||
}, new Map());
|
||||
const merchantsById = new Map(
|
||||
((merchantsRes.data ?? []) as MerchantRow[]).map((merchant) => [
|
||||
merchant.id,
|
||||
merchant,
|
||||
])
|
||||
);
|
||||
|
||||
const mappedRows = await Promise.all(
|
||||
orders.map(async (order) => {
|
||||
const recipient =
|
||||
order.recipients ?? recipientsById.get(order.recipient_id) ?? null;
|
||||
const recipientName = getRecipientDisplayName(recipient);
|
||||
const serviceType = getNormalizedServiceType(order.service_type);
|
||||
const voucher = vouchersByOrderId.get(order.id);
|
||||
const redemptions = redemptionsByOrderId.get(order.id) ?? [];
|
||||
const latestRedemption = [...redemptions].sort(
|
||||
(a, b) =>
|
||||
new Date(b.redeemed_at).getTime() -
|
||||
new Date(a.redeemed_at).getTime()
|
||||
)[0];
|
||||
const statusText = isVoucherService(serviceType)
|
||||
? getVoucherStatus(order.status, voucher, redemptions)
|
||||
: getOrderStatus(order.status);
|
||||
const redemptionMerchant = latestRedemption?.merchant_id
|
||||
? merchantsById.get(latestRedemption.merchant_id)
|
||||
: null;
|
||||
const voucherMerchant = voucher?.redeemed_merchant_id
|
||||
? merchantsById.get(voucher.redeemed_merchant_id)
|
||||
: null;
|
||||
const orderMerchant =
|
||||
order.merchants ??
|
||||
(order.merchant_id ? merchantsById.get(order.merchant_id) : null);
|
||||
const merchantName =
|
||||
getMerchantDisplayName(redemptionMerchant) ??
|
||||
getMerchantDisplayName(voucherMerchant) ??
|
||||
getMerchantDisplayName(orderMerchant);
|
||||
const subtitle = getActivityContextLabel(
|
||||
serviceType,
|
||||
statusText,
|
||||
merchantName
|
||||
);
|
||||
const avatarImage = await getRecipientAvatarUrl(recipient);
|
||||
|
||||
return {
|
||||
kind: isVoucherService(serviceType) ? 'voucher' : 'order',
|
||||
id: order.id,
|
||||
order_id: order.id,
|
||||
event_type: serviceType,
|
||||
service_type: serviceType,
|
||||
title: getNormalizedServiceLabel(serviceType),
|
||||
subtitle,
|
||||
amount: Number(order.amount ?? 0),
|
||||
event_at: order.created_at,
|
||||
metadata: {
|
||||
statusText,
|
||||
avatarLabel: getInitials(recipientName),
|
||||
avatarTone: getAvatarTone(serviceType),
|
||||
avatarImage,
|
||||
voucherId: voucher?.id,
|
||||
},
|
||||
} satisfies UnifiedActivityItem;
|
||||
})
|
||||
);
|
||||
|
||||
const finalEvents = mappedRows.sort(
|
||||
(a, b) => new Date(b.event_at).getTime() - new Date(a.event_at).getTime()
|
||||
);
|
||||
|
||||
const nextHash = JSON.stringify(finalEvents);
|
||||
const currentHash = JSON.stringify(
|
||||
activityListMemory.get(activeUserId) ?? events
|
||||
);
|
||||
activityListMemory.set(activeUserId, finalEvents);
|
||||
if (nextHash !== currentHash) {
|
||||
setEvents(finalEvents);
|
||||
}
|
||||
setLoading(false);
|
||||
void writeCache(cacheKey, finalEvents);
|
||||
};
|
||||
|
||||
const filteredEvents = useMemo(() => {
|
||||
const threshold = new Date();
|
||||
if (range !== 'all') {
|
||||
const days = Number(range);
|
||||
threshold.setHours(0, 0, 0, 0);
|
||||
threshold.setDate(threshold.getDate() - (days - 1));
|
||||
}
|
||||
|
||||
return events.filter((item) => {
|
||||
if (
|
||||
range !== 'all' &&
|
||||
new Date(item.event_at).getTime() < threshold.getTime()
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
switch (typeFilter) {
|
||||
case 'all':
|
||||
return true;
|
||||
case 'orders':
|
||||
return item.kind === 'order';
|
||||
case 'vouchers':
|
||||
return item.kind === 'voucher';
|
||||
case 'completed': {
|
||||
const status = (item.metadata.statusText || '').toLowerCase();
|
||||
return (
|
||||
status.includes('completed') ||
|
||||
status.includes('redeemed') ||
|
||||
status.includes('partial')
|
||||
);
|
||||
}
|
||||
case 'alerts':
|
||||
return false;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}, [events, range, typeFilter]);
|
||||
|
||||
const groups = useMemo(() => {
|
||||
return filteredEvents.reduce<Record<string, UnifiedActivityItem[]>>(
|
||||
(acc, event) => {
|
||||
const label = dayLabel(event.event_at);
|
||||
acc[label] = acc[label] ?? [];
|
||||
acc[label].push(event);
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
}, [filteredEvents]);
|
||||
|
||||
const handleRefresh = async (event: CustomEvent) => {
|
||||
await loadActivity({ forceRefresh: true });
|
||||
event.detail.complete();
|
||||
};
|
||||
|
||||
const handleOpenEvent = (event: UnifiedActivityItem) => {
|
||||
history.push(`/orders/${event.order_id}`, { parentRoot: '/activity' });
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonContent
|
||||
fullscreen
|
||||
className="activity-shell"
|
||||
style={
|
||||
{
|
||||
'--background': 'linear-gradient(180deg, #fafafa 0%, #f4f0ff 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': 'calc(var(--ion-safe-area-top, 0px) + 8px)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
|
||||
<IonRefresherContent />
|
||||
</IonRefresher>
|
||||
|
||||
<div className="activity-top-row" style={{ padding: '18px 0 0' }}>
|
||||
<div className="activity-title-block">
|
||||
<h1 className="activity-page-title">Activity</h1>
|
||||
<p className="activity-page-subtitle">Orders & care timeline</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="activity-type-filter-row">
|
||||
{(
|
||||
[
|
||||
'all',
|
||||
'orders',
|
||||
'vouchers',
|
||||
'completed',
|
||||
'alerts',
|
||||
] as ActivityTypeFilter[]
|
||||
).map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
className={`activity-type-chip ${typeFilter === type ? 'active' : ''}`}
|
||||
onClick={() => setTypeFilter(type)}
|
||||
>
|
||||
{type.charAt(0).toUpperCase() + type.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="activity-filter-row">
|
||||
<div className="activity-range-shell">
|
||||
<IonSegment
|
||||
value={range}
|
||||
className="activity-range-segment"
|
||||
onIonChange={(event) =>
|
||||
setRange((event.detail.value as ActivityFilterRange) ?? '30')
|
||||
}
|
||||
>
|
||||
<IonSegmentButton value="all">
|
||||
<IonLabel>All</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="30">
|
||||
<IonLabel>30 days</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="90">
|
||||
<IonLabel>90 days</IonLabel>
|
||||
</IonSegmentButton>
|
||||
</IonSegment>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p style={{ margin: '0 20px 12px', color: '#dc2626', fontSize: 13 }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="activity-grouped-list">
|
||||
{[1, 2, 3].map((item) => (
|
||||
<div key={item} className="activity-list-item">
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 12,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '70%', height: 15 }}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '45%', height: 12 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : filteredEvents.length === 0 ? (
|
||||
<div className="empty-state-card">
|
||||
<IonIcon icon={fileTrayOutline} className="esc-icon" />
|
||||
<h2 className="esc-title">
|
||||
{typeFilter === 'all'
|
||||
? 'No activity in this range'
|
||||
: 'No matching activity'}
|
||||
</h2>
|
||||
<p className="esc-msg">
|
||||
Try a longer date range or switch the activity filter.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
Object.entries(groups).map(([label, items]) => (
|
||||
<div key={label}>
|
||||
<p className="activity-date-group-label">{label}</p>
|
||||
<div className="activity-grouped-list">
|
||||
{items.map((item) => (
|
||||
<ActivityListItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
eventType={item.event_type}
|
||||
title={item.title}
|
||||
subtitle={item.subtitle}
|
||||
amount={item.amount ?? undefined}
|
||||
statusText={item.metadata.statusText}
|
||||
statusTone={getActivityStatusTone(
|
||||
item.event_type,
|
||||
item.metadata.statusText
|
||||
)}
|
||||
avatarLabel={item.metadata.avatarLabel}
|
||||
avatarTone={item.metadata.avatarTone}
|
||||
avatarImage={item.metadata.avatarImage}
|
||||
onClick={() => handleOpenEvent(item)}
|
||||
onStatusClick={() => handleOpenEvent(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityPage;
|
||||
@@ -0,0 +1,308 @@
|
||||
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;
|
||||
@@ -0,0 +1,262 @@
|
||||
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;
|
||||
@@ -0,0 +1,123 @@
|
||||
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;
|
||||
@@ -0,0 +1,109 @@
|
||||
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;
|
||||
@@ -0,0 +1,225 @@
|
||||
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;
|
||||
@@ -1,542 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import SplashPage from './SplashPage';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
useIonViewWillEnter,
|
||||
IonIcon,
|
||||
} from '@ionic/react';
|
||||
import { useHistory, useLocation } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { FirebaseAuthentication } from '@capacitor-firebase/authentication';
|
||||
import AuthFormFields from '../components/AuthFormFields';
|
||||
import SocialAuthButton from '../components/SocialAuthButton';
|
||||
import momImage from '../assets/mom.jpg';
|
||||
import dadImage from '../assets/dad.jpg';
|
||||
import { checkmark, heart } from 'ionicons/icons';
|
||||
import '../styles/auth.css';
|
||||
import {
|
||||
fetchHomeSnapshot,
|
||||
preloadImageUrls,
|
||||
setWarmedHomeSnapshot,
|
||||
} from '../utils/homeSnapshot';
|
||||
import { hydrateHomeSnapshotImages } from '../utils/imageCache';
|
||||
import { buildCacheKey, writeCache } from '../utils/localCache';
|
||||
|
||||
const AuthPage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const { user, profile, profileStatus } = useAuth();
|
||||
const signInTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const navigatedForUserRef = useRef<string | null>(null);
|
||||
const signInStartedAtRef = useRef<number | null>(null);
|
||||
const splashMinCompleteRef = useRef(false);
|
||||
const splashTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const [tab, setTab] = useState<'login' | 'register'>('login');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [keepSignedIn, setKeepSignedIn] = useState(true);
|
||||
const [showPostLoginSplash, setShowPostLoginSplash] = useState(false);
|
||||
const [dashboardReady, setDashboardReady] = useState(false);
|
||||
const [splashMinReady, setSplashMinReady] = useState(false);
|
||||
const prefetchStartedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) {
|
||||
navigatedForUserRef.current = null;
|
||||
signInStartedAtRef.current = null;
|
||||
splashMinCompleteRef.current = false;
|
||||
prefetchStartedRef.current = false;
|
||||
if (splashTimerRef.current) {
|
||||
clearTimeout(splashTimerRef.current);
|
||||
splashTimerRef.current = null;
|
||||
}
|
||||
setShowPostLoginSplash(false);
|
||||
setDashboardReady(false);
|
||||
setSplashMinReady(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (signInTimeoutRef.current) {
|
||||
clearTimeout(signInTimeoutRef.current);
|
||||
signInTimeoutRef.current = null;
|
||||
}
|
||||
|
||||
if (location.pathname !== '/auth' || profileStatus === 'loading') return;
|
||||
if (navigatedForUserRef.current === user.id) return;
|
||||
|
||||
if (profileStatus === 'missing') {
|
||||
if (showPostLoginSplash && !splashMinReady) return;
|
||||
navigatedForUserRef.current = user.id;
|
||||
setLoading(false);
|
||||
setShowPostLoginSplash(false);
|
||||
history.replace('/setup-profile');
|
||||
return;
|
||||
}
|
||||
|
||||
if (profileStatus === 'loaded' && profile) {
|
||||
if (!prefetchStartedRef.current) {
|
||||
prefetchStartedRef.current = true;
|
||||
prefetchHomeDashboard(user.id).then(() => {
|
||||
setDashboardReady(true);
|
||||
});
|
||||
}
|
||||
|
||||
if (!dashboardReady || (showPostLoginSplash && !splashMinReady)) {
|
||||
return;
|
||||
}
|
||||
|
||||
navigatedForUserRef.current = user.id;
|
||||
setLoading(false);
|
||||
setShowPostLoginSplash(false);
|
||||
history.replace('/home');
|
||||
}
|
||||
}, [
|
||||
user,
|
||||
profile,
|
||||
profileStatus,
|
||||
location.pathname,
|
||||
history,
|
||||
showPostLoginSplash,
|
||||
dashboardReady,
|
||||
splashMinReady,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (signInTimeoutRef.current) {
|
||||
clearTimeout(signInTimeoutRef.current);
|
||||
}
|
||||
if (splashTimerRef.current) {
|
||||
clearTimeout(splashTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
setTab('login');
|
||||
setError(null);
|
||||
});
|
||||
|
||||
const showError = (msg: string) => {
|
||||
setError(msg);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const getRecipientAvatarUrl = async (
|
||||
photoPath?: string | null,
|
||||
firstName?: string | null
|
||||
) => {
|
||||
const normalizedPath = photoPath?.trim().toLowerCase();
|
||||
const normalizedName = firstName?.trim().toLowerCase();
|
||||
|
||||
if (normalizedPath === 'mom.jpg' || normalizedPath === 'mum.jpg') {
|
||||
return momImage;
|
||||
}
|
||||
if (normalizedPath === 'dad.jpg' || normalizedPath === 'father.jpg') {
|
||||
return dadImage;
|
||||
}
|
||||
if (normalizedName === 'mum' || normalizedName === 'mom') {
|
||||
return momImage;
|
||||
}
|
||||
if (normalizedName === 'dad' || normalizedName === 'father') {
|
||||
return dadImage;
|
||||
}
|
||||
|
||||
if (photoPath) {
|
||||
const { data } = supabase.storage
|
||||
.from('recipient-photos')
|
||||
.getPublicUrl(photoPath);
|
||||
if (data?.publicUrl) return data.publicUrl;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const prefetchHomeDashboard = async (userId: string) => {
|
||||
try {
|
||||
const snapshot = await fetchHomeSnapshot(userId, getRecipientAvatarUrl);
|
||||
const hydratedSnapshot = await hydrateHomeSnapshotImages(
|
||||
userId,
|
||||
snapshot
|
||||
);
|
||||
await preloadImageUrls([
|
||||
...hydratedSnapshot.imageUrls,
|
||||
...hydratedSnapshot.lovedOnes
|
||||
.map((person) => person.avatar)
|
||||
.filter(Boolean),
|
||||
...hydratedSnapshot.activities
|
||||
.map((activity) => activity.avatar)
|
||||
.filter(Boolean),
|
||||
]);
|
||||
const warmedSnapshot = setWarmedHomeSnapshot(userId, hydratedSnapshot);
|
||||
const cacheKey = buildCacheKey(userId, 'homeSnapshot');
|
||||
await writeCache(cacheKey, warmedSnapshot);
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('[prefetch] failed', err);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const startPostLoginSplash = () => {
|
||||
signInStartedAtRef.current = Date.now();
|
||||
splashMinCompleteRef.current = false;
|
||||
setShowPostLoginSplash(true);
|
||||
setSplashMinReady(false);
|
||||
|
||||
if (splashTimerRef.current) {
|
||||
clearTimeout(splashTimerRef.current);
|
||||
}
|
||||
|
||||
splashTimerRef.current = setTimeout(() => {
|
||||
splashMinCompleteRef.current = true;
|
||||
setSplashMinReady(true);
|
||||
}, 6000);
|
||||
};
|
||||
|
||||
const stopPostLoginSplash = () => {
|
||||
signInStartedAtRef.current = null;
|
||||
splashMinCompleteRef.current = false;
|
||||
prefetchStartedRef.current = false;
|
||||
if (splashTimerRef.current) {
|
||||
clearTimeout(splashTimerRef.current);
|
||||
splashTimerRef.current = null;
|
||||
}
|
||||
setShowPostLoginSplash(false);
|
||||
setDashboardReady(false);
|
||||
setSplashMinReady(false);
|
||||
};
|
||||
|
||||
const handleTabChange = (nextTab: 'login' | 'register') => {
|
||||
setTab(nextTab);
|
||||
setError(null);
|
||||
if (nextTab === 'login') {
|
||||
setConfirmPassword('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignUp = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const normalizedEmail = email.trim().toLowerCase();
|
||||
|
||||
if (!normalizedEmail) {
|
||||
showError('Please enter your email address.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
showError('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const { error: signUpError } = await supabase.auth.signUp({
|
||||
email: normalizedEmail,
|
||||
password,
|
||||
});
|
||||
|
||||
if (signUpError) {
|
||||
showError(signUpError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem('kumusha_pending_verification_email', normalizedEmail);
|
||||
setLoading(false);
|
||||
history.replace('/verify-email', { state: { email: normalizedEmail } });
|
||||
};
|
||||
|
||||
const handleSignIn = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const normalizedEmail = email.trim().toLowerCase();
|
||||
|
||||
if (signInTimeoutRef.current) {
|
||||
clearTimeout(signInTimeoutRef.current);
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
signInTimeoutRef.current = setTimeout(() => {
|
||||
setLoading(false);
|
||||
stopPostLoginSplash();
|
||||
showError(
|
||||
'Sign in is taking too long. Please check your connection and try again.'
|
||||
);
|
||||
}, 30000);
|
||||
|
||||
const { error: signInError } = await supabase.auth.signInWithPassword({
|
||||
email: normalizedEmail,
|
||||
password,
|
||||
});
|
||||
|
||||
if (signInError) {
|
||||
if (signInTimeoutRef.current) {
|
||||
clearTimeout(signInTimeoutRef.current);
|
||||
signInTimeoutRef.current = null;
|
||||
}
|
||||
|
||||
stopPostLoginSplash();
|
||||
|
||||
if (signInError.message.toLowerCase().includes('email not confirmed')) {
|
||||
await supabase.auth.resend({ type: 'signup', email: normalizedEmail });
|
||||
localStorage.setItem(
|
||||
'kumusha_pending_verification_email',
|
||||
normalizedEmail
|
||||
);
|
||||
history.push('/verify-email', {
|
||||
state: { email: normalizedEmail, resent: true },
|
||||
});
|
||||
} else {
|
||||
showError(signInError.message);
|
||||
}
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem(
|
||||
'kumusha_keep_signed_in',
|
||||
keepSignedIn ? 'true' : 'false'
|
||||
);
|
||||
startPostLoginSplash();
|
||||
// Success: keep loading=true, wait for user/profile effect or timeout fallback
|
||||
};
|
||||
|
||||
const handleGoogleSignIn = async () => {
|
||||
if (!Capacitor.isNativePlatform()) {
|
||||
showError(
|
||||
'Google Sign-In is only available in the native app. Use email to sign in here.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setLoading(true);
|
||||
const result = await FirebaseAuthentication.signInWithGoogle();
|
||||
if (!result.credential?.idToken) throw new Error('Missing ID token');
|
||||
|
||||
const { error } = await supabase.auth.signInWithIdToken({
|
||||
provider: 'google',
|
||||
token: result.credential.idToken,
|
||||
});
|
||||
if (error) throw error;
|
||||
|
||||
localStorage.setItem('kumusha_keep_signed_in', 'true');
|
||||
startPostLoginSplash();
|
||||
// keep loading true
|
||||
} catch (err: any) {
|
||||
stopPostLoginSplash();
|
||||
showError(err.message || 'Google sign in failed');
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAppleSignIn = async () => {
|
||||
if (!Capacitor.isNativePlatform()) {
|
||||
showError(
|
||||
'Apple Sign-In is only available in the native app. Use email to sign in here.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setLoading(true);
|
||||
const result = await FirebaseAuthentication.signInWithApple({
|
||||
skipNativeAuth: true,
|
||||
});
|
||||
if (!result.credential?.idToken || !result.credential?.nonce)
|
||||
throw new Error('Missing token or nonce');
|
||||
|
||||
const displayName = result.user?.displayName ?? null;
|
||||
|
||||
const { data, error } = await supabase.auth.signInWithIdToken({
|
||||
provider: 'apple',
|
||||
token: result.credential.idToken,
|
||||
nonce: result.credential.nonce,
|
||||
});
|
||||
if (error) throw error;
|
||||
|
||||
localStorage.setItem('kumusha_keep_signed_in', 'true');
|
||||
startPostLoginSplash();
|
||||
|
||||
if (displayName && data.user) {
|
||||
const firstName = displayName.split(' ')[0] || 'Apple';
|
||||
const lastName = displayName.split(' ').slice(1).join(' ') || 'User';
|
||||
|
||||
await supabase.from('profiles').upsert(
|
||||
{
|
||||
id: data.user.id,
|
||||
full_name: displayName,
|
||||
first_name: firstName,
|
||||
last_name: lastName,
|
||||
phone: 'Pending',
|
||||
country_of_residence: 'Pending',
|
||||
},
|
||||
{ onConflict: 'id' }
|
||||
);
|
||||
}
|
||||
} catch (err: any) {
|
||||
stopPostLoginSplash();
|
||||
showError(err.message || 'Apple sign in failed');
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonContent
|
||||
className="auth-content"
|
||||
fullscreen
|
||||
style={{
|
||||
'--background':
|
||||
'linear-gradient(180deg, #fafafa 0%, #f6f1ff 52%, #f4f0ff 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '0px',
|
||||
}}
|
||||
>
|
||||
<div className="auth-shell auth-shell--centered">
|
||||
<div className="auth-brand-block">
|
||||
<div className="auth-brand-header">
|
||||
<span className="auth-brand-name">Kumusha</span>
|
||||
</div>
|
||||
<h1 className="auth-heading">Care for home</h1>
|
||||
<p className="auth-subtitle">
|
||||
Trusted support for family back home.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="auth-card auth-card--elevated">
|
||||
<div
|
||||
className="auth-mode-toggle"
|
||||
role="tablist"
|
||||
aria-label="Authentication mode"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`auth-toggle-pill ${tab === 'login' ? 'active' : 'inactive'}`}
|
||||
onClick={() => handleTabChange('login')}
|
||||
disabled={loading}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`auth-toggle-pill ${tab === 'register' ? 'active' : 'inactive'}`}
|
||||
onClick={() => handleTabChange('register')}
|
||||
disabled={loading}
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
className="auth-form-stack"
|
||||
onSubmit={tab === 'login' ? handleSignIn : handleSignUp}
|
||||
>
|
||||
<AuthFormFields
|
||||
mode={tab}
|
||||
email={email}
|
||||
password={password}
|
||||
confirmPassword={confirmPassword}
|
||||
onEmailChange={setEmail}
|
||||
onPasswordChange={setPassword}
|
||||
onConfirmPasswordChange={setConfirmPassword}
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
{tab === 'login' && (
|
||||
<button
|
||||
type="button"
|
||||
className="auth-keep-signed-in"
|
||||
onClick={() => !loading && setKeepSignedIn((prev) => !prev)}
|
||||
disabled={loading}
|
||||
>
|
||||
<div className="auth-keep-text">
|
||||
<span className="auth-keep-title">Keep me signed in</span>
|
||||
<span className="auth-keep-subtitle">
|
||||
Stay logged in on this device
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`auth-keep-check ${keepSignedIn ? 'active' : 'inactive'}`}
|
||||
>
|
||||
{keepSignedIn && <IonIcon icon={checkmark} />}
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{error ? (
|
||||
<div className="auth-inline-message">{error}</div>
|
||||
) : null}
|
||||
|
||||
{tab === 'login' && (
|
||||
<div className="auth-meta-row">
|
||||
<span className="auth-meta-hint">Secure email sign in</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => history.push('/forgot-password')}
|
||||
className="auth-link-button"
|
||||
disabled={loading}
|
||||
>
|
||||
Forgot password?
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="auth-submit-btn"
|
||||
disabled={
|
||||
loading ||
|
||||
!email ||
|
||||
!password ||
|
||||
(tab === 'register' && !confirmPassword)
|
||||
}
|
||||
>
|
||||
{loading
|
||||
? 'Please wait...'
|
||||
: tab === 'login'
|
||||
? 'Sign In'
|
||||
: 'Create Account'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="auth-divider">
|
||||
<span>Or continue with</span>
|
||||
</div>
|
||||
|
||||
<div className="auth-social-buttons">
|
||||
<SocialAuthButton
|
||||
provider="google"
|
||||
label="Google"
|
||||
onClick={handleGoogleSignIn}
|
||||
disabled={loading}
|
||||
/>
|
||||
<SocialAuthButton
|
||||
provider="apple"
|
||||
label="Apple"
|
||||
onClick={handleAppleSignIn}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showPostLoginSplash && (
|
||||
<div className="auth-splash-overlay">
|
||||
<SplashPage title="Send support to loved ones from anywhere" />
|
||||
</div>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthPage;
|
||||
@@ -0,0 +1,529 @@
|
||||
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;
|
||||
@@ -1,344 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonInput,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { chevronBackOutline } from 'ionicons/icons';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import AvatarPicker from '../components/AvatarPicker';
|
||||
import '../styles/profile.css';
|
||||
|
||||
type Profile = {
|
||||
id: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
country_of_residence: string;
|
||||
avatar_path: string | null;
|
||||
};
|
||||
|
||||
type PreviewProfilePayload = {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
country_of_residence: string;
|
||||
avatar_url: string | null;
|
||||
notification_push_enabled: boolean;
|
||||
notification_email_enabled: boolean;
|
||||
notification_sms_enabled: boolean;
|
||||
};
|
||||
|
||||
const PREVIEW_PROFILE_STORAGE_KEY = 'kumusha-preview-profile';
|
||||
|
||||
const getPreviewProfilePayload = (): PreviewProfilePayload => {
|
||||
const fallback: PreviewProfilePayload = {
|
||||
first_name: 'Sarah',
|
||||
last_name: 'Moyo',
|
||||
phone: '+44 7123 456789',
|
||||
country_of_residence: 'United Kingdom',
|
||||
avatar_url: null,
|
||||
notification_push_enabled: true,
|
||||
notification_email_enabled: true,
|
||||
notification_sms_enabled: false,
|
||||
};
|
||||
|
||||
try {
|
||||
const saved = localStorage.getItem(PREVIEW_PROFILE_STORAGE_KEY);
|
||||
return saved ? { ...fallback, ...JSON.parse(saved) } : fallback;
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
};
|
||||
|
||||
const savePreviewProfilePayload = (payload: PreviewProfilePayload) => {
|
||||
localStorage.setItem(PREVIEW_PROFILE_STORAGE_KEY, JSON.stringify(payload));
|
||||
};
|
||||
|
||||
const EditProfilePage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { user, refreshProfile } = useAuth();
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [phone, setPhone] = useState('');
|
||||
const [country, setCountry] = useState('');
|
||||
const [avatarPath, setAvatarPath] = useState<string | null>(null);
|
||||
const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
|
||||
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
void loadProfile();
|
||||
}, [user?.id]);
|
||||
|
||||
const showError = (message: string) => {
|
||||
setError(message);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const loadProfile = async () => {
|
||||
setLoading(true);
|
||||
|
||||
if (!user) {
|
||||
const preview = getPreviewProfilePayload();
|
||||
setFirstName(preview.first_name);
|
||||
setLastName(preview.last_name);
|
||||
setPhone(preview.phone);
|
||||
setCountry(preview.country_of_residence);
|
||||
setAvatarPath(null);
|
||||
setAvatarPreview(preview.avatar_url);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, error: loadError } = await supabase
|
||||
.from('profiles')
|
||||
.select('id,first_name,last_name,phone,country_of_residence,avatar_path')
|
||||
.eq('id', user.id)
|
||||
.single();
|
||||
|
||||
if (loadError || !data) {
|
||||
showError(loadError?.message ?? 'Profile not found');
|
||||
const preview = getPreviewProfilePayload();
|
||||
setFirstName(preview.first_name);
|
||||
setLastName(preview.last_name);
|
||||
setPhone(preview.phone);
|
||||
setCountry(preview.country_of_residence);
|
||||
setAvatarPath(null);
|
||||
setAvatarPreview(preview.avatar_url);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const profile = data as Profile;
|
||||
setFirstName(profile.first_name ?? '');
|
||||
setLastName(profile.last_name ?? '');
|
||||
setPhone(profile.phone ?? '');
|
||||
setCountry(profile.country_of_residence ?? '');
|
||||
setAvatarPath(profile.avatar_path);
|
||||
if (profile.avatar_path) {
|
||||
const { data: signed } = await supabase.storage
|
||||
.from('avatars')
|
||||
.createSignedUrl(profile.avatar_path, 3600);
|
||||
setAvatarPreview(signed?.signedUrl ?? null);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleGoBack = () => {
|
||||
if (history.length > 1) {
|
||||
history.goBack();
|
||||
} else {
|
||||
history.replace('/profile');
|
||||
}
|
||||
};
|
||||
|
||||
const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setAvatarFile(file);
|
||||
setAvatarPreview(
|
||||
typeof reader.result === 'string' ? reader.result : null
|
||||
);
|
||||
};
|
||||
reader.onerror = () => {
|
||||
showError(
|
||||
'We could not preview that image. Please choose another photo.'
|
||||
);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
const cleanFirstName = firstName.trim();
|
||||
const cleanLastName = lastName.trim();
|
||||
const cleanPhone = phone.trim();
|
||||
const cleanCountry = country.trim();
|
||||
|
||||
if (!cleanFirstName || !cleanLastName || !cleanPhone || !cleanCountry) {
|
||||
showError('Please complete all fields');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
setSaving(true);
|
||||
savePreviewProfilePayload({
|
||||
...getPreviewProfilePayload(),
|
||||
first_name: cleanFirstName,
|
||||
last_name: cleanLastName,
|
||||
phone: cleanPhone,
|
||||
country_of_residence: cleanCountry,
|
||||
avatar_url: avatarPreview,
|
||||
});
|
||||
setSaving(false);
|
||||
history.replace('/profile');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
let nextAvatarPath = avatarPath;
|
||||
if (avatarFile) {
|
||||
const extension = avatarFile.name.split('.').pop() || 'jpg';
|
||||
nextAvatarPath = `${user.id}/${Date.now()}.${extension}`;
|
||||
const { error: uploadError } = await supabase.storage
|
||||
.from('avatars')
|
||||
.upload(nextAvatarPath, avatarFile);
|
||||
if (uploadError) {
|
||||
showError(uploadError.message);
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const { error: updateError } = await supabase
|
||||
.from('profiles')
|
||||
.update({
|
||||
first_name: cleanFirstName,
|
||||
last_name: cleanLastName,
|
||||
full_name: `${cleanFirstName} ${cleanLastName}`,
|
||||
phone: cleanPhone,
|
||||
country_of_residence: cleanCountry,
|
||||
avatar_path: nextAvatarPath,
|
||||
updated_at: new Date().toISOString(),
|
||||
})
|
||||
.eq('id', user.id);
|
||||
|
||||
if (updateError) {
|
||||
showError(updateError.message);
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await refreshProfile();
|
||||
setSaving(false);
|
||||
history.replace('/profile');
|
||||
};
|
||||
|
||||
const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar
|
||||
style={
|
||||
{
|
||||
'--background': '#fafafa',
|
||||
'--border-width': '0px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonButtons slot="start">
|
||||
<IonButton
|
||||
className="profile-back-button"
|
||||
fill="clear"
|
||||
onClick={handleGoBack}
|
||||
aria-label="Go back"
|
||||
style={
|
||||
{
|
||||
'--profile-action-accent': '#6d28d9',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle style={{ fontSize: 18, fontWeight: 700 }}>
|
||||
Edit profile
|
||||
</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
className="edit-profile-shell"
|
||||
style={
|
||||
{
|
||||
'--background': '#fafafa',
|
||||
'--padding-top': '8px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="edit-profile-card">
|
||||
<AvatarPicker
|
||||
previewUrl={avatarPreview}
|
||||
onFileChange={handleAvatarChange}
|
||||
initials={initials || undefined}
|
||||
disabled={loading || saving}
|
||||
/>
|
||||
<IonInput
|
||||
className="epc-field"
|
||||
type="text"
|
||||
label="First name"
|
||||
labelPlacement="floating"
|
||||
placeholder="e.g. Tadiwa"
|
||||
value={firstName}
|
||||
disabled={loading || saving}
|
||||
onIonInput={(event) => setFirstName(event.detail.value ?? '')}
|
||||
/>
|
||||
<IonInput
|
||||
className="epc-field"
|
||||
type="text"
|
||||
label="Last name"
|
||||
labelPlacement="floating"
|
||||
placeholder="e.g. Moyo"
|
||||
value={lastName}
|
||||
disabled={loading || saving}
|
||||
onIonInput={(event) => setLastName(event.detail.value ?? '')}
|
||||
/>
|
||||
<IonInput
|
||||
className="epc-field"
|
||||
type="tel"
|
||||
inputMode="tel"
|
||||
label="Mobile number"
|
||||
labelPlacement="floating"
|
||||
placeholder="e.g. +44 7123 456789"
|
||||
value={phone}
|
||||
disabled={loading || saving}
|
||||
onIonInput={(event) => setPhone(event.detail.value ?? '')}
|
||||
/>
|
||||
<IonInput
|
||||
className="epc-field"
|
||||
type="text"
|
||||
label="Country of residence"
|
||||
labelPlacement="floating"
|
||||
placeholder="e.g. United Kingdom"
|
||||
value={country}
|
||||
disabled={loading || saving}
|
||||
onIonInput={(event) => setCountry(event.detail.value ?? '')}
|
||||
/>
|
||||
{error && (
|
||||
<p style={{ margin: 0, color: '#dc2626', fontSize: 13 }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<IonButton
|
||||
type="submit"
|
||||
expand="block"
|
||||
className="epc-save-btn"
|
||||
disabled={loading || saving}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save profile'}
|
||||
</IonButton>
|
||||
</form>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditProfilePage;
|
||||
@@ -1,207 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonInput,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { chevronBackOutline, keyOutline } from 'ionicons/icons';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import '../styles/auth.css';
|
||||
|
||||
const ForgotPasswordPage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const [email, setEmail] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState<string | null>(null);
|
||||
|
||||
const showMessage = (message: string, kind: 'error' | 'status') => {
|
||||
if (kind === 'error') {
|
||||
setError(message);
|
||||
setStatus(null);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
} else {
|
||||
setStatus(message);
|
||||
setError(null);
|
||||
setTimeout(() => setStatus(null), 4000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
const normalizedEmail = email.trim().toLowerCase();
|
||||
if (!normalizedEmail) {
|
||||
showMessage('Enter your email address to continue', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setStatus(null);
|
||||
|
||||
const { error: resetError } =
|
||||
await supabase.auth.resetPasswordForEmail(normalizedEmail);
|
||||
|
||||
if (resetError) {
|
||||
showMessage(resetError.message, 'error');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
showMessage('Reset code sent', 'status');
|
||||
setLoading(false);
|
||||
history.push('/verify-reset', { state: { email: normalizedEmail } });
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar
|
||||
style={
|
||||
{
|
||||
'--background': 'transparent',
|
||||
'--border-width': '0px',
|
||||
'--color': '#111827',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonButtons slot="start">
|
||||
<IonButton
|
||||
fill="clear"
|
||||
onClick={() => history.goBack()}
|
||||
style={
|
||||
{
|
||||
'--color': '#111827',
|
||||
'--border-radius': '12px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
aria-label="Go back"
|
||||
>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle style={{ fontSize: '18px', fontWeight: 700 }}>
|
||||
Reset password
|
||||
</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
className="auth-content"
|
||||
style={
|
||||
{
|
||||
'--background': 'linear-gradient(180deg, #fafafa 0%, #f4f0ff 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '0px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div className="auth-shell">
|
||||
<div
|
||||
className="auth-intro-block"
|
||||
style={{ alignItems: 'flex-start', textAlign: 'left' }}
|
||||
>
|
||||
<div className="auth-icon-container">
|
||||
<IonIcon icon={keyOutline} />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="auth-intro-heading">Forgot your password?</h1>
|
||||
<p className="auth-intro-body" style={{ marginTop: '8px' }}>
|
||||
Enter your account email and we'll send you a 6-digit reset
|
||||
code.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="auth-form-card"
|
||||
style={{ gap: '16px' }}
|
||||
>
|
||||
<IonInput
|
||||
type="email"
|
||||
label="Email address"
|
||||
labelPlacement="floating"
|
||||
value={email}
|
||||
onIonInput={(event) => setEmail(event.detail.value ?? '')}
|
||||
disabled={loading}
|
||||
placeholder="you@example.com"
|
||||
style={
|
||||
{
|
||||
'--background': '#fafafa',
|
||||
'--border-radius': '12px',
|
||||
'--padding-start': '14px',
|
||||
'--padding-end': '14px',
|
||||
'--highlight-color-focused': '#6d28d9',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="auth-status-text" style={{ color: '#dc2626' }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{status && (
|
||||
<p className="auth-status-text" style={{ color: '#16a34a' }}>
|
||||
{status}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<IonButton
|
||||
type="submit"
|
||||
expand="block"
|
||||
disabled={loading || !email.trim()}
|
||||
style={
|
||||
{
|
||||
'--background': '#6d28d9',
|
||||
'--background-activated': '#5b21b6',
|
||||
'--border-radius': '999px',
|
||||
'--box-shadow': 'none',
|
||||
'--color': '#ffffff',
|
||||
height: '52px',
|
||||
fontSize: '15px',
|
||||
fontWeight: 700,
|
||||
marginTop: '4px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{loading ? 'Sending code...' : 'Send reset code'}
|
||||
</IonButton>
|
||||
</form>
|
||||
|
||||
<div className="auth-footer">
|
||||
<p className="auth-footer-text">
|
||||
Remembered it?{' '}
|
||||
<button
|
||||
type="button"
|
||||
className="auth-footer-link"
|
||||
onClick={() => history.replace('/auth')}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
Back to sign in
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgotPasswordPage;
|
||||
+832
-20
@@ -1,30 +1,842 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonChip,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonSearchbar,
|
||||
IonText,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from "@ionic/react";
|
||||
IonToast,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import {
|
||||
bagHandleOutline,
|
||||
cartOutline,
|
||||
chevronForwardOutline,
|
||||
homeOutline,
|
||||
locationOutline,
|
||||
micOutline,
|
||||
personCircleOutline,
|
||||
receiptOutline,
|
||||
searchOutline,
|
||||
storefrontOutline,
|
||||
timeOutline,
|
||||
} from 'ionicons/icons';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import ProductFilters, { SortOption } from '../components/ProductFilters';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { setStatusBarStyle, Style } from '../utils/statusBar';
|
||||
import avocadoOilImage from '../assets/organic-avocado-oil.png';
|
||||
import sourdoughBreadImage from '../assets/artisan-sourdough-bread.png';
|
||||
import strawberriesPackImage from '../assets/fresh-strawberries-pack.png';
|
||||
import farmEggsImage from '../assets/farm-eggs-carton.png';
|
||||
import bananasImage from '../assets/bananas-bunch.png';
|
||||
import wholeMilkImage from '../assets/whole-milk-carton.png';
|
||||
import brownRiceImage from '../assets/brown-rice-bag.png';
|
||||
import chickenBreastImage from '../assets/chicken-breast-pack.png';
|
||||
import orangeJuiceImage from '../assets/orange-juice-bottle.png';
|
||||
import rolledOatsImage from '../assets/rolled-oats-pack.png';
|
||||
import greekYogurtImage from '../assets/greek-yogurt-cup.png';
|
||||
import peanutButterImage from '../assets/peanut-butter-jar.png';
|
||||
import spaghettiImage from '../assets/pasta-spaghetti-pack.png';
|
||||
import tomatoSauceImage from '../assets/tomato-sauce-jar.png';
|
||||
import cheddarCheeseImage from '../assets/cheddar-cheese-block.png';
|
||||
import lettuceImage from '../assets/lettuce-head.png';
|
||||
import carrotsImage from '../assets/carrots-bag.png';
|
||||
import potatoesImage from '../assets/potatoes-bag.png';
|
||||
import onionsImage from '../assets/onions-net-bag.png';
|
||||
import salmonImage from '../assets/salmon-fillet-pack.png';
|
||||
import sparklingWaterImage from '../assets/sparkling-water-pack.png';
|
||||
import coffeeBeansImage from '../assets/coffee-beans-bag.png';
|
||||
import greenTeaImage from '../assets/green-tea-box.png';
|
||||
import oliveOilImage from '../assets/olive-oil-bottle.png';
|
||||
|
||||
const Home: React.FC = () => (
|
||||
<IonPage>
|
||||
<IonHeader translucent className="home-header">
|
||||
<IonToolbar className="home-toolbar">
|
||||
<IonTitle>Home</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen className="home-content">
|
||||
<div className="home-shell minimal-home-shell">
|
||||
<section className="minimal-welcome-card subtle-welcome-card">
|
||||
<h1>Welcome to your new app</h1>
|
||||
<p className="minimal-subtitle">
|
||||
Chat with the assistant to start adding features and pages
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
export type Product = {
|
||||
id: string;
|
||||
name: string;
|
||||
category: string;
|
||||
description: string;
|
||||
price: number;
|
||||
rating: number;
|
||||
prepTime: string;
|
||||
image: string;
|
||||
imageAlt: string;
|
||||
};
|
||||
|
||||
export type CartItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
quantity: number;
|
||||
};
|
||||
|
||||
export const CART_STORAGE_KEY = 'simple-shop-cart';
|
||||
export const LAST_ORDER_STORAGE_KEY = 'simple-shop-last-order';
|
||||
|
||||
export const products: Product[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Organic Avocado Oil',
|
||||
category: 'Pantry',
|
||||
description:
|
||||
'Cold-pressed avocado oil for cooking, roasting, and healthy everyday meals.',
|
||||
price: 8.99,
|
||||
rating: 4.8,
|
||||
prepTime: '60 MIN',
|
||||
image: avocadoOilImage,
|
||||
imageAlt: 'Bottle of organic avocado oil with fresh avocados',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Artisan Sourdough Bread',
|
||||
category: 'Bakery',
|
||||
description:
|
||||
'Freshly baked sourdough loaf with a crisp crust and soft, airy center.',
|
||||
price: 7.49,
|
||||
rating: 4.6,
|
||||
prepTime: '45 MIN',
|
||||
image: sourdoughBreadImage,
|
||||
imageAlt: 'Fresh artisan sourdough bread loaf on a wooden board',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Fresh Strawberries Pack',
|
||||
category: 'Fruit',
|
||||
description:
|
||||
'Sweet, bright strawberries packed fresh for snacks, desserts, and smoothies.',
|
||||
price: 9.25,
|
||||
rating: 4.9,
|
||||
prepTime: '35 MIN',
|
||||
image: strawberriesPackImage,
|
||||
imageAlt: 'Pack of fresh strawberries with berries beside it',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Free Range Farm Eggs',
|
||||
category: 'Dairy & Eggs',
|
||||
description:
|
||||
'Farm-fresh eggs with rich yolks, ideal for breakfast, baking, and meal prep.',
|
||||
price: 4.5,
|
||||
rating: 4.7,
|
||||
prepTime: '55 MIN',
|
||||
image: farmEggsImage,
|
||||
imageAlt: 'Carton of free range farm eggs on a clean background',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Bananas Bunch',
|
||||
category: 'Fruit',
|
||||
description:
|
||||
'Naturally sweet ripe bananas for breakfast bowls, snacks, and smoothies.',
|
||||
price: 3.2,
|
||||
rating: 4.7,
|
||||
prepTime: '40 MIN',
|
||||
image: bananasImage,
|
||||
imageAlt: 'Fresh bunch of ripe yellow bananas',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Whole Milk Carton',
|
||||
category: 'Dairy & Eggs',
|
||||
description:
|
||||
'Creamy whole milk for cereal, coffee, cooking, and family breakfasts.',
|
||||
price: 3.99,
|
||||
rating: 4.5,
|
||||
prepTime: '30 MIN',
|
||||
image: wholeMilkImage,
|
||||
imageAlt: 'Carton of whole milk standing upright',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'Brown Rice Bag',
|
||||
category: 'Pantry',
|
||||
description:
|
||||
'Nutty wholegrain brown rice for bowls, sides, and meal prep dinners.',
|
||||
price: 5.75,
|
||||
rating: 4.6,
|
||||
prepTime: '50 MIN',
|
||||
image: brownRiceImage,
|
||||
imageAlt: 'Sealed bag of brown rice on a white background',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: 'Chicken Breast Pack',
|
||||
category: 'Meat & Seafood',
|
||||
description:
|
||||
'Lean chicken breast fillets for grilling, roasting, and protein-packed meals.',
|
||||
price: 11.9,
|
||||
rating: 4.8,
|
||||
prepTime: '70 MIN',
|
||||
image: chickenBreastImage,
|
||||
imageAlt: 'Pack of fresh chicken breast fillets',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
name: 'Orange Juice Bottle',
|
||||
category: 'Beverages',
|
||||
description:
|
||||
'Bright citrus orange juice for a refreshing breakfast or midday boost.',
|
||||
price: 4.8,
|
||||
rating: 4.6,
|
||||
prepTime: '25 MIN',
|
||||
image: orangeJuiceImage,
|
||||
imageAlt: 'Bottle of orange juice on a clean background',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: 'Rolled Oats Pack',
|
||||
category: 'Breakfast',
|
||||
description:
|
||||
'Hearty rolled oats for porridge, overnight oats, and healthy baking.',
|
||||
price: 4.25,
|
||||
rating: 4.7,
|
||||
prepTime: '35 MIN',
|
||||
image: rolledOatsImage,
|
||||
imageAlt: 'Pack of rolled oats on a white background',
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
name: 'Greek Yogurt Cup',
|
||||
category: 'Dairy & Eggs',
|
||||
description:
|
||||
'Thick plain Greek yogurt with a rich texture for breakfast and snacks.',
|
||||
price: 2.65,
|
||||
rating: 4.5,
|
||||
prepTime: '20 MIN',
|
||||
image: greekYogurtImage,
|
||||
imageAlt: 'Single cup of plain Greek yogurt',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
name: 'Peanut Butter Jar',
|
||||
category: 'Pantry',
|
||||
description:
|
||||
'Smooth peanut butter for toast, sandwiches, smoothies, and baking.',
|
||||
price: 5.2,
|
||||
rating: 4.8,
|
||||
prepTime: '45 MIN',
|
||||
image: peanutButterImage,
|
||||
imageAlt: 'Jar of peanut butter on a white background',
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
name: 'Spaghetti Pasta Pack',
|
||||
category: 'Pantry',
|
||||
description:
|
||||
'Classic spaghetti pasta for quick weeknight dinners and family meals.',
|
||||
price: 3.45,
|
||||
rating: 4.6,
|
||||
prepTime: '50 MIN',
|
||||
image: spaghettiImage,
|
||||
imageAlt: 'Pack of spaghetti pasta on a clean background',
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
name: 'Tomato Sauce Jar',
|
||||
category: 'Pantry',
|
||||
description:
|
||||
'Rich tomato sauce for pasta, pizza bases, and simmered home cooking.',
|
||||
price: 3.95,
|
||||
rating: 4.7,
|
||||
prepTime: '55 MIN',
|
||||
image: tomatoSauceImage,
|
||||
imageAlt: 'Glass jar of tomato sauce',
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
name: 'Cheddar Cheese Block',
|
||||
category: 'Dairy & Eggs',
|
||||
description:
|
||||
'Sharp cheddar cheese block for sandwiches, snacks, sauces, and grating.',
|
||||
price: 6.15,
|
||||
rating: 4.7,
|
||||
prepTime: '35 MIN',
|
||||
image: cheddarCheeseImage,
|
||||
imageAlt: 'Block of cheddar cheese on a white background',
|
||||
},
|
||||
{
|
||||
id: '16',
|
||||
name: 'Fresh Lettuce Head',
|
||||
category: 'Vegetables',
|
||||
description:
|
||||
'Crisp green lettuce for salads, wraps, burgers, and light lunches.',
|
||||
price: 2.8,
|
||||
rating: 4.4,
|
||||
prepTime: '30 MIN',
|
||||
image: lettuceImage,
|
||||
imageAlt: 'Fresh green head of lettuce',
|
||||
},
|
||||
{
|
||||
id: '17',
|
||||
name: 'Carrots Bag',
|
||||
category: 'Vegetables',
|
||||
description:
|
||||
'Sweet crunchy carrots for roasting, soups, stir-fries, and lunch boxes.',
|
||||
price: 3.1,
|
||||
rating: 4.5,
|
||||
prepTime: '45 MIN',
|
||||
image: carrotsImage,
|
||||
imageAlt: 'Bag of fresh carrots on a clean background',
|
||||
},
|
||||
{
|
||||
id: '18',
|
||||
name: 'Potatoes Bag',
|
||||
category: 'Vegetables',
|
||||
description:
|
||||
'Versatile potatoes for frying, mashing, baking, and hearty dinners.',
|
||||
price: 4.75,
|
||||
rating: 4.6,
|
||||
prepTime: '55 MIN',
|
||||
image: potatoesImage,
|
||||
imageAlt: 'Mesh bag of potatoes',
|
||||
},
|
||||
{
|
||||
id: '19',
|
||||
name: 'Onions Net Bag',
|
||||
category: 'Vegetables',
|
||||
description:
|
||||
'Flavorful onions for stews, sauces, sautés, and everyday cooking.',
|
||||
price: 3.35,
|
||||
rating: 4.4,
|
||||
prepTime: '50 MIN',
|
||||
image: onionsImage,
|
||||
imageAlt: 'Net bag of onions on a white background',
|
||||
},
|
||||
{
|
||||
id: '20',
|
||||
name: 'Salmon Fillet Pack',
|
||||
category: 'Meat & Seafood',
|
||||
description:
|
||||
'Fresh salmon fillet packed for quick oven dinners and healthy lunches.',
|
||||
price: 13.99,
|
||||
rating: 4.8,
|
||||
prepTime: '70 MIN',
|
||||
image: salmonImage,
|
||||
imageAlt: 'Packaged salmon fillet on a clean background',
|
||||
},
|
||||
{
|
||||
id: '21',
|
||||
name: 'Sparkling Water Pack',
|
||||
category: 'Beverages',
|
||||
description:
|
||||
'Refreshing sparkling water multipack for hydration and light entertaining.',
|
||||
price: 6.8,
|
||||
rating: 4.5,
|
||||
prepTime: '25 MIN',
|
||||
image: sparklingWaterImage,
|
||||
imageAlt: 'Multipack of sparkling water cans',
|
||||
},
|
||||
{
|
||||
id: '22',
|
||||
name: 'Coffee Beans Bag',
|
||||
category: 'Beverages',
|
||||
description:
|
||||
'Roasted coffee beans with a rich aroma for espresso and filter brews.',
|
||||
price: 9.6,
|
||||
rating: 4.8,
|
||||
prepTime: '40 MIN',
|
||||
image: coffeeBeansImage,
|
||||
imageAlt: 'Bag of roasted coffee beans on a white background',
|
||||
},
|
||||
{
|
||||
id: '23',
|
||||
name: 'Green Tea Box',
|
||||
category: 'Beverages',
|
||||
description:
|
||||
'Soothing green tea for a light daily ritual and calming warm drink.',
|
||||
price: 4.4,
|
||||
rating: 4.5,
|
||||
prepTime: '30 MIN',
|
||||
image: greenTeaImage,
|
||||
imageAlt: 'Box of green tea on a clean background',
|
||||
},
|
||||
{
|
||||
id: '24',
|
||||
name: 'Extra Virgin Olive Oil',
|
||||
category: 'Pantry',
|
||||
description:
|
||||
'Fragrant olive oil for salads, drizzling, roasting, and Mediterranean meals.',
|
||||
price: 10.5,
|
||||
rating: 4.9,
|
||||
prepTime: '60 MIN',
|
||||
image: oliveOilImage,
|
||||
imageAlt: 'Bottle of extra virgin olive oil on a white background',
|
||||
},
|
||||
];
|
||||
|
||||
export const readCart = (): CartItem[] => {
|
||||
if (typeof window === 'undefined') return [];
|
||||
try {
|
||||
const savedCart = window.localStorage.getItem(CART_STORAGE_KEY);
|
||||
if (!savedCart) return [];
|
||||
const parsed = JSON.parse(savedCart) as CartItem[];
|
||||
return Array.isArray(parsed) ? parsed : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const writeCart = (cart: CartItem[]) => {
|
||||
if (typeof window === 'undefined') return;
|
||||
window.localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cart));
|
||||
window.dispatchEvent(new CustomEvent('cart:updated'));
|
||||
};
|
||||
|
||||
const featuredSectionIds = ['12', '11', '23', '1', '24'];
|
||||
const homeLifestyleSectionIds = ['6', '9', '21', '22', '10'];
|
||||
const STORE_OPEN_HOUR = 8;
|
||||
const STORE_CLOSE_HOUR = 20;
|
||||
|
||||
const formatPlacedTime = (date: Date) =>
|
||||
date.toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
});
|
||||
|
||||
const formatHourSlot = (hour24: number) => {
|
||||
const normalized = ((hour24 % 24) + 24) % 24;
|
||||
const hour12 = normalized % 12 === 0 ? 12 : normalized % 12;
|
||||
const suffix = normalized >= 12 ? 'PM' : 'AM';
|
||||
return `${hour12} ${suffix}`;
|
||||
};
|
||||
|
||||
const formatDeliveryWindow = (startHour24: number, endHour24: number) =>
|
||||
`${formatHourSlot(startHour24)}-${formatHourSlot(endHour24)}`;
|
||||
|
||||
const getDeliveryTiming = (now: Date) => {
|
||||
const currentHour = now.getHours();
|
||||
|
||||
let slotStart = STORE_OPEN_HOUR;
|
||||
let slotEnd = STORE_OPEN_HOUR + 1;
|
||||
|
||||
if (currentHour < STORE_OPEN_HOUR) {
|
||||
slotStart = STORE_OPEN_HOUR;
|
||||
slotEnd = STORE_OPEN_HOUR + 1;
|
||||
} else if (currentHour >= STORE_CLOSE_HOUR - 1) {
|
||||
slotStart = STORE_OPEN_HOUR;
|
||||
slotEnd = STORE_OPEN_HOUR + 1;
|
||||
} else {
|
||||
slotStart = currentHour + 1;
|
||||
slotEnd = Math.min(slotStart + 1, STORE_CLOSE_HOUR);
|
||||
}
|
||||
|
||||
const etaHour = slotStart;
|
||||
const etaMinute = now.getMinutes() < 30 ? 15 : 45;
|
||||
const etaDate = new Date(now);
|
||||
etaDate.setHours(etaHour, etaMinute, 0, 0);
|
||||
|
||||
if (currentHour >= STORE_CLOSE_HOUR - 1) {
|
||||
etaDate.setDate(etaDate.getDate() + 1);
|
||||
}
|
||||
|
||||
return {
|
||||
placedLabel: formatPlacedTime(now),
|
||||
windowLabel: formatDeliveryWindow(slotStart, slotEnd),
|
||||
etaLabel: etaDate.toLocaleTimeString([], {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
const ProductShelf: React.FC<{
|
||||
title: string;
|
||||
products: Product[];
|
||||
onOpenProduct: (id: string) => void;
|
||||
onQuickAdd?: (product: Product) => void;
|
||||
}> = ({ title, products: shelfProducts, onOpenProduct, onQuickAdd }) => (
|
||||
<section className="shelf-section">
|
||||
<div className="shelf-section-header">
|
||||
<h2>{title}</h2>
|
||||
<IonButton fill="clear" className="view-all-button">
|
||||
View All
|
||||
</IonButton>
|
||||
</div>
|
||||
<div className="shelf-scroll">
|
||||
{shelfProducts.map((product) => (
|
||||
<button
|
||||
key={product.id}
|
||||
type="button"
|
||||
className="shelf-product-card"
|
||||
onClick={() => onOpenProduct(product.id)}
|
||||
>
|
||||
<div className="shelf-image-wrap">
|
||||
<img
|
||||
src={product.image}
|
||||
alt={product.imageAlt}
|
||||
className="shelf-product-image"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="shelf-add-badge"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onQuickAdd?.(product);
|
||||
}}
|
||||
aria-label={`Add ${product.name} to cart`}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<div className="shelf-card-copy">
|
||||
<span className="browse-product-category">{product.category}</span>
|
||||
<h3 className="shelf-product-title">{product.name}</h3>
|
||||
<div className="shelf-price-block">
|
||||
<span className="shelf-price">${product.price.toFixed(2)}</span>
|
||||
</div>
|
||||
<p className="shelf-product-description">{product.description}</p>
|
||||
<div className="shelf-meta-pill">
|
||||
<IonIcon icon={timeOutline} />
|
||||
<span>{product.prepTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { user } = useAuth();
|
||||
const [query, setQuery] = useState('');
|
||||
const [now, setNow] = useState(() => new Date());
|
||||
const [cartCount, setCartCount] = useState(0);
|
||||
const [selectedCategory, setSelectedCategory] = useState('All');
|
||||
const [sortOption, setSortOption] = useState<SortOption>('popular');
|
||||
const [isFilterOpen, setIsFilterOpen] = useState(false);
|
||||
const [toastMessage, setToastMessage] = useState('');
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
setStatusBarStyle(Style.Dark);
|
||||
const count = readCart().reduce((sum, item) => sum + item.quantity, 0);
|
||||
setCartCount(count);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const syncCount = () =>
|
||||
setCartCount(readCart().reduce((sum, item) => sum + item.quantity, 0));
|
||||
syncCount();
|
||||
window.addEventListener('storage', syncCount);
|
||||
window.addEventListener('cart:updated', syncCount as EventListener);
|
||||
return () => {
|
||||
window.removeEventListener('storage', syncCount);
|
||||
window.removeEventListener('cart:updated', syncCount as EventListener);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = window.setInterval(() => {
|
||||
setNow(new Date());
|
||||
}, 60000);
|
||||
|
||||
return () => window.clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const categories = useMemo(
|
||||
() => Array.from(new Set(products.map((product) => product.category))),
|
||||
[]
|
||||
);
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
const term = query.toLowerCase().trim();
|
||||
const nextProducts = products.filter((product) => {
|
||||
const matchesCategory =
|
||||
selectedCategory === 'All' || product.category === selectedCategory;
|
||||
const matchesQuery =
|
||||
!term ||
|
||||
[product.name, product.category, product.description]
|
||||
.join(' ')
|
||||
.toLowerCase()
|
||||
.includes(term);
|
||||
return matchesCategory && matchesQuery;
|
||||
});
|
||||
|
||||
const sorted = [...nextProducts];
|
||||
if (sortOption === 'price-asc') sorted.sort((a, b) => a.price - b.price);
|
||||
if (sortOption === 'price-desc') sorted.sort((a, b) => b.price - a.price);
|
||||
if (sortOption === 'name-asc') {
|
||||
sorted.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
if (sortOption === 'popular') sorted.sort((a, b) => b.rating - a.rating);
|
||||
return sorted;
|
||||
}, [query, selectedCategory, sortOption]);
|
||||
|
||||
const featuredProducts = useMemo(
|
||||
() => products.filter((product) => featuredSectionIds.includes(product.id)),
|
||||
[]
|
||||
);
|
||||
const lifestyleProducts = useMemo(
|
||||
() =>
|
||||
products.filter((product) =>
|
||||
homeLifestyleSectionIds.includes(product.id)
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const addressLabel = '22 Acacia St';
|
||||
const { placedLabel, windowLabel, etaLabel } = getDeliveryTiming(now);
|
||||
|
||||
const handleQuickAdd = (product: Product) => {
|
||||
const cart = readCart();
|
||||
const existingItem = cart.find((item) => item.id === product.id);
|
||||
|
||||
const nextCart = existingItem
|
||||
? cart.map((item) =>
|
||||
item.id === product.id
|
||||
? { ...item, quantity: item.quantity + 1 }
|
||||
: item
|
||||
)
|
||||
: [
|
||||
...cart,
|
||||
{
|
||||
id: product.id,
|
||||
name: product.name,
|
||||
price: product.price,
|
||||
quantity: 1,
|
||||
},
|
||||
];
|
||||
|
||||
writeCart(nextCart);
|
||||
setCartCount(nextCart.reduce((sum, item) => sum + item.quantity, 0));
|
||||
setToastMessage(`${product.name} added to basket`);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader className="home-premium-header ion-no-border">
|
||||
<IonToolbar>
|
||||
<div className="home-premium-toolbar">
|
||||
<div className="home-premium-location-block">
|
||||
<span>Deliver to</span>
|
||||
<button type="button" className="home-premium-location-button">
|
||||
<IonIcon icon={locationOutline} />
|
||||
<strong>{addressLabel}</strong>
|
||||
<IonIcon icon={chevronForwardOutline} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="home-premium-header-actions">
|
||||
<div className="home-open-pill">Open</div>
|
||||
<button
|
||||
type="button"
|
||||
className="home-premium-cart-button"
|
||||
onClick={() => history.push('/cart')}
|
||||
aria-label="Open basket"
|
||||
>
|
||||
<IonIcon icon={cartOutline} />
|
||||
<span>{cartCount}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
fullscreen
|
||||
className="hybrid-home-content premium-home-content"
|
||||
>
|
||||
<div className="home-premium-hero">
|
||||
<div className="home-premium-hero-copy">
|
||||
<span>Fresh groceries, fast</span>
|
||||
<h1>Shop today's picks</h1>
|
||||
<p>Curated essentials delivered in your next available slot.</p>
|
||||
</div>
|
||||
|
||||
<div className="home-premium-chip-grid">
|
||||
<div className="home-premium-chip">
|
||||
<IonIcon icon={timeOutline} />
|
||||
<div>
|
||||
<span>Placed</span>
|
||||
<strong>{placedLabel}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="home-premium-chip">
|
||||
<IonIcon icon={bagHandleOutline} />
|
||||
<div>
|
||||
<span>Delivery</span>
|
||||
<strong>{windowLabel}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-premium-search-card">
|
||||
<IonSearchbar
|
||||
value={query}
|
||||
onIonInput={(event) => setQuery(event.detail.value ?? '')}
|
||||
placeholder="Search products and brands"
|
||||
searchIcon={searchOutline}
|
||||
/>
|
||||
<div className="home-premium-search-actions">
|
||||
<IonIcon icon={storefrontOutline} />
|
||||
<IonIcon icon={micOutline} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="home-premium-tracking-card"
|
||||
onClick={() => history.push('/orders')}
|
||||
>
|
||||
<div className="home-premium-tracking-icon">
|
||||
<IonIcon icon={bagHandleOutline} />
|
||||
</div>
|
||||
<div className="home-premium-tracking-copy">
|
||||
<span>Order tracking</span>
|
||||
<strong>Order placed</strong>
|
||||
<p>ETA {etaLabel}</p>
|
||||
</div>
|
||||
<IonIcon icon={chevronForwardOutline} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="home-shelves-area hybrid-shelves-area premium-shelves-area">
|
||||
<ProductShelf
|
||||
title="GROCERIES PAYDAY DEALS"
|
||||
products={featuredProducts}
|
||||
onOpenProduct={(id) => history.push(`/product/${id}`)}
|
||||
onQuickAdd={handleQuickAdd}
|
||||
/>
|
||||
|
||||
<ProductShelf
|
||||
title="HOME & LIFESTYLE PAYDAY DEALS"
|
||||
products={lifestyleProducts}
|
||||
onOpenProduct={(id) => history.push(`/product/${id}`)}
|
||||
onQuickAdd={handleQuickAdd}
|
||||
/>
|
||||
|
||||
<div className="browse-section">
|
||||
<div className="section-heading reference-section-heading">
|
||||
<div>
|
||||
<h2>Browse everything</h2>
|
||||
<IonText color="medium">
|
||||
<p>{filteredProducts.length} products available</p>
|
||||
</IonText>
|
||||
</div>
|
||||
</div>
|
||||
<ProductFilters
|
||||
categories={categories}
|
||||
selectedCategory={selectedCategory}
|
||||
setSelectedCategory={setSelectedCategory}
|
||||
sortOption={sortOption}
|
||||
setSortOption={setSortOption}
|
||||
isOpen={isFilterOpen}
|
||||
onClose={() => setIsFilterOpen((value) => !value)}
|
||||
/>
|
||||
{filteredProducts.length === 0 ? (
|
||||
<div className="empty-state reference-empty-state">
|
||||
<IonIcon icon={bagHandleOutline} />
|
||||
<h3>No products found</h3>
|
||||
<p>Try a different search term or category.</p>
|
||||
<IonButton
|
||||
onClick={() => {
|
||||
setQuery('');
|
||||
setSelectedCategory('All');
|
||||
}}
|
||||
>
|
||||
Clear filters
|
||||
</IonButton>
|
||||
</div>
|
||||
) : (
|
||||
<div className="browse-product-grid">
|
||||
{filteredProducts.map((product) => (
|
||||
<button
|
||||
key={product.id}
|
||||
type="button"
|
||||
className="browse-product-card"
|
||||
onClick={() => history.push(`/product/${product.id}`)}
|
||||
>
|
||||
<div className="browse-product-image-wrap">
|
||||
<img src={product.image} alt={product.imageAlt} />
|
||||
<button
|
||||
type="button"
|
||||
className="browse-add-badge"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
handleQuickAdd(product);
|
||||
}}
|
||||
aria-label={`Add ${product.name} to cart`}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<div className="browse-product-copy">
|
||||
<span className="browse-product-category">
|
||||
{product.category}
|
||||
</span>
|
||||
<h3>{product.name}</h3>
|
||||
<div className="browse-price-row">
|
||||
<strong>${product.price.toFixed(2)}</strong>
|
||||
<div className="browse-meta-pill">
|
||||
<IonIcon icon={timeOutline} />
|
||||
<span>{product.prepTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>{product.description}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bottom-nav-spacer" />
|
||||
<IonToast
|
||||
isOpen={Boolean(toastMessage)}
|
||||
message={toastMessage}
|
||||
duration={1800}
|
||||
position="bottom"
|
||||
onDidDismiss={() => setToastMessage('')}
|
||||
/>
|
||||
|
||||
<div className="reference-bottom-nav">
|
||||
<button type="button" className="bottom-nav-item active">
|
||||
<IonIcon icon={homeOutline} />
|
||||
<span>Home</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="bottom-nav-item"
|
||||
onClick={() => setIsFilterOpen(true)}
|
||||
>
|
||||
<IonIcon icon={searchOutline} />
|
||||
<span>Discover</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="bottom-nav-item"
|
||||
onClick={() => history.push('/orders')}
|
||||
>
|
||||
<IonIcon icon={storefrontOutline} />
|
||||
<span>My Shop</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="bottom-nav-item"
|
||||
onClick={() => history.push(user ? '/profile' : '/auth')}
|
||||
>
|
||||
<IonIcon icon={personCircleOutline} />
|
||||
<span>My Profile</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="bottom-nav-item"
|
||||
onClick={() => history.push('/cart')}
|
||||
>
|
||||
<IonIcon icon={cartOutline} />
|
||||
<span>Basket</span>
|
||||
</button>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
@@ -1,900 +0,0 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
IonContent,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import {
|
||||
chevronForwardOutline,
|
||||
ellipsisVertical,
|
||||
flashOutline,
|
||||
heart,
|
||||
notificationsOutline,
|
||||
phonePortraitOutline,
|
||||
checkmarkCircleOutline,
|
||||
timeOutline,
|
||||
wifiOutline,
|
||||
medkitOutline,
|
||||
attach,
|
||||
attachOutline,
|
||||
trashOutline,
|
||||
pinOutline,
|
||||
} from 'ionicons/icons';
|
||||
import momImage from '../assets/mom.jpg';
|
||||
import dadImage from '../assets/dad.jpg';
|
||||
import basketIcon from '../assets/basket.png';
|
||||
import { setStatusBarStyle, Style } from '../utils/statusBar';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import DashboardSkeleton from '../components/DashboardSkeleton';
|
||||
import { formatMoney } from '../utils/formatMoney';
|
||||
import {
|
||||
buildCacheKey,
|
||||
readCache,
|
||||
removeCache,
|
||||
writeCache,
|
||||
} from '../utils/localCache';
|
||||
import {
|
||||
fetchHomeSnapshot,
|
||||
buildSnapshotHash,
|
||||
getWarmedHomeSnapshot,
|
||||
HomeAlert,
|
||||
SupportCategoryTone,
|
||||
} from '../utils/homeSnapshot';
|
||||
import { hydrateHomeSnapshotImages } from '../utils/imageCache';
|
||||
import '../styles/home.css';
|
||||
|
||||
type ActivityStatusTone = 'success' | 'warning' | 'info' | 'partial';
|
||||
|
||||
type HomeRenderableIcon = {
|
||||
iconType: 'ion' | 'image';
|
||||
icon?: any;
|
||||
iconSrc?: string;
|
||||
iconAlt?: string;
|
||||
};
|
||||
|
||||
const quickActions: Array<
|
||||
HomeRenderableIcon & {
|
||||
label: string;
|
||||
helper: string;
|
||||
tone: SupportCategoryTone;
|
||||
}
|
||||
> = [
|
||||
{
|
||||
label: 'Grocery',
|
||||
helper: 'Voucher for partner stores',
|
||||
iconType: 'image',
|
||||
iconSrc: basketIcon,
|
||||
iconAlt: 'Groceries',
|
||||
tone: 'grocery',
|
||||
},
|
||||
{
|
||||
label: 'Medication',
|
||||
helper: 'Voucher for trusted pharmacies',
|
||||
iconType: 'ion',
|
||||
icon: medkitOutline,
|
||||
tone: 'medication',
|
||||
},
|
||||
{
|
||||
label: 'Airtime & Data',
|
||||
helper: 'Top up mobile credit quickly',
|
||||
iconType: 'ion',
|
||||
icon: wifiOutline,
|
||||
tone: 'airtime',
|
||||
},
|
||||
{
|
||||
label: 'Electricity',
|
||||
helper: 'Send ZESA meter support',
|
||||
iconType: 'ion',
|
||||
icon: flashOutline,
|
||||
tone: 'electricity',
|
||||
},
|
||||
];
|
||||
|
||||
const renderHomeIcon = (item: HomeRenderableIcon) => {
|
||||
if (item.iconType === 'image' && item.iconSrc) {
|
||||
const isPill = item.iconSrc.includes('pill');
|
||||
const isBasket = item.iconSrc.includes('basket');
|
||||
return (
|
||||
<img
|
||||
src={item.iconSrc}
|
||||
alt={item.iconAlt ?? ''}
|
||||
className={`home-custom-icon ${isPill ? 'is-pill' : ''} ${isBasket ? 'is-basket' : ''}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return item.icon ? <IonIcon icon={item.icon} /> : null;
|
||||
};
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { user, profile, profileStatus } = useAuth();
|
||||
const [alerts, setAlerts] = useState<HomeAlert[]>([]);
|
||||
const [alertsLoading, setAlertsLoading] = useState(true);
|
||||
const [alertsError, setAlertsError] = useState<string | null>(null);
|
||||
const [lovedOnes, setLovedOnes] = useState<any[]>([]);
|
||||
const [lovedOnesLoading, setLovedOnesLoading] = useState(true);
|
||||
const [lovedOnesError, setLovedOnesError] = useState<string | null>(null);
|
||||
const [activities, setActivities] = useState<any[]>([]);
|
||||
const [activitiesLoading, setActivitiesLoading] = useState(true);
|
||||
const [activitiesError, setActivitiesError] = useState<string | null>(null);
|
||||
const [monthlySentTotal, setMonthlySentTotal] = useState(0);
|
||||
const [selectedLovedOne, setSelectedLovedOne] = useState<any | null>(null);
|
||||
const [lovedOneActionLoading, setLovedOneActionLoading] = useState(false);
|
||||
const [homeDataUserId, setHomeDataUserId] = useState<string | null>(null);
|
||||
const [profileAvatarUrl, setProfileAvatarUrl] = useState<string | null>(null);
|
||||
const lastSnapshotHashRef = useRef<string | null>(null);
|
||||
|
||||
const getProfileAvatarUrl = (avatarPath?: string | null) => {
|
||||
if (!avatarPath) return null;
|
||||
|
||||
const { data } = supabase.storage.from('avatars').getPublicUrl(avatarPath);
|
||||
return data.publicUrl || null;
|
||||
};
|
||||
|
||||
const getSeededRecipientImage = (
|
||||
firstName?: string | null,
|
||||
photoPath?: string | null
|
||||
) => {
|
||||
const normalizedPath = photoPath?.trim().toLowerCase();
|
||||
if (normalizedPath === 'mom.jpg' || normalizedPath === 'mum.jpg') {
|
||||
return momImage;
|
||||
}
|
||||
if (normalizedPath === 'dad.jpg' || normalizedPath === 'father.jpg') {
|
||||
return dadImage;
|
||||
}
|
||||
|
||||
const normalizedName = firstName?.trim().toLowerCase();
|
||||
if (normalizedName === 'mum' || normalizedName === 'mom') return momImage;
|
||||
if (normalizedName === 'dad' || normalizedName === 'father') {
|
||||
return dadImage;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const getRecipientAvatarUrl = async (
|
||||
photoPath?: string | null,
|
||||
firstName?: string | null
|
||||
) => {
|
||||
const seededImage = getSeededRecipientImage(firstName, photoPath);
|
||||
if (seededImage) return seededImage;
|
||||
|
||||
if (photoPath) {
|
||||
const { data } = supabase.storage
|
||||
.from('recipient-photos')
|
||||
.getPublicUrl(photoPath);
|
||||
if (data?.publicUrl) return data.publicUrl;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
setStatusBarStyle(Style.Light);
|
||||
if (user?.id) {
|
||||
void loadHomePageData(user.id);
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.id && profileStatus === 'loaded' && homeDataUserId !== user.id) {
|
||||
void loadHomePageData(user.id);
|
||||
}
|
||||
}, [homeDataUserId, profileStatus, user?.id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user?.id) {
|
||||
setProfileAvatarUrl(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const avatarCacheKey = buildCacheKey(user.id, 'profileAvatarUrl');
|
||||
let cancelled = false;
|
||||
|
||||
const loadAvatar = async () => {
|
||||
const cachedAvatarUrl = await readCache<string>(avatarCacheKey);
|
||||
if (!cancelled && cachedAvatarUrl) {
|
||||
setProfileAvatarUrl(cachedAvatarUrl);
|
||||
}
|
||||
|
||||
const nextAvatarUrl = getProfileAvatarUrl(profile?.avatar_path);
|
||||
if (!cancelled) {
|
||||
setProfileAvatarUrl(nextAvatarUrl);
|
||||
}
|
||||
|
||||
if (nextAvatarUrl) {
|
||||
void writeCache(avatarCacheKey, nextAvatarUrl);
|
||||
}
|
||||
};
|
||||
|
||||
void loadAvatar();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [profile?.avatar_path, user?.id]);
|
||||
|
||||
const loadHomePageData = async (activeUserId: string) => {
|
||||
setHomeDataUserId(activeUserId);
|
||||
|
||||
const cacheKey = buildCacheKey(activeUserId, 'homeSnapshot');
|
||||
let hasCache = false;
|
||||
try {
|
||||
const warmedSnapshot = getWarmedHomeSnapshot(activeUserId);
|
||||
const cached = warmedSnapshot ?? (await readCache<any>(cacheKey));
|
||||
const isCurrentUserCache = cached?.userId === activeUserId;
|
||||
if (
|
||||
cached &&
|
||||
isCurrentUserCache &&
|
||||
typeof cached === 'object' &&
|
||||
Array.isArray(cached.alerts) &&
|
||||
Array.isArray(cached.lovedOnes) &&
|
||||
Array.isArray(cached.activities) &&
|
||||
typeof cached.monthlySentTotal === 'number'
|
||||
) {
|
||||
setAlerts(cached.alerts);
|
||||
setLovedOnes(cached.lovedOnes);
|
||||
setActivities(cached.activities);
|
||||
setMonthlySentTotal(cached.monthlySentTotal);
|
||||
setAlertsLoading(false);
|
||||
setLovedOnesLoading(false);
|
||||
setActivitiesLoading(false);
|
||||
lastSnapshotHashRef.current = buildSnapshotHash({
|
||||
monthlySentTotal: cached.monthlySentTotal,
|
||||
alerts: cached.alerts,
|
||||
lovedOnes: cached.lovedOnes,
|
||||
activities: cached.activities,
|
||||
imageUrls: cached.imageUrls ?? [],
|
||||
});
|
||||
hasCache = true;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[home cache] error reading', err);
|
||||
}
|
||||
|
||||
if (!hasCache) {
|
||||
setAlertsLoading(true);
|
||||
setLovedOnesLoading(true);
|
||||
setActivitiesLoading(true);
|
||||
}
|
||||
setAlertsError(null);
|
||||
setLovedOnesError(null);
|
||||
setActivitiesError(null);
|
||||
|
||||
try {
|
||||
const nextSnapshot = await fetchHomeSnapshot(
|
||||
activeUserId,
|
||||
getRecipientAvatarUrl
|
||||
);
|
||||
const hydratedSnapshot = await hydrateHomeSnapshotImages(
|
||||
activeUserId,
|
||||
nextSnapshot
|
||||
);
|
||||
const nextSnapshotHash = buildSnapshotHash(hydratedSnapshot);
|
||||
|
||||
if (lastSnapshotHashRef.current !== nextSnapshotHash) {
|
||||
setMonthlySentTotal(hydratedSnapshot.monthlySentTotal);
|
||||
setAlerts(hydratedSnapshot.alerts);
|
||||
setLovedOnes(hydratedSnapshot.lovedOnes);
|
||||
setActivities(hydratedSnapshot.activities);
|
||||
lastSnapshotHashRef.current = nextSnapshotHash;
|
||||
}
|
||||
|
||||
setAlertsLoading(false);
|
||||
setLovedOnesLoading(false);
|
||||
setActivitiesLoading(false);
|
||||
|
||||
void writeCache(cacheKey, {
|
||||
userId: activeUserId,
|
||||
monthlySentTotal: hydratedSnapshot.monthlySentTotal,
|
||||
alerts: hydratedSnapshot.alerts,
|
||||
lovedOnes: hydratedSnapshot.lovedOnes,
|
||||
activities: hydratedSnapshot.activities,
|
||||
imageUrls: hydratedSnapshot.imageUrls,
|
||||
cachedAt: new Date().toISOString(),
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('[home data fetch]', err);
|
||||
setAlertsError('Could not load care alerts');
|
||||
setLovedOnesError('Could not load loved ones');
|
||||
setActivitiesError('Could not load activity');
|
||||
setAlertsLoading(false);
|
||||
setLovedOnesLoading(false);
|
||||
setActivitiesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAlertTap = (alert: HomeAlert) => {
|
||||
history.push('/support/new', {
|
||||
recipientId: alert.recipientId,
|
||||
serviceType: alert.serviceType,
|
||||
parentRoot: '/home',
|
||||
});
|
||||
};
|
||||
|
||||
const handleSupportClick = (serviceType?: SupportCategoryTone) => {
|
||||
history.push(
|
||||
'/support/new',
|
||||
serviceType
|
||||
? { serviceType, parentRoot: '/home' }
|
||||
: { parentRoot: '/home' }
|
||||
);
|
||||
};
|
||||
|
||||
const handleRecipientsClick = () => {
|
||||
history.push('/recipients');
|
||||
};
|
||||
|
||||
const handleTogglePinLovedOne = async () => {
|
||||
if (!selectedLovedOne?.id || !user?.id || lovedOneActionLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isPinned = Boolean(selectedLovedOne.pinnedAt);
|
||||
setLovedOneActionLoading(true);
|
||||
|
||||
const nextLovedOnes = lovedOnes.map((person) => {
|
||||
if (person.id !== selectedLovedOne.id) return person;
|
||||
return {
|
||||
...person,
|
||||
pinnedAt: isPinned ? null : new Date().toISOString(),
|
||||
};
|
||||
});
|
||||
|
||||
const sortedLovedOnes = [...nextLovedOnes].sort((a, b) => {
|
||||
if (a.pinnedAt && !b.pinnedAt) return -1;
|
||||
if (!a.pinnedAt && b.pinnedAt) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
setLovedOnes(sortedLovedOnes);
|
||||
setSelectedLovedOne(null);
|
||||
|
||||
const { error } = await supabase
|
||||
.from('recipients')
|
||||
.update({ pinned_at: isPinned ? null : new Date().toISOString() })
|
||||
.eq('id', selectedLovedOne.id)
|
||||
.eq('user_id', user.id);
|
||||
|
||||
if (error) {
|
||||
await loadHomePageData(user.id);
|
||||
}
|
||||
|
||||
setLovedOneActionLoading(false);
|
||||
};
|
||||
|
||||
const handleDeleteLovedOne = async () => {
|
||||
if (!selectedLovedOne?.id || !user?.id || lovedOneActionLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLovedOneActionLoading(true);
|
||||
const recipientId = selectedLovedOne.id;
|
||||
const previousLovedOnes = lovedOnes;
|
||||
|
||||
setLovedOnes((current) =>
|
||||
current.filter((person) => person.id !== recipientId)
|
||||
);
|
||||
setSelectedLovedOne(null);
|
||||
|
||||
const { error } = await supabase
|
||||
.from('recipients')
|
||||
.update({ archived_at: new Date().toISOString(), is_active: false })
|
||||
.eq('id', recipientId)
|
||||
.eq('user_id', user.id);
|
||||
|
||||
if (error) {
|
||||
setLovedOnes(previousLovedOnes);
|
||||
}
|
||||
|
||||
setLovedOneActionLoading(false);
|
||||
};
|
||||
|
||||
const displayName = useMemo(() => {
|
||||
const firstName = profile?.first_name?.trim();
|
||||
if (firstName) return firstName;
|
||||
|
||||
const emailName = user?.email?.split('@')[0]?.trim();
|
||||
return emailName || 'there';
|
||||
}, [profile?.first_name, user?.email]);
|
||||
|
||||
const displayInitial = displayName.charAt(0).toUpperCase();
|
||||
const activeLovedOnesCount = lovedOnes.length;
|
||||
const isPreviewMode = !user;
|
||||
const currentMonthLabel = useMemo(
|
||||
() =>
|
||||
new Intl.DateTimeFormat(undefined, {
|
||||
month: 'long',
|
||||
}).format(new Date()),
|
||||
[]
|
||||
);
|
||||
const monthlySentLabel = useMemo(
|
||||
() => formatMoney(monthlySentTotal, 'USD'),
|
||||
[monthlySentTotal]
|
||||
);
|
||||
const showInitialDashboardSkeleton =
|
||||
!isPreviewMode &&
|
||||
profileStatus === 'loading' &&
|
||||
lovedOnesLoading &&
|
||||
activitiesLoading &&
|
||||
alertsLoading &&
|
||||
lovedOnes.length === 0 &&
|
||||
activities.length === 0 &&
|
||||
alerts.length === 0;
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonContent
|
||||
fullscreen
|
||||
style={{ '--background': 'var(--color-bg)' } as React.CSSProperties}
|
||||
>
|
||||
{showInitialDashboardSkeleton ? (
|
||||
<DashboardSkeleton />
|
||||
) : (
|
||||
<div className="home-shell">
|
||||
<div className="home-topline">
|
||||
<div className="home-topline-left">
|
||||
<button
|
||||
type="button"
|
||||
className="home-main-avatar-wrap"
|
||||
aria-label="Open profile"
|
||||
onClick={() => history.push('/profile')}
|
||||
>
|
||||
{profileAvatarUrl ? (
|
||||
<img
|
||||
src={profileAvatarUrl}
|
||||
alt={profile?.full_name || displayName}
|
||||
className="home-main-avatar"
|
||||
/>
|
||||
) : (
|
||||
<span className="home-main-avatar-fallback">
|
||||
{displayInitial}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<div className="home-greeting-block">
|
||||
<h1 className="home-greeting">Hi {displayName} 👋</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="home-notification-card"
|
||||
aria-label="Notifications"
|
||||
onClick={() =>
|
||||
history.push('/notifications', { parentRoot: '/home' })
|
||||
}
|
||||
>
|
||||
<IonIcon icon={notificationsOutline} />
|
||||
<span className="home-dot" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="home-header-actions-row">
|
||||
<div className="home-tagline-wrap">
|
||||
<p className="home-subcopy">
|
||||
Supporting {activeLovedOnesCount}{' '}
|
||||
{activeLovedOnesCount === 1 ? 'loved one' : 'loved ones'} ❤️
|
||||
</p>
|
||||
</div>
|
||||
<div className="home-month-pill">
|
||||
<div className="home-month-icon">
|
||||
<IonIcon icon={heart} />
|
||||
</div>
|
||||
<div className="home-month-copy">
|
||||
<p className="home-month-label">{currentMonthLabel}</p>
|
||||
<p className="home-month-value">{monthlySentLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(alertsLoading || alertsError || alerts.length > 0) && (
|
||||
<>
|
||||
<div className="home-section-row">
|
||||
<h2 className="home-section-heading">Care Alerts</h2>
|
||||
</div>
|
||||
|
||||
<div className="home-alert-marquee">
|
||||
{alertsLoading && alerts.length === 0 ? (
|
||||
<div className="home-alert-overlay-state">
|
||||
<div
|
||||
className="home-alert-card home-alert-skeleton"
|
||||
aria-label="Loading care alerts"
|
||||
>
|
||||
<div className="home-alert-icon" />
|
||||
<div className="home-alert-content">
|
||||
<span className="home-alert-skeleton-title" />
|
||||
<span className="home-alert-skeleton-subtitle" />
|
||||
<span className="home-alert-skeleton-cta" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : alertsError ? (
|
||||
<div className="home-alert-overlay-state">
|
||||
<p className="home-alert-error">{alertsError}</p>
|
||||
</div>
|
||||
) : alerts.length > 0 ? (
|
||||
<div className="home-alert-marquee-track">
|
||||
{[...alerts, ...alerts].map((alert, index) => (
|
||||
<button
|
||||
key={`${alert.id}-${index}`}
|
||||
type="button"
|
||||
className="home-alert-card"
|
||||
onClick={() => handleAlertTap(alert)}
|
||||
>
|
||||
<div
|
||||
className={`home-alert-icon home-tone-${alert.tone}`}
|
||||
>
|
||||
{alert.iconType === 'image' ? (
|
||||
<img
|
||||
src={alert.icon as string}
|
||||
alt=""
|
||||
className="home-custom-icon is-basket"
|
||||
/>
|
||||
) : (
|
||||
<IonIcon icon={alert.icon as any} />
|
||||
)}
|
||||
</div>
|
||||
<div className="home-alert-content">
|
||||
<span className="home-alert-title">
|
||||
{alert.title}
|
||||
</span>
|
||||
<span className="home-alert-subtitle">
|
||||
{alert.subtitle}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`home-alert-chevron-chip home-tone-${alert.tone}`}
|
||||
>
|
||||
<IonIcon icon={chevronForwardOutline} />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="home-section-row home-section-row-spaced">
|
||||
<h2 className="home-section-heading">Your Loved Ones</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="home-section-link"
|
||||
onClick={handleRecipientsClick}
|
||||
>
|
||||
View all
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="home-loved-ones-scroll">
|
||||
{lovedOnesLoading && lovedOnes.length === 0 ? (
|
||||
<div
|
||||
className="home-person-card home-person-card-lavender"
|
||||
style={{ opacity: 0.5 }}
|
||||
>
|
||||
<div className="home-person-header">
|
||||
<div className="home-person-meta">
|
||||
<div className="home-person-avatar-shell"></div>
|
||||
<div>
|
||||
<p className="home-person-name">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : lovedOnesError ? (
|
||||
<p className="home-alert-error">{lovedOnesError}</p>
|
||||
) : lovedOnes.length === 0 ? (
|
||||
<div
|
||||
className="home-empty-alerts"
|
||||
style={{ margin: '0 20px', width: 'auto' }}
|
||||
>
|
||||
<div className="home-empty-alerts-icon">
|
||||
<IonIcon icon={heart} />
|
||||
</div>
|
||||
<h3 className="home-empty-alerts-msg">No loved ones yet</h3>
|
||||
<p className="home-empty-alerts-helper">
|
||||
Add family members to start supporting them.
|
||||
</p>
|
||||
<button
|
||||
className="home-empty-alerts-cta"
|
||||
onClick={handleRecipientsClick}
|
||||
>
|
||||
Add loved one
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
lovedOnes.map((person) => (
|
||||
<div
|
||||
key={person.id}
|
||||
className={`home-person-card home-person-card-${person.cardTone}`}
|
||||
>
|
||||
<div className="home-person-header">
|
||||
<div className="home-person-meta">
|
||||
<div className="home-person-avatar-shell">
|
||||
{person.avatar ? (
|
||||
<img
|
||||
src={person.avatar}
|
||||
alt={person.name}
|
||||
className="home-person-avatar"
|
||||
loading="eager"
|
||||
decoding="sync"
|
||||
/>
|
||||
) : (
|
||||
<span className="home-person-initial">
|
||||
{person.fallbackInitial}
|
||||
</span>
|
||||
)}
|
||||
<span className="home-person-online" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="home-person-name">
|
||||
{person.name} <span>{person.emoji}</span>
|
||||
</p>
|
||||
<p className="home-person-location">
|
||||
{person.lastSupportLabel}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-card-menu-wrap">
|
||||
<button
|
||||
type="button"
|
||||
className={`home-card-menu ${selectedLovedOne?.id === person.id ? 'is-active' : ''}`}
|
||||
aria-label={`More options for ${person.name}`}
|
||||
aria-expanded={selectedLovedOne?.id === person.id}
|
||||
onClick={() =>
|
||||
setSelectedLovedOne((current) =>
|
||||
current?.id === person.id ? null : person
|
||||
)
|
||||
}
|
||||
>
|
||||
<IonIcon icon={ellipsisVertical} />
|
||||
</button>
|
||||
{selectedLovedOne?.id === person.id && (
|
||||
<div className="home-loved-one-panel">
|
||||
<button
|
||||
type="button"
|
||||
className="home-loved-one-panel-action"
|
||||
onClick={() => {
|
||||
void handleTogglePinLovedOne();
|
||||
}}
|
||||
disabled={lovedOneActionLoading}
|
||||
>
|
||||
<IonIcon
|
||||
icon={person.pinnedAt ? attachOutline : attach}
|
||||
/>
|
||||
<span>{person.pinnedAt ? 'Unpin' : 'Pin'}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="home-loved-one-panel-action is-danger"
|
||||
onClick={() => {
|
||||
void handleDeleteLovedOne();
|
||||
}}
|
||||
disabled={lovedOneActionLoading}
|
||||
>
|
||||
<IonIcon icon={trashOutline} />
|
||||
<span>Remove</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-status-stack">
|
||||
{person.statuses.length > 0 ? (
|
||||
person.statuses.slice(0, 3).map((item: any) => {
|
||||
const isSuccess = item.status === 'success';
|
||||
return (
|
||||
<div
|
||||
key={`${person.id}-${item.id ?? item.createdAt ?? item.label}`}
|
||||
className="home-status-row"
|
||||
>
|
||||
<div
|
||||
className={`home-status-icon home-tone-${item.iconTone}`}
|
||||
>
|
||||
{renderHomeIcon(item)}
|
||||
</div>
|
||||
<div className="home-status-copy">
|
||||
<p className="home-status-label">
|
||||
{item.label}
|
||||
</p>
|
||||
<p
|
||||
className={`home-status-detail ${isSuccess ? 'is-success' : 'is-warning'}`}
|
||||
>
|
||||
{item.detail}
|
||||
</p>
|
||||
</div>
|
||||
<IonIcon
|
||||
icon={
|
||||
isSuccess
|
||||
? checkmarkCircleOutline
|
||||
: timeOutline
|
||||
}
|
||||
className={`home-status-trailing ${isSuccess ? 'is-success' : 'is-warning'}`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="home-status-empty-row">
|
||||
<IonIcon icon={heart} />
|
||||
<span>No support sent yet</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`home-send-button home-tone-${person.repeatAction.tone}`}
|
||||
onClick={() =>
|
||||
history.push('/support/new', {
|
||||
recipientId: person.id,
|
||||
serviceType: person.primaryServiceType,
|
||||
parentRoot: '/home',
|
||||
})
|
||||
}
|
||||
>
|
||||
<span className="home-send-button-icon">
|
||||
{renderHomeIcon(person.repeatAction)}
|
||||
</span>
|
||||
<span>{person.repeatCta}</span>
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="home-carousel-indicator">
|
||||
<span className="home-dot-active" />
|
||||
<span className="home-dot-inactive" />
|
||||
<span className="home-dot-inactive" />
|
||||
</div>
|
||||
|
||||
<div className="home-section-row home-section-row-spaced">
|
||||
<h2 className="home-section-heading">Send Support</h2>
|
||||
</div>
|
||||
|
||||
<div className="home-action-grid">
|
||||
{quickActions.map((action) => (
|
||||
<button
|
||||
key={action.label}
|
||||
type="button"
|
||||
className="home-action-card"
|
||||
onClick={() => handleSupportClick(action.tone)}
|
||||
>
|
||||
<div className={`home-action-icon home-tone-${action.tone}`}>
|
||||
{renderHomeIcon(action)}
|
||||
</div>
|
||||
<div className="home-action-text-block">
|
||||
<span className="home-action-label">{action.label}</span>
|
||||
<span className="home-action-helper">{action.helper}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="home-section-row">
|
||||
<h2 className="home-section-heading">Family Updates</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="home-section-link"
|
||||
onClick={() => history.push('/activity')}
|
||||
>
|
||||
View all
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="home-activity-card">
|
||||
{activitiesLoading && activities.length === 0 ? (
|
||||
<div
|
||||
style={{
|
||||
padding: '20px',
|
||||
textAlign: 'center',
|
||||
color: 'var(--ion-color-medium)',
|
||||
}}
|
||||
>
|
||||
Loading activity...
|
||||
</div>
|
||||
) : activitiesError ? (
|
||||
<div style={{ padding: '20px', textAlign: 'center' }}>
|
||||
<p className="home-alert-error">{activitiesError}</p>
|
||||
</div>
|
||||
) : activities.length === 0 ? (
|
||||
<div
|
||||
className="home-empty-alerts"
|
||||
style={{ boxShadow: 'none' }}
|
||||
>
|
||||
<div
|
||||
className="home-empty-alerts-icon"
|
||||
style={{
|
||||
background: 'rgba(23, 24, 39, 0.04)',
|
||||
color: 'var(--ion-color-medium)',
|
||||
}}
|
||||
>
|
||||
<IonIcon icon={timeOutline} />
|
||||
</div>
|
||||
<h3 className="home-empty-alerts-msg">No recent activity</h3>
|
||||
<p className="home-empty-alerts-helper">
|
||||
Support history will appear here once you send support.
|
||||
</p>
|
||||
<button
|
||||
className="home-empty-alerts-cta"
|
||||
onClick={() => handleSupportClick()}
|
||||
>
|
||||
Send first support
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
activities.map((activity, index) => (
|
||||
<button
|
||||
key={activity.id}
|
||||
type="button"
|
||||
className={`home-activity-row home-activity-row-button ${
|
||||
index === activities.length - 1 ? 'is-last' : ''
|
||||
}`}
|
||||
onClick={() =>
|
||||
history.push(`/recipients/${activity.recipientId}`)
|
||||
}
|
||||
>
|
||||
<div className="home-activity-avatar-shell">
|
||||
{activity.avatar ? (
|
||||
<img
|
||||
src={activity.avatar}
|
||||
alt=""
|
||||
className="home-activity-avatar"
|
||||
loading="eager"
|
||||
decoding="sync"
|
||||
/>
|
||||
) : (
|
||||
<div className="home-activity-avatar home-activity-avatar-fallback">
|
||||
<span>{activity.fallbackInitial}</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`home-activity-avatar-badge home-tone-${activity.iconTone}`}
|
||||
>
|
||||
{renderHomeIcon(activity.icon)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-activity-copy">
|
||||
<div className="home-activity-head-row">
|
||||
<div className="home-activity-text-block">
|
||||
<p className="home-activity-title">
|
||||
{activity.title}
|
||||
</p>
|
||||
<p className="home-activity-subtitle">
|
||||
{activity.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="home-activity-right">
|
||||
<p className="home-activity-amount">
|
||||
{formatMoney(Number(activity.amount), 'USD')}
|
||||
</p>
|
||||
<div
|
||||
className={`home-activity-badge home-badge-${activity.tone}`}
|
||||
>
|
||||
<span>{activity.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
@@ -0,0 +1,197 @@
|
||||
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;
|
||||
@@ -1,494 +0,0 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
IonActionSheet,
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonSkeletonText,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import {
|
||||
chevronBackOutline,
|
||||
chevronForwardOutline,
|
||||
ellipsisHorizontal,
|
||||
flashOutline,
|
||||
medkitOutline,
|
||||
notificationsOutline,
|
||||
phonePortraitOutline,
|
||||
receiptOutline,
|
||||
trashOutline,
|
||||
} from 'ionicons/icons';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import basketIcon from '../assets/basket.png';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import '../styles/activity.css';
|
||||
import '../styles/recipients.css';
|
||||
|
||||
type ServiceType =
|
||||
| 'grocery'
|
||||
| 'medication'
|
||||
| 'airtime'
|
||||
| 'electricity'
|
||||
| 'support';
|
||||
|
||||
type NotificationRow = {
|
||||
id: string;
|
||||
title: string;
|
||||
body: string;
|
||||
priority: string;
|
||||
type: string;
|
||||
read_at: string | null;
|
||||
created_at: string;
|
||||
order_id: string | null;
|
||||
voucher_id: string | null;
|
||||
support_orders: { service_type: string | null } | null;
|
||||
vouchers: { voucher_type: string | null } | null;
|
||||
};
|
||||
|
||||
const previewUserId = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
const notificationSelect =
|
||||
'id,title,body,priority,type,read_at,created_at,order_id,voucher_id';
|
||||
|
||||
const normalizeServiceType = (value?: string | null): ServiceType => {
|
||||
const normalized = value?.toLowerCase() ?? '';
|
||||
if (normalized.includes('med')) return 'medication';
|
||||
if (normalized.includes('air') || normalized.includes('data'))
|
||||
return 'airtime';
|
||||
if (normalized.includes('electric')) return 'electricity';
|
||||
if (normalized.includes('grocery') || normalized.includes('voucher')) {
|
||||
return 'grocery';
|
||||
}
|
||||
return 'support';
|
||||
};
|
||||
|
||||
const inferServiceType = (notification: NotificationRow): ServiceType => {
|
||||
const joinedType = notification.support_orders?.service_type;
|
||||
if (joinedType) return normalizeServiceType(joinedType);
|
||||
|
||||
const voucherType = notification.vouchers?.voucher_type;
|
||||
if (voucherType) return normalizeServiceType(voucherType);
|
||||
|
||||
return normalizeServiceType(
|
||||
`${notification.title} ${notification.body} ${notification.type}`
|
||||
);
|
||||
};
|
||||
|
||||
const getServicePresentation = (serviceType: ServiceType) => {
|
||||
if (serviceType === 'medication') {
|
||||
return {
|
||||
className: 'notification-service-medication',
|
||||
icon: medkitOutline,
|
||||
};
|
||||
}
|
||||
|
||||
if (serviceType === 'airtime') {
|
||||
return {
|
||||
className: 'notification-service-airtime',
|
||||
icon: phonePortraitOutline,
|
||||
};
|
||||
}
|
||||
|
||||
if (serviceType === 'electricity') {
|
||||
return {
|
||||
className: 'notification-service-electricity',
|
||||
icon: flashOutline,
|
||||
};
|
||||
}
|
||||
|
||||
if (serviceType === 'grocery') {
|
||||
return {
|
||||
className: 'notification-service-grocery',
|
||||
iconImageSrc: basketIcon,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
className: 'notification-service-support',
|
||||
icon: receiptOutline,
|
||||
};
|
||||
};
|
||||
|
||||
const NotificationsPage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { user } = useAuth();
|
||||
const isPreviewMode = !user;
|
||||
const [notifications, setNotifications] = useState<NotificationRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showActions, setShowActions] = useState(false);
|
||||
|
||||
const showError = useCallback((message: string) => {
|
||||
setError(message);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
}, []);
|
||||
|
||||
const loadNotifications = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const activeUserId = user?.id ?? previewUserId;
|
||||
let { data, error: loadError } = await supabase
|
||||
.from('notifications')
|
||||
.select(notificationSelect)
|
||||
.eq('user_id', activeUserId)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (!loadError && user?.id && (data ?? []).length === 0) {
|
||||
const previewResult = await supabase
|
||||
.from('notifications')
|
||||
.select(notificationSelect)
|
||||
.eq('user_id', previewUserId)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
data = previewResult.data;
|
||||
loadError = previewResult.error;
|
||||
}
|
||||
|
||||
if (loadError) {
|
||||
showError(loadError.message);
|
||||
setNotifications([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const baseNotifications = (data ?? []) as unknown as NotificationRow[];
|
||||
const orderIds = Array.from(
|
||||
new Set(
|
||||
baseNotifications
|
||||
.map((notification) => notification.order_id)
|
||||
.filter((id): id is string => Boolean(id))
|
||||
)
|
||||
);
|
||||
const voucherIds = Array.from(
|
||||
new Set(
|
||||
baseNotifications
|
||||
.map((notification) => notification.voucher_id)
|
||||
.filter((id): id is string => Boolean(id))
|
||||
)
|
||||
);
|
||||
|
||||
const [ordersResult, vouchersResult] = await Promise.all([
|
||||
orderIds.length > 0
|
||||
? supabase
|
||||
.from('support_orders')
|
||||
.select('id,service_type')
|
||||
.in('id', orderIds)
|
||||
: Promise.resolve({ data: [], error: null }),
|
||||
voucherIds.length > 0
|
||||
? supabase
|
||||
.from('vouchers')
|
||||
.select('id,voucher_type')
|
||||
.in('id', voucherIds)
|
||||
: Promise.resolve({ data: [], error: null }),
|
||||
]);
|
||||
|
||||
if (ordersResult.error || vouchersResult.error) {
|
||||
console.warn(
|
||||
'[NotificationsPage] Notification detail lookup failed',
|
||||
ordersResult.error ?? vouchersResult.error
|
||||
);
|
||||
}
|
||||
|
||||
const serviceTypesByOrderId = new Map(
|
||||
(
|
||||
(ordersResult.data ?? []) as {
|
||||
id: string;
|
||||
service_type: string | null;
|
||||
}[]
|
||||
).map((order) => [order.id, order.service_type])
|
||||
);
|
||||
const voucherTypesById = new Map(
|
||||
(
|
||||
(vouchersResult.data ?? []) as {
|
||||
id: string;
|
||||
voucher_type: string | null;
|
||||
}[]
|
||||
).map((voucher) => [voucher.id, voucher.voucher_type])
|
||||
);
|
||||
|
||||
setNotifications(
|
||||
baseNotifications.map((notification) => ({
|
||||
...notification,
|
||||
support_orders: notification.order_id
|
||||
? {
|
||||
service_type:
|
||||
serviceTypesByOrderId.get(notification.order_id) ?? null,
|
||||
}
|
||||
: null,
|
||||
vouchers: notification.voucher_id
|
||||
? {
|
||||
voucher_type:
|
||||
voucherTypesById.get(notification.voucher_id) ?? null,
|
||||
}
|
||||
: null,
|
||||
}))
|
||||
);
|
||||
} catch (loadCrash) {
|
||||
console.error(
|
||||
'[NotificationsPage] Failed to load notifications',
|
||||
loadCrash
|
||||
);
|
||||
showError('Notifications could not be loaded. Pull back and try again.');
|
||||
setNotifications([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [showError, user?.id]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadNotifications();
|
||||
}, [loadNotifications]);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
void loadNotifications();
|
||||
});
|
||||
|
||||
const markRead = async (notificationId: string) => {
|
||||
const readAt = new Date().toISOString();
|
||||
setNotifications((current) =>
|
||||
current.map((item) =>
|
||||
item.id === notificationId ? { ...item, read_at: readAt } : item
|
||||
)
|
||||
);
|
||||
|
||||
if (isPreviewMode) {
|
||||
const { error: updateError } = await supabase
|
||||
.from('notifications')
|
||||
.update({ read_at: readAt })
|
||||
.eq('id', notificationId)
|
||||
.eq('user_id', previewUserId);
|
||||
|
||||
if (updateError) {
|
||||
showError(updateError.message);
|
||||
void loadNotifications();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const { error: invokeError } = await supabase.functions.invoke(
|
||||
'mark-notification-read',
|
||||
{
|
||||
body: { notificationId },
|
||||
}
|
||||
);
|
||||
if (invokeError) {
|
||||
showError(invokeError.message);
|
||||
void loadNotifications();
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenNotification = async (notification: NotificationRow) => {
|
||||
if (!notification.read_at) {
|
||||
await markRead(notification.id);
|
||||
}
|
||||
if (notification.order_id) {
|
||||
history.push(`/orders/${notification.order_id}`, {
|
||||
parentRoot: '/profile',
|
||||
});
|
||||
} else if (notification.voucher_id) {
|
||||
history.push(`/voucher/${notification.voucher_id}`, {
|
||||
parentRoot: '/profile',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearNotifications = async () => {
|
||||
const targetUserId = user?.id ?? previewUserId;
|
||||
|
||||
const { error: deleteError } = await supabase
|
||||
.from('notifications')
|
||||
.delete()
|
||||
.eq('user_id', targetUserId);
|
||||
|
||||
if (deleteError) {
|
||||
showError(deleteError.message);
|
||||
return;
|
||||
}
|
||||
|
||||
setNotifications([]);
|
||||
setShowActions(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar
|
||||
style={
|
||||
{
|
||||
'--background': '#fafafa',
|
||||
'--border-width': '0px',
|
||||
'--padding-top': 'calc(var(--ion-safe-area-top, 0px) + 8px)',
|
||||
'--min-height': 'calc(64px + var(--ion-safe-area-top, 0px))',
|
||||
'--padding-start': '16px',
|
||||
'--padding-end': '16px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonButtons slot="start">
|
||||
<IonButton
|
||||
fill="clear"
|
||||
onClick={() =>
|
||||
history.length > 1
|
||||
? history.goBack()
|
||||
: history.replace('/profile')
|
||||
}
|
||||
aria-label="Go back"
|
||||
style={
|
||||
{
|
||||
'--color': 'var(--ion-color-primary)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle style={{ fontSize: 18, fontWeight: 700 }}>
|
||||
Notifications
|
||||
</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonButton
|
||||
fill="clear"
|
||||
onClick={() => setShowActions(true)}
|
||||
aria-label="Notification actions"
|
||||
disabled={loading || notifications.length === 0}
|
||||
style={
|
||||
{
|
||||
'--color': 'var(--ion-color-primary)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonIcon icon={ellipsisHorizontal} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
style={
|
||||
{
|
||||
'--background': '#fafafa',
|
||||
'--padding-top': '8px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonActionSheet
|
||||
isOpen={showActions}
|
||||
onDidDismiss={() => setShowActions(false)}
|
||||
header="Notifications"
|
||||
cssClass="app-action-sheet"
|
||||
buttons={[
|
||||
{
|
||||
text: 'Clear notifications',
|
||||
role: 'destructive',
|
||||
icon: trashOutline,
|
||||
handler: () => {
|
||||
void handleClearNotifications();
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{error && (
|
||||
<p style={{ margin: '12px 20px', color: '#dc2626', fontSize: 13 }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="notifications-list-card">
|
||||
{[1, 2, 3].map((item) => (
|
||||
<div className="notification-row" key={item}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 12,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '65%', height: 15 }}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '90%', height: 12 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : notifications.length === 0 ? (
|
||||
<div className="empty-state-card" style={{ marginTop: 20 }}>
|
||||
<IonIcon icon={notificationsOutline} className="esc-icon" />
|
||||
<h2 className="esc-title">No notifications yet</h2>
|
||||
<p className="esc-msg">
|
||||
Important payment and voucher updates will appear here.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="notifications-list-card">
|
||||
{notifications.map((notification) => {
|
||||
const service = getServicePresentation(
|
||||
inferServiceType(notification)
|
||||
);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={notification.id}
|
||||
type="button"
|
||||
className="notification-row"
|
||||
onClick={() => handleOpenNotification(notification)}
|
||||
style={{
|
||||
width: '100%',
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`nr-status-dot ${notification.read_at ? 'is-read' : 'is-unread'}`}
|
||||
/>
|
||||
<div
|
||||
className={`nr-icon-box ${service.className} ${notification.read_at ? 'is-read' : ''}`}
|
||||
>
|
||||
{service.iconImageSrc ? (
|
||||
<img src={service.iconImageSrc} alt="" />
|
||||
) : (
|
||||
<IonIcon icon={service.icon} />
|
||||
)}
|
||||
</div>
|
||||
<div className="nr-content">
|
||||
<h3 className="nr-title">{notification.title}</h3>
|
||||
<p className="nr-body">{notification.body}</p>
|
||||
<span className="nr-time">
|
||||
{new Date(notification.created_at).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<IonIcon
|
||||
icon={chevronForwardOutline}
|
||||
className="nr-link-icon"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationsPage;
|
||||
@@ -0,0 +1,163 @@
|
||||
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;
|
||||
@@ -0,0 +1,246 @@
|
||||
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;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,253 +0,0 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import {
|
||||
IonContent,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonRefresher,
|
||||
IonRefresherContent,
|
||||
IonSkeletonText,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import { receiptOutline } from 'ionicons/icons';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import ListSearchRow from '../components/ListSearchRow';
|
||||
import OrderSummaryCard, { OrderSummary } from '../components/OrderSummaryCard';
|
||||
import { formatMoney } from '../utils/formatMoney';
|
||||
import '../styles/support.css';
|
||||
import '../styles/recipients.css';
|
||||
|
||||
type OrderRow = {
|
||||
id: string;
|
||||
service_type: string;
|
||||
amount: number;
|
||||
status: string;
|
||||
created_at: string;
|
||||
recipient_id: string;
|
||||
merchant_id: string | null;
|
||||
recipients?: {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
photo_path: string | null;
|
||||
} | null;
|
||||
merchants?: { name: string; branch_name: string | null } | null;
|
||||
};
|
||||
|
||||
const statusFilters = [
|
||||
{ value: 'all', label: 'All' },
|
||||
{ value: 'paid', label: 'Paid' },
|
||||
{ value: 'ready_for_redemption', label: 'Ready' },
|
||||
{ value: 'redeemed', label: 'Redeemed' },
|
||||
{ value: 'delivered', label: 'Delivered' },
|
||||
{ value: 'expired', label: 'Expired' },
|
||||
];
|
||||
|
||||
const OrdersPage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { user } = useAuth();
|
||||
const [orders, setOrders] = useState<OrderSummary[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [activeStatus, setActiveStatus] = useState('all');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
void loadOrders();
|
||||
});
|
||||
|
||||
const showError = (message: string) => {
|
||||
setError(message);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const loadOrders = async () => {
|
||||
if (!user) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const { data, error: ordersError } = await supabase
|
||||
.from('support_orders')
|
||||
.select(
|
||||
'id,service_type,amount,status,created_at,recipient_id,merchant_id,recipients(first_name,last_name,photo_path),merchants(name,branch_name)'
|
||||
)
|
||||
.eq('user_id', user.id)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (ordersError) {
|
||||
showError(ordersError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const rows = (data ?? []) as unknown as OrderRow[];
|
||||
const normalized = await Promise.all(
|
||||
rows.map(async (row) => {
|
||||
const recipientName = row.recipients
|
||||
? `${row.recipients.first_name} ${row.recipients.last_name}`
|
||||
: 'Loved one';
|
||||
const avatarUrl = row.recipients?.photo_path
|
||||
? ((
|
||||
await supabase.storage
|
||||
.from('recipient-photos')
|
||||
.createSignedUrl(row.recipients.photo_path, 3600)
|
||||
).data?.signedUrl ?? null)
|
||||
: null;
|
||||
|
||||
return {
|
||||
id: row.id,
|
||||
recipientName,
|
||||
serviceType:
|
||||
row.service_type.charAt(0).toUpperCase() +
|
||||
row.service_type.slice(1),
|
||||
merchantName: row.merchants
|
||||
? `${row.merchants.name}${row.merchants.branch_name ? ` — ${row.merchants.branch_name}` : ''}`
|
||||
: undefined,
|
||||
amount: Number(row.amount ?? 0),
|
||||
amountLabel: formatMoney(Number(row.amount ?? 0)),
|
||||
status: row.status,
|
||||
createdAt: row.created_at,
|
||||
avatarUrl,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
setOrders(normalized);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const visibleOrders = useMemo(() => {
|
||||
const query = searchTerm.trim().toLowerCase();
|
||||
return orders.filter((order) => {
|
||||
const statusMatch =
|
||||
activeStatus === 'all' || order.status === activeStatus;
|
||||
const searchMatch =
|
||||
!query ||
|
||||
[
|
||||
order.recipientName,
|
||||
order.serviceType,
|
||||
order.merchantName,
|
||||
order.status,
|
||||
]
|
||||
.join(' ')
|
||||
.toLowerCase()
|
||||
.includes(query);
|
||||
return statusMatch && searchMatch;
|
||||
});
|
||||
}, [orders, activeStatus, searchTerm]);
|
||||
|
||||
const handleRefresh = async (event: CustomEvent) => {
|
||||
await loadOrders();
|
||||
event.detail.complete();
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonContent
|
||||
fullscreen
|
||||
style={
|
||||
{
|
||||
'--background': 'linear-gradient(180deg, #fafafa 0%, #f4f0ff 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '8px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
|
||||
<IonRefresherContent />
|
||||
</IonRefresher>
|
||||
|
||||
<div
|
||||
className="recipients-top-row"
|
||||
style={{ padding: 'calc(16px + var(--ion-safe-area-top)) 0 12px' }}
|
||||
>
|
||||
<div>
|
||||
<h1 className="recipients-page-title">Activity</h1>
|
||||
<p className="rlc-location" style={{ marginTop: 4 }}>
|
||||
{orders.length} support updates
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ListSearchRow
|
||||
value={searchTerm}
|
||||
onChange={setSearchTerm}
|
||||
placeholder="Search orders..."
|
||||
/>
|
||||
|
||||
<div className="orders-filter-row">
|
||||
{statusFilters.map((filter) => (
|
||||
<button
|
||||
key={filter.value}
|
||||
type="button"
|
||||
className={`status-filter-chip ${activeStatus === filter.value ? 'active' : 'inactive'}`}
|
||||
onClick={() => setActiveStatus(filter.value)}
|
||||
style={{ border: 'none' }}
|
||||
>
|
||||
{filter.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p style={{ margin: '0 20px 12px', color: '#dc2626', fontSize: 13 }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div>
|
||||
{[1, 2, 3].map((item) => (
|
||||
<div key={item} className="order-summary-card">
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 16,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '70%', height: 15 }}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '45%', height: 12 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : visibleOrders.length === 0 ? (
|
||||
<div className="empty-state-card">
|
||||
<IonIcon icon={receiptOutline} className="esc-icon" />
|
||||
<h2 className="esc-title">
|
||||
{orders.length === 0 ? 'No orders yet' : 'No matching orders'}
|
||||
</h2>
|
||||
<p className="esc-msg">
|
||||
{orders.length === 0
|
||||
? 'Your support transactions will appear here.'
|
||||
: 'Try changing your search or status filter.'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{visibleOrders.map((order) => (
|
||||
<OrderSummaryCard
|
||||
key={order.id}
|
||||
order={order}
|
||||
onClick={(id) => history.push(`/orders/${id}`)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrdersPage;
|
||||
@@ -0,0 +1,352 @@
|
||||
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;
|
||||
@@ -0,0 +1,205 @@
|
||||
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;
|
||||
@@ -0,0 +1,147 @@
|
||||
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;
|
||||
@@ -1,503 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonContent,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonSkeletonText,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import {
|
||||
cardOutline,
|
||||
createOutline,
|
||||
documentTextOutline,
|
||||
helpCircleOutline,
|
||||
informationCircleOutline,
|
||||
logoWhatsapp,
|
||||
logOutOutline,
|
||||
mailOutline,
|
||||
notificationsOutline,
|
||||
personOutline,
|
||||
phonePortraitOutline,
|
||||
shieldCheckmarkOutline,
|
||||
} from 'ionicons/icons';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { FirebaseAuthentication } from '@capacitor-firebase/authentication';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { buildCacheKey, readCache, writeCache } from '../utils/localCache';
|
||||
import SettingsRow from '../components/SettingsRow';
|
||||
import sarahAvatarImage from '../assets/sarah.jpg';
|
||||
import '../styles/profile.css';
|
||||
|
||||
type Profile = {
|
||||
id: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
full_name: string;
|
||||
phone: string;
|
||||
country_of_residence: string;
|
||||
avatar_path: string | null;
|
||||
notification_push_enabled: boolean;
|
||||
notification_email_enabled: boolean;
|
||||
notification_sms_enabled: boolean;
|
||||
};
|
||||
|
||||
type PreviewProfilePayload = {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
country_of_residence: string;
|
||||
avatar_url: string | null;
|
||||
notification_push_enabled: boolean;
|
||||
notification_email_enabled: boolean;
|
||||
notification_sms_enabled: boolean;
|
||||
};
|
||||
|
||||
const PREVIEW_PROFILE_STORAGE_KEY = 'kumusha-preview-profile';
|
||||
|
||||
const getPreviewProfilePayload = (): PreviewProfilePayload => {
|
||||
const fallback: PreviewProfilePayload = {
|
||||
first_name: 'Sarah',
|
||||
last_name: 'Moyo',
|
||||
phone: '+44 7123 456789',
|
||||
country_of_residence: 'United Kingdom',
|
||||
avatar_url: sarahAvatarImage,
|
||||
notification_push_enabled: true,
|
||||
notification_email_enabled: true,
|
||||
notification_sms_enabled: false,
|
||||
};
|
||||
|
||||
try {
|
||||
const saved = localStorage.getItem(PREVIEW_PROFILE_STORAGE_KEY);
|
||||
return saved ? { ...fallback, ...JSON.parse(saved) } : fallback;
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
};
|
||||
|
||||
const savePreviewProfilePayload = (
|
||||
profile: Profile,
|
||||
avatarUrl: string | null
|
||||
) => {
|
||||
const payload: PreviewProfilePayload = {
|
||||
first_name: profile.first_name,
|
||||
last_name: profile.last_name,
|
||||
phone: profile.phone,
|
||||
country_of_residence: profile.country_of_residence,
|
||||
avatar_url: avatarUrl,
|
||||
notification_push_enabled: profile.notification_push_enabled,
|
||||
notification_email_enabled: profile.notification_email_enabled,
|
||||
notification_sms_enabled: profile.notification_sms_enabled,
|
||||
};
|
||||
localStorage.setItem(PREVIEW_PROFILE_STORAGE_KEY, JSON.stringify(payload));
|
||||
};
|
||||
|
||||
const buildPreviewProfile = () => {
|
||||
const payload = getPreviewProfilePayload();
|
||||
const profile: Profile = {
|
||||
id: 'preview-profile',
|
||||
first_name: payload.first_name,
|
||||
last_name: payload.last_name,
|
||||
full_name: `${payload.first_name} ${payload.last_name}`,
|
||||
phone: payload.phone,
|
||||
country_of_residence: payload.country_of_residence,
|
||||
avatar_path: null,
|
||||
notification_push_enabled: payload.notification_push_enabled,
|
||||
notification_email_enabled: payload.notification_email_enabled,
|
||||
notification_sms_enabled: payload.notification_sms_enabled,
|
||||
};
|
||||
|
||||
return { profile, avatarUrl: payload.avatar_url };
|
||||
};
|
||||
|
||||
const profileHash = (profile: Profile, avatarUrl: string | null) =>
|
||||
JSON.stringify({ profile, avatarUrl });
|
||||
|
||||
const ProfilePage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { user, profile: authProfile, signOut, refreshProfile } = useAuth();
|
||||
const [profile, setProfile] = useState<Profile | null>(() =>
|
||||
authProfile ? (authProfile as Profile) : null
|
||||
);
|
||||
const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(!authProfile);
|
||||
const [signingOut, setSigningOut] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
void loadProfile();
|
||||
});
|
||||
|
||||
const showError = (message: string) => {
|
||||
setError(message);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const getPublicAvatarUrl = (avatarPath?: string | null) => {
|
||||
if (!avatarPath) return null;
|
||||
return supabase.storage.from('avatars').getPublicUrl(avatarPath).data
|
||||
.publicUrl;
|
||||
};
|
||||
|
||||
const loadProfile = async () => {
|
||||
if (!user) {
|
||||
const preview = buildPreviewProfile();
|
||||
setProfile(preview.profile);
|
||||
setAvatarUrl(preview.avatarUrl);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const profileCacheKey = buildCacheKey(user.id, 'profilePage');
|
||||
const avatarCacheKey = buildCacheKey(user.id, 'profileAvatarUrl');
|
||||
let hasDisplayProfile = Boolean(profile || authProfile);
|
||||
|
||||
try {
|
||||
const [cachedProfilePage, cachedAvatarUrl] = await Promise.all([
|
||||
readCache<{ profile: Profile; avatarUrl: string | null }>(
|
||||
profileCacheKey
|
||||
),
|
||||
readCache<string>(avatarCacheKey),
|
||||
]);
|
||||
|
||||
if (cachedProfilePage?.profile) {
|
||||
setProfile(cachedProfilePage.profile);
|
||||
setAvatarUrl(cachedProfilePage.avatarUrl ?? cachedAvatarUrl ?? null);
|
||||
hasDisplayProfile = true;
|
||||
} else if (authProfile) {
|
||||
const nextAvatarUrl =
|
||||
cachedAvatarUrl ?? getPublicAvatarUrl(authProfile.avatar_path);
|
||||
setProfile(authProfile as Profile);
|
||||
setAvatarUrl(nextAvatarUrl);
|
||||
hasDisplayProfile = true;
|
||||
} else if (cachedAvatarUrl) {
|
||||
setAvatarUrl(cachedAvatarUrl);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[profile cache] error', err);
|
||||
}
|
||||
|
||||
setLoading(!hasDisplayProfile);
|
||||
|
||||
const { data, error: profileError } = await supabase
|
||||
.from('profiles')
|
||||
.select('*')
|
||||
.eq('id', user.id)
|
||||
.single();
|
||||
|
||||
if (profileError || !data) {
|
||||
showError(profileError?.message ?? 'Profile not found');
|
||||
if (!hasDisplayProfile) {
|
||||
const preview = buildPreviewProfile();
|
||||
setProfile(preview.profile);
|
||||
setAvatarUrl(preview.avatarUrl);
|
||||
setLoading(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const nextProfile = data as Profile;
|
||||
const nextAvatarUrl = getPublicAvatarUrl(nextProfile.avatar_path);
|
||||
const previousHash = profile ? profileHash(profile, avatarUrl) : null;
|
||||
const nextHash = profileHash(nextProfile, nextAvatarUrl);
|
||||
|
||||
if (previousHash !== nextHash) {
|
||||
setProfile(nextProfile);
|
||||
setAvatarUrl(nextAvatarUrl);
|
||||
}
|
||||
|
||||
if (nextAvatarUrl) {
|
||||
void writeCache(avatarCacheKey, nextAvatarUrl);
|
||||
}
|
||||
void writeCache(profileCacheKey, {
|
||||
profile: nextProfile,
|
||||
avatarUrl: nextAvatarUrl,
|
||||
cachedAt: new Date().toISOString(),
|
||||
});
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleTogglePreference = async (
|
||||
field:
|
||||
| 'notification_push_enabled'
|
||||
| 'notification_email_enabled'
|
||||
| 'notification_sms_enabled',
|
||||
checked: boolean
|
||||
) => {
|
||||
if (!profile) return;
|
||||
const previous = profile;
|
||||
const next = { ...profile, [field]: checked };
|
||||
setProfile(next);
|
||||
|
||||
if (!user) {
|
||||
savePreviewProfilePayload(next, avatarUrl);
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedAt = new Date().toISOString();
|
||||
const updates: any =
|
||||
field === 'notification_push_enabled'
|
||||
? { notification_push_enabled: checked, updated_at: updatedAt }
|
||||
: field === 'notification_email_enabled'
|
||||
? { notification_email_enabled: checked, updated_at: updatedAt }
|
||||
: { notification_sms_enabled: checked, updated_at: updatedAt };
|
||||
|
||||
if (field === 'notification_push_enabled' && !checked) {
|
||||
updates.fcm_token = null;
|
||||
}
|
||||
|
||||
const { error: updateError } = await supabase
|
||||
.from('profiles')
|
||||
.update(updates)
|
||||
.eq('id', profile.id);
|
||||
|
||||
if (updateError) {
|
||||
setProfile(previous);
|
||||
showError(updateError.message);
|
||||
return;
|
||||
}
|
||||
await refreshProfile();
|
||||
};
|
||||
|
||||
const handleSignOut = async () => {
|
||||
setSigningOut(true);
|
||||
try {
|
||||
await FirebaseAuthentication.signOut().catch(() => undefined);
|
||||
await signOut();
|
||||
history.replace('/auth');
|
||||
} finally {
|
||||
setSigningOut(false);
|
||||
}
|
||||
};
|
||||
|
||||
const initials =
|
||||
profile?.full_name
|
||||
?.split(' ')
|
||||
.map((part) => part.charAt(0))
|
||||
.slice(0, 2)
|
||||
.join('')
|
||||
.toUpperCase() || '?';
|
||||
|
||||
const paymentMethodsCount = 0;
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonContent
|
||||
fullscreen
|
||||
className="profile-shell"
|
||||
style={
|
||||
{
|
||||
'--background': 'linear-gradient(180deg, #fafafa 0%, #f4f0ff 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': 'calc(var(--ion-safe-area-top, 0px) + 8px)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<h1 className="profile-page-title">Profile</h1>
|
||||
{error && (
|
||||
<p style={{ margin: '0 20px 12px', color: '#dc2626', fontSize: 13 }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="profile-summary-card">
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: 72, height: 72, borderRadius: 24, flexShrink: 0 }}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<IonSkeletonText animated style={{ width: '70%', height: 22 }} />
|
||||
<IonSkeletonText animated style={{ width: '90%', height: 14 }} />
|
||||
</div>
|
||||
</div>
|
||||
) : profile ? (
|
||||
<>
|
||||
<div className="profile-summary-card">
|
||||
<div className="psc-avatar-shell">
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt={profile.full_name}
|
||||
className="psc-avatar"
|
||||
/>
|
||||
) : (
|
||||
<div className="psc-avatar-placeholder">{initials}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="psc-info">
|
||||
<h2 className="psc-name">{profile.full_name}</h2>
|
||||
<p className="psc-location">{profile.country_of_residence}</p>
|
||||
</div>
|
||||
<IonButton
|
||||
className="psc-edit-btn"
|
||||
onClick={() => history.push('/profile/edit')}
|
||||
>
|
||||
<IonIcon icon={createOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</div>
|
||||
|
||||
<h2 className="settings-section-title">Payments</h2>
|
||||
<div className="settings-card">
|
||||
<SettingsRow
|
||||
icon={cardOutline}
|
||||
title="Saved cards"
|
||||
subtitle={
|
||||
paymentMethodsCount > 0
|
||||
? `${paymentMethodsCount} saved for faster checkout`
|
||||
: 'No saved cards yet'
|
||||
}
|
||||
onClick={() =>
|
||||
showError(
|
||||
'Saved cards will be added when payments are connected in a later phase'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2 className="settings-section-title">Account</h2>
|
||||
<div className="settings-card">
|
||||
<SettingsRow
|
||||
icon={personOutline}
|
||||
title="Edit profile"
|
||||
subtitle="Name, phone, country, avatar"
|
||||
onClick={() => history.push('/profile/edit')}
|
||||
/>
|
||||
<SettingsRow
|
||||
icon={notificationsOutline}
|
||||
title="Notifications"
|
||||
subtitle="Open your notification inbox"
|
||||
onClick={() => history.push('/notifications')}
|
||||
/>
|
||||
<SettingsRow
|
||||
icon={shieldCheckmarkOutline}
|
||||
title="Security settings"
|
||||
subtitle="Password and account safety"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
showError(
|
||||
'Security settings will be available after MVP launch'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2 className="settings-section-title">Support</h2>
|
||||
<div className="settings-card">
|
||||
<SettingsRow
|
||||
icon={helpCircleOutline}
|
||||
title="Help centre"
|
||||
subtitle="Get answers about vouchers and support"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
showError(
|
||||
'Help centre articles will be added in a later phase'
|
||||
)
|
||||
}
|
||||
/>
|
||||
<SettingsRow
|
||||
icon={logoWhatsapp}
|
||||
iconColor="#6d28d9"
|
||||
iconBg="rgba(109,40,217,0.1)"
|
||||
title="Contact support"
|
||||
subtitle="Talk to Kumusha if something goes wrong"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
showError('Support chat will be connected in a later phase')
|
||||
}
|
||||
/>
|
||||
<SettingsRow
|
||||
icon={informationCircleOutline}
|
||||
title="How Kumusha works"
|
||||
subtitle="Learn how vouchers, delivery and redemption work"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
showError(
|
||||
'Guided product explainers will be added in a later phase'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2 className="settings-section-title">Legal</h2>
|
||||
<div className="settings-card">
|
||||
<SettingsRow
|
||||
icon={documentTextOutline}
|
||||
title="Terms of service"
|
||||
subtitle="Read the rules for using Kumusha"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
showError('Terms of service will be added in a later phase')
|
||||
}
|
||||
/>
|
||||
<SettingsRow
|
||||
icon={shieldCheckmarkOutline}
|
||||
title="Privacy policy"
|
||||
subtitle="See how your account and recipient data is handled"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
showError('Privacy policy will be added in a later phase')
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2 className="settings-section-title">Preferences</h2>
|
||||
<div className="settings-card">
|
||||
<SettingsRow
|
||||
icon={notificationsOutline}
|
||||
title="Push notifications"
|
||||
type="toggle"
|
||||
checked={profile.notification_push_enabled}
|
||||
onToggle={(checked) =>
|
||||
handleTogglePreference('notification_push_enabled', checked)
|
||||
}
|
||||
/>
|
||||
<SettingsRow
|
||||
icon={mailOutline}
|
||||
title="Email updates"
|
||||
type="toggle"
|
||||
checked={profile.notification_email_enabled}
|
||||
onToggle={(checked) =>
|
||||
handleTogglePreference('notification_email_enabled', checked)
|
||||
}
|
||||
/>
|
||||
<SettingsRow
|
||||
icon={phonePortraitOutline}
|
||||
title="SMS updates"
|
||||
type="toggle"
|
||||
checked={profile.notification_sms_enabled}
|
||||
onToggle={(checked) =>
|
||||
handleTogglePreference('notification_sms_enabled', checked)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-card">
|
||||
<SettingsRow
|
||||
icon={logOutOutline}
|
||||
title={signingOut ? 'Signing out...' : 'Sign out'}
|
||||
type="button"
|
||||
destructive
|
||||
onClick={handleSignOut}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="profile-footer-mark">
|
||||
<div className="profile-footer-logo">K</div>
|
||||
<p className="profile-footer-name">Kumusha</p>
|
||||
<p className="profile-footer-meta">Version 1.0.0</p>
|
||||
<p className="profile-footer-copyright">
|
||||
© 2026 Kumusha. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfilePage;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,740 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonInput,
|
||||
IonList,
|
||||
IonModal,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import {
|
||||
cameraOutline,
|
||||
chevronBackOutline,
|
||||
closeOutline,
|
||||
} from 'ionicons/icons';
|
||||
import { useHistory, useParams } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { buildCacheKey, removeCache } from '../utils/localCache';
|
||||
import AvatarPicker from '../components/AvatarPicker';
|
||||
import momImage from '../assets/mom.jpg';
|
||||
import dadImage from '../assets/dad.jpg';
|
||||
import '../styles/recipients.css';
|
||||
|
||||
type Params = { id?: string };
|
||||
|
||||
type RecipientRow = {
|
||||
id: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
relationship: string;
|
||||
country: string;
|
||||
city: string;
|
||||
mobile_number: string;
|
||||
photo_path: string | null;
|
||||
};
|
||||
|
||||
const countryOptions = [
|
||||
{ name: 'Zimbabwe', flag: '🇿🇼', dialCode: '+263' },
|
||||
{ name: 'South Africa', flag: '🇿🇦', dialCode: '+27' },
|
||||
{ name: 'Zambia', flag: '🇿🇲', dialCode: '+260' },
|
||||
{ name: 'Botswana', flag: '🇧🇼', dialCode: '+267' },
|
||||
{ name: 'Mozambique', flag: '🇲🇿', dialCode: '+258' },
|
||||
{ name: 'United Kingdom', flag: '🇬🇧', dialCode: '+44' },
|
||||
{ name: 'United States', flag: '🇺🇸', dialCode: '+1' },
|
||||
{ name: 'Canada', flag: '🇨🇦', dialCode: '+1' },
|
||||
{ name: 'Australia', flag: '🇦🇺', dialCode: '+61' },
|
||||
];
|
||||
|
||||
const locationOptionsByCountry: Record<
|
||||
string,
|
||||
Array<{
|
||||
group: string;
|
||||
options: Array<{ name: string; description: string }>;
|
||||
}>
|
||||
> = {
|
||||
Zimbabwe: [
|
||||
{
|
||||
group: 'Major cities',
|
||||
options: [
|
||||
{ name: 'Harare', description: 'Capital city coverage' },
|
||||
{ name: 'Bulawayo', description: 'City merchants and pharmacies' },
|
||||
{ name: 'Mutare', description: 'Eastern Highlands coverage' },
|
||||
{ name: 'Gweru', description: 'Midlands city coverage' },
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Towns',
|
||||
options: [
|
||||
{ name: 'Chitungwiza', description: 'Harare metro support' },
|
||||
{ name: 'Masvingo', description: 'Town and surrounding areas' },
|
||||
{ name: 'Kwekwe', description: 'Supported collection points' },
|
||||
{ name: 'Kadoma', description: 'Supported collection points' },
|
||||
{ name: 'Victoria Falls', description: 'Town coverage' },
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Rural districts',
|
||||
options: [
|
||||
{ name: 'Murehwa District', description: 'Rural collection support' },
|
||||
{ name: 'Gokwe District', description: 'Rural collection support' },
|
||||
{ name: 'Buhera District', description: 'Rural collection support' },
|
||||
{ name: 'Zaka District', description: 'Rural collection support' },
|
||||
{ name: 'Guruve District', description: 'Rural collection support' },
|
||||
{
|
||||
name: 'Tsholotsho District',
|
||||
description: 'Rural collection support',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
Zambia: [
|
||||
{
|
||||
group: 'Major cities',
|
||||
options: [
|
||||
{ name: 'Lusaka', description: 'Capital city coverage' },
|
||||
{ name: 'Ndola', description: 'Copperbelt coverage' },
|
||||
{ name: 'Kitwe', description: 'Copperbelt coverage' },
|
||||
{ name: 'Livingstone', description: 'Town coverage' },
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Rural districts',
|
||||
options: [
|
||||
{ name: 'Chongwe District', description: 'Rural collection support' },
|
||||
{ name: 'Monze District', description: 'Rural collection support' },
|
||||
],
|
||||
},
|
||||
],
|
||||
Botswana: [
|
||||
{
|
||||
group: 'Cities and towns',
|
||||
options: [
|
||||
{ name: 'Gaborone', description: 'Capital city coverage' },
|
||||
{ name: 'Francistown', description: 'Town coverage' },
|
||||
{ name: 'Maun', description: 'Town coverage' },
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Rural districts',
|
||||
options: [
|
||||
{ name: 'Kweneng District', description: 'Rural collection support' },
|
||||
{ name: 'Central District', description: 'Rural collection support' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const fallbackLocationGroups = [
|
||||
{
|
||||
group: 'Supported areas',
|
||||
options: [
|
||||
{ name: 'Main city', description: 'Available merchant coverage' },
|
||||
{ name: 'Nearby town', description: 'Supported collection points' },
|
||||
{ name: 'Rural district', description: 'Rural collection support' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const getCountryMeta = (countryName: string) =>
|
||||
countryOptions.find((option) => option.name === countryName) ??
|
||||
countryOptions[0];
|
||||
|
||||
const getLocationGroups = (countryName: string) =>
|
||||
locationOptionsByCountry[countryName] ?? fallbackLocationGroups;
|
||||
|
||||
const getSeededRecipientImage = (
|
||||
firstName?: string | null,
|
||||
photoPath?: string | null
|
||||
) => {
|
||||
const normalizedPath = photoPath?.trim().toLowerCase();
|
||||
if (normalizedPath === 'mom.jpg' || normalizedPath === 'mum.jpg') {
|
||||
return momImage;
|
||||
}
|
||||
if (normalizedPath === 'dad.jpg' || normalizedPath === 'father.jpg') {
|
||||
return dadImage;
|
||||
}
|
||||
|
||||
const normalizedName = firstName?.trim().toLowerCase();
|
||||
if (normalizedName === 'mum' || normalizedName === 'mom') {
|
||||
return momImage;
|
||||
}
|
||||
if (normalizedName === 'dad' || normalizedName === 'father') {
|
||||
return dadImage;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const stripDialCode = (value: string, dialCode: string) => {
|
||||
const normalizedValue = value.trim();
|
||||
if (normalizedValue.startsWith(dialCode)) {
|
||||
return normalizedValue.slice(dialCode.length).trimStart();
|
||||
}
|
||||
return normalizedValue;
|
||||
};
|
||||
|
||||
const sanitizePhoneInput = (value: string) =>
|
||||
value.replace(/[^\d\s()-]/g, '').replace(/\s{2,}/g, ' ');
|
||||
|
||||
const normalizePhoneInput = (value: string) =>
|
||||
sanitizePhoneInput(value).replace(/^0+/, '');
|
||||
|
||||
const formatNameInput = (value: string) =>
|
||||
value
|
||||
.toLowerCase()
|
||||
.replace(
|
||||
/(^|[\s'-])([a-z])/g,
|
||||
(_match, separator: string, letter: string) =>
|
||||
`${separator}${letter.toUpperCase()}`
|
||||
);
|
||||
|
||||
const RecipientFormPage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { id } = useParams<Params>();
|
||||
const { user } = useAuth();
|
||||
const isEdit = Boolean(id);
|
||||
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [relationship, setRelationship] = useState('');
|
||||
const [country, setCountry] = useState('Zimbabwe');
|
||||
const [city, setCity] = useState('');
|
||||
const [mobileNumber, setMobileNumber] = useState('');
|
||||
const [showCountrySheet, setShowCountrySheet] = useState(false);
|
||||
const [showLocationSheet, setShowLocationSheet] = useState(false);
|
||||
const selectedCountry = getCountryMeta(country);
|
||||
const locationGroups = getLocationGroups(country);
|
||||
const [photoFile, setPhotoFile] = useState<File | null>(null);
|
||||
const [photoPreview, setPhotoPreview] = useState<string | null>(null);
|
||||
const previewObjectUrlRef = useRef<string | null>(null);
|
||||
const [existingPhotoPath, setExistingPhotoPath] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const firstNameInputRef = useRef<HTMLIonInputElement>(null);
|
||||
const lastNameInputRef = useRef<HTMLIonInputElement>(null);
|
||||
const relationshipInputRef = useRef<HTMLIonInputElement>(null);
|
||||
const mobileInputRef = useRef<HTMLIonInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
void loadRecipient();
|
||||
}
|
||||
}, [id, isEdit]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (previewObjectUrlRef.current) {
|
||||
URL.revokeObjectURL(previewObjectUrlRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleGoBack = () => {
|
||||
if (history.length > 1) {
|
||||
history.goBack();
|
||||
} else {
|
||||
history.replace('/recipients');
|
||||
}
|
||||
};
|
||||
|
||||
const showError = (message: string) => {
|
||||
setError(message);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const applyRecipientToForm = async (recipient: RecipientRow) => {
|
||||
setFirstName(recipient.first_name);
|
||||
setLastName(recipient.last_name);
|
||||
setRelationship(recipient.relationship);
|
||||
setCountry(recipient.country);
|
||||
setCity(recipient.city);
|
||||
const recipientCountry = getCountryMeta(recipient.country);
|
||||
setMobileNumber(
|
||||
stripDialCode(recipient.mobile_number, recipientCountry.dialCode)
|
||||
);
|
||||
setExistingPhotoPath(recipient.photo_path);
|
||||
|
||||
const seededImage = getSeededRecipientImage(
|
||||
recipient.first_name,
|
||||
recipient.photo_path
|
||||
);
|
||||
if (seededImage) {
|
||||
setPhotoPreview(seededImage);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!recipient.photo_path) {
|
||||
setPhotoPreview(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const { data: signed } = await supabase.storage
|
||||
.from('recipient-photos')
|
||||
.createSignedUrl(recipient.photo_path, 3600);
|
||||
setPhotoPreview(
|
||||
signed?.signedUrl
|
||||
? `${signed.signedUrl}&v=${encodeURIComponent(recipient.photo_path)}`
|
||||
: null
|
||||
);
|
||||
};
|
||||
|
||||
const loadRecipient = async () => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
|
||||
const ownerId = user?.id ?? '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
const { data, error: loadError } = await supabase
|
||||
.from('recipients')
|
||||
.select(
|
||||
'id,first_name,last_name,relationship,country,city,mobile_number,photo_path'
|
||||
)
|
||||
.eq('id', id)
|
||||
.eq('user_id', ownerId)
|
||||
.single();
|
||||
|
||||
if (loadError || !data) {
|
||||
showError(loadError?.message ?? 'Recipient not found');
|
||||
setLoading(false);
|
||||
history.replace('/recipients');
|
||||
return;
|
||||
}
|
||||
|
||||
const recipient = data as RecipientRow;
|
||||
await applyRecipientToForm(recipient);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handlePhotoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
if (previewObjectUrlRef.current) {
|
||||
URL.revokeObjectURL(previewObjectUrlRef.current);
|
||||
}
|
||||
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
previewObjectUrlRef.current = objectUrl;
|
||||
setPhotoFile(file);
|
||||
setPhotoPreview(objectUrl);
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (!user) {
|
||||
showError('Please sign in again to save this loved one');
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
first_name: firstName.trim(),
|
||||
last_name: lastName.trim(),
|
||||
relationship: relationship.trim(),
|
||||
country: country.trim(),
|
||||
city: city.trim(),
|
||||
mobile_number:
|
||||
`${selectedCountry.dialCode} ${mobileNumber.trim()}`.trim(),
|
||||
updated_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
if (
|
||||
!payload.first_name ||
|
||||
!payload.last_name ||
|
||||
!payload.relationship ||
|
||||
!payload.country ||
|
||||
!payload.city ||
|
||||
!payload.mobile_number
|
||||
) {
|
||||
showError('Please complete all required fields');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
|
||||
let photoPath = existingPhotoPath;
|
||||
if (photoFile) {
|
||||
const extension = photoFile.name.split('.').pop() || 'jpg';
|
||||
photoPath = `${user.id}/${Date.now()}.${extension}`;
|
||||
const { error: uploadError } = await supabase.storage
|
||||
.from('recipient-photos')
|
||||
.upload(photoPath, photoFile);
|
||||
|
||||
if (uploadError) {
|
||||
showError(uploadError.message);
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const recipientsCacheKey = buildCacheKey(user.id, 'recipientsList');
|
||||
|
||||
if (isEdit && id) {
|
||||
const { error: updateError } = await supabase
|
||||
.from('recipients')
|
||||
.update({ ...payload, photo_path: photoPath })
|
||||
.eq('id', id)
|
||||
.eq('user_id', user.id);
|
||||
|
||||
if (updateError) {
|
||||
showError(updateError.message);
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await Promise.all([
|
||||
removeCache(recipientsCacheKey),
|
||||
removeCache(buildCacheKey(user.id, `recipient_${id}`)),
|
||||
]);
|
||||
setSaving(false);
|
||||
history.push(`/recipients/${id}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, error: insertError } = await supabase
|
||||
.from('recipients')
|
||||
.insert({
|
||||
user_id: user.id,
|
||||
...payload,
|
||||
photo_path: photoPath,
|
||||
})
|
||||
.select('id')
|
||||
.single();
|
||||
|
||||
if (insertError || !data) {
|
||||
showError(insertError?.message ?? 'Could not create recipient');
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await removeCache(recipientsCacheKey);
|
||||
setSaving(false);
|
||||
history.replace(`/recipients/${data.id}`);
|
||||
};
|
||||
|
||||
const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar
|
||||
style={
|
||||
{
|
||||
'--background': '#fafafa',
|
||||
'--border-width': '0px',
|
||||
'--color': '#111827',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonButtons slot="start">
|
||||
<IonButton
|
||||
className="recipients-back-button"
|
||||
fill="clear"
|
||||
onClick={handleGoBack}
|
||||
aria-label="Go back"
|
||||
>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle style={{ fontSize: '18px', fontWeight: 700 }}>
|
||||
{isEdit ? 'Edit loved one' : 'Add loved one'}
|
||||
</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
style={
|
||||
{
|
||||
'--background': '#fafafa',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '8px',
|
||||
'--padding-bottom': 'calc(32px + var(--ion-safe-area-bottom, 0px))',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="recipient-form-card">
|
||||
<div className="rf-photo-picker">
|
||||
<IonIcon icon={cameraOutline} style={{ display: 'none' }} />
|
||||
<AvatarPicker
|
||||
previewUrl={photoPreview}
|
||||
onFileChange={handlePhotoChange}
|
||||
initials={initials || undefined}
|
||||
disabled={loading || saving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="rf-input-shell rf-text-shell"
|
||||
onClick={() => void firstNameInputRef.current?.setFocus()}
|
||||
disabled={loading || saving}
|
||||
aria-label="Enter first name"
|
||||
>
|
||||
<span className="rf-field-label">First name</span>
|
||||
<IonInput
|
||||
ref={firstNameInputRef}
|
||||
className="rf-field"
|
||||
type="text"
|
||||
placeholder="Sarah"
|
||||
value={firstName}
|
||||
disabled={loading || saving}
|
||||
onIonInput={(event) =>
|
||||
setFirstName(formatNameInput(event.detail.value ?? ''))
|
||||
}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rf-input-shell rf-text-shell"
|
||||
onClick={() => void lastNameInputRef.current?.setFocus()}
|
||||
disabled={loading || saving}
|
||||
aria-label="Enter last name"
|
||||
>
|
||||
<span className="rf-field-label">Last name</span>
|
||||
<IonInput
|
||||
ref={lastNameInputRef}
|
||||
className="rf-field"
|
||||
type="text"
|
||||
placeholder="Moyo"
|
||||
value={lastName}
|
||||
disabled={loading || saving}
|
||||
onIonInput={(event) =>
|
||||
setLastName(formatNameInput(event.detail.value ?? ''))
|
||||
}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rf-input-shell rf-text-shell"
|
||||
onClick={() => void relationshipInputRef.current?.setFocus()}
|
||||
disabled={loading || saving}
|
||||
aria-label="Enter relationship"
|
||||
>
|
||||
<span className="rf-field-label">Relationship</span>
|
||||
<IonInput
|
||||
ref={relationshipInputRef}
|
||||
className="rf-field"
|
||||
type="text"
|
||||
placeholder="Mum, Brother, Aunt"
|
||||
value={relationship}
|
||||
disabled={loading || saving}
|
||||
onIonInput={(event) =>
|
||||
setRelationship(formatNameInput(event.detail.value ?? ''))
|
||||
}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rf-country-trigger"
|
||||
onClick={() => setShowCountrySheet(true)}
|
||||
disabled={loading || saving}
|
||||
aria-label="Select country"
|
||||
>
|
||||
<span className="rf-country-label">Country</span>
|
||||
<span className="rf-country-value-row">
|
||||
<span className="rf-country-value">
|
||||
{`${selectedCountry.flag} ${selectedCountry.name} (${selectedCountry.dialCode})`}
|
||||
</span>
|
||||
<IonIcon
|
||||
icon={chevronBackOutline}
|
||||
className="rf-country-chevron"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rf-country-trigger"
|
||||
onClick={() => setShowLocationSheet(true)}
|
||||
disabled={loading || saving}
|
||||
aria-label="Select recipient location"
|
||||
>
|
||||
<span className="rf-country-label">Location</span>
|
||||
<span className="rf-country-value-row">
|
||||
<span
|
||||
className={`rf-country-value${city ? '' : ' is-placeholder'}`}
|
||||
>
|
||||
{city || 'City, town, or rural area'}
|
||||
</span>
|
||||
<IonIcon
|
||||
icon={chevronBackOutline}
|
||||
className="rf-country-chevron"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rf-input-shell rf-phone-shell"
|
||||
onClick={() => void mobileInputRef.current?.setFocus()}
|
||||
disabled={loading || saving}
|
||||
aria-label="Enter mobile number"
|
||||
>
|
||||
<span className="rf-field-label">Mobile number</span>
|
||||
<div className="rf-phone-row">
|
||||
<div className="rf-phone-prefix" aria-hidden="true">
|
||||
<span className="rf-phone-flag">{selectedCountry.flag}</span>
|
||||
<span className="rf-phone-code">
|
||||
{selectedCountry.dialCode}
|
||||
</span>
|
||||
</div>
|
||||
<IonInput
|
||||
ref={mobileInputRef}
|
||||
className="rf-field rf-phone-field"
|
||||
type="tel"
|
||||
inputMode="tel"
|
||||
placeholder="77 123 4567"
|
||||
value={mobileNumber}
|
||||
disabled={loading || saving}
|
||||
onIonInput={(event) =>
|
||||
setMobileNumber(
|
||||
normalizePhoneInput(event.detail.value ?? '')
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
{error && (
|
||||
<p style={{ margin: 0, color: '#dc2626', fontSize: '13px' }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="rf-actions">
|
||||
<IonButton
|
||||
type="submit"
|
||||
expand="block"
|
||||
className="rf-submit-btn"
|
||||
disabled={loading || saving}
|
||||
>
|
||||
{saving ? 'Saving...' : isEdit ? 'Save changes' : 'Add loved one'}
|
||||
</IonButton>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<IonModal
|
||||
isOpen={showCountrySheet}
|
||||
onDidDismiss={() => setShowCountrySheet(false)}
|
||||
initialBreakpoint={1}
|
||||
breakpoints={[0, 1]}
|
||||
handle={true}
|
||||
className="country-sheet-modal"
|
||||
>
|
||||
<div className="country-sheet-shell">
|
||||
<div className="country-sheet-header">
|
||||
<h2>Select country</h2>
|
||||
<IonButton
|
||||
fill="clear"
|
||||
className="country-sheet-close"
|
||||
onClick={() => setShowCountrySheet(false)}
|
||||
aria-label="Close country selector"
|
||||
>
|
||||
<IonIcon icon={closeOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</div>
|
||||
<div className="country-sheet-scroll">
|
||||
<IonList lines="none" className="country-sheet-list">
|
||||
{countryOptions.map((option) => {
|
||||
const isSelected = option.name === country;
|
||||
return (
|
||||
<button
|
||||
key={option.name}
|
||||
type="button"
|
||||
className={`country-sheet-option${isSelected ? ' is-selected' : ''}`}
|
||||
onClick={() => {
|
||||
setCountry(option.name);
|
||||
setCity('');
|
||||
setShowCountrySheet(false);
|
||||
}}
|
||||
>
|
||||
<span className="country-sheet-option-text">
|
||||
<span className="country-sheet-flag">
|
||||
{option.flag}
|
||||
</span>
|
||||
<span className="country-sheet-name">
|
||||
{option.name}
|
||||
</span>
|
||||
<span className="country-sheet-code">
|
||||
({option.dialCode})
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</IonList>
|
||||
</div>
|
||||
</div>
|
||||
</IonModal>
|
||||
|
||||
<IonModal
|
||||
isOpen={showLocationSheet}
|
||||
onDidDismiss={() => setShowLocationSheet(false)}
|
||||
initialBreakpoint={1}
|
||||
breakpoints={[0, 1]}
|
||||
handle={true}
|
||||
className="country-sheet-modal"
|
||||
>
|
||||
<div className="country-sheet-shell">
|
||||
<div className="country-sheet-header">
|
||||
<h2>Select location</h2>
|
||||
<IonButton
|
||||
fill="clear"
|
||||
className="country-sheet-close"
|
||||
onClick={() => setShowLocationSheet(false)}
|
||||
aria-label="Close location selector"
|
||||
>
|
||||
<IonIcon icon={closeOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</div>
|
||||
<div className="country-sheet-scroll">
|
||||
<div className="location-sheet-helper">
|
||||
Choose a city, town, or rural district where support collection
|
||||
is available.
|
||||
</div>
|
||||
{locationGroups.map((group) => (
|
||||
<div key={group.group} className="location-sheet-group">
|
||||
<p className="location-sheet-group-title">{group.group}</p>
|
||||
{group.options.map((option) => {
|
||||
const isSelected = option.name === city;
|
||||
return (
|
||||
<button
|
||||
key={option.name}
|
||||
type="button"
|
||||
className={`country-sheet-option location-sheet-option${isSelected ? ' is-selected' : ''}`}
|
||||
onClick={() => {
|
||||
setCity(option.name);
|
||||
setShowLocationSheet(false);
|
||||
}}
|
||||
>
|
||||
<span className="location-sheet-option-text">
|
||||
<span className="location-sheet-name">
|
||||
{option.name}
|
||||
</span>
|
||||
<span className="location-sheet-description">
|
||||
{option.description}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</IonModal>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecipientFormPage;
|
||||
@@ -1,347 +0,0 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonContent,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonRefresher,
|
||||
IonRefresherContent,
|
||||
IonSkeletonText,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import { addOutline, peopleOutline } from 'ionicons/icons';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import dadImage from '../assets/dad.jpg';
|
||||
import momImage from '../assets/mom.jpg';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import {
|
||||
buildCacheKey,
|
||||
readCache,
|
||||
removeCache,
|
||||
writeCache,
|
||||
} from '../utils/localCache';
|
||||
import ListSearchRow from '../components/ListSearchRow';
|
||||
import RecipientListCard, {
|
||||
RecipientListItem,
|
||||
} from '../components/RecipientListCard';
|
||||
import '../styles/recipients.css';
|
||||
|
||||
type RecipientRow = {
|
||||
id: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
relationship: string;
|
||||
country: string;
|
||||
city: string;
|
||||
photo_path: string | null;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
type ActivityRow = {
|
||||
recipient_id: string | null;
|
||||
event_at: string;
|
||||
};
|
||||
|
||||
const formatLastActivity = (dateText?: string) => {
|
||||
if (!dateText) return 'No support yet';
|
||||
const diffMs = Date.now() - new Date(dateText).getTime();
|
||||
const diffDays = Math.max(0, Math.floor(diffMs / 86400000));
|
||||
if (diffDays === 0) return 'Today';
|
||||
if (diffDays === 1) return 'Yesterday';
|
||||
return `${diffDays} days ago`;
|
||||
};
|
||||
|
||||
const getSeededRecipientImage = (firstName?: string | null) => {
|
||||
const normalized = firstName?.trim().toLowerCase();
|
||||
if (normalized === 'mum' || normalized === 'mom') return momImage;
|
||||
if (normalized === 'dad' || normalized === 'father') return dadImage;
|
||||
return null;
|
||||
};
|
||||
|
||||
const recipientsListMemory = new Map<string, RecipientListItem[]>();
|
||||
|
||||
const getRecipientAvatarUrl = async (photoPath: string | null) => {
|
||||
if (!photoPath) return null;
|
||||
|
||||
const { data: signedData } = await supabase.storage
|
||||
.from('recipient-photos')
|
||||
.createSignedUrl(photoPath, 3600);
|
||||
|
||||
if (signedData?.signedUrl) {
|
||||
return `${signedData.signedUrl}&v=${encodeURIComponent(photoPath)}`;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const RecipientsPage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { user } = useAuth();
|
||||
const activeInitialUserId =
|
||||
user?.id ?? '00000000-0000-0000-0000-000000000000';
|
||||
const initialRecipients = recipientsListMemory.get(activeInitialUserId) ?? [];
|
||||
const [recipients, setRecipients] =
|
||||
useState<RecipientListItem[]>(initialRecipients);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [loading, setLoading] = useState(initialRecipients.length === 0);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
void loadRecipients({ forceRefresh: true });
|
||||
});
|
||||
|
||||
const showError = (message: string) => {
|
||||
setError(message);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const loadRecipients = async (options?: { forceRefresh?: boolean }) => {
|
||||
const activeUserId = user?.id ?? '00000000-0000-0000-0000-000000000000';
|
||||
const cacheKey = buildCacheKey(activeUserId, 'recipientsList');
|
||||
|
||||
if (options?.forceRefresh) {
|
||||
recipientsListMemory.delete(activeUserId);
|
||||
await removeCache(cacheKey);
|
||||
}
|
||||
|
||||
let hasCache = false;
|
||||
if (!options?.forceRefresh) {
|
||||
const memoryCached = recipientsListMemory.get(activeUserId);
|
||||
if (memoryCached) {
|
||||
setRecipients(memoryCached);
|
||||
setLoading(false);
|
||||
hasCache = true;
|
||||
}
|
||||
|
||||
try {
|
||||
const cached = await readCache<RecipientListItem[]>(cacheKey);
|
||||
if (cached && Array.isArray(cached)) {
|
||||
recipientsListMemory.set(activeUserId, cached);
|
||||
setRecipients(cached);
|
||||
setLoading(false);
|
||||
hasCache = true;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[recipients cache] error', err);
|
||||
}
|
||||
}
|
||||
|
||||
if (!hasCache) {
|
||||
setLoading(true);
|
||||
}
|
||||
setError(null);
|
||||
|
||||
const [recipientsResult, activityResult] = await Promise.all([
|
||||
supabase
|
||||
.from('recipients')
|
||||
.select(
|
||||
'id,first_name,last_name,relationship,country,city,photo_path,created_at,is_active,archived_at,pinned_at'
|
||||
)
|
||||
.eq('user_id', activeUserId)
|
||||
.is('archived_at', null)
|
||||
.order('pinned_at', { ascending: false, nullsFirst: false })
|
||||
.order('created_at', { ascending: false }),
|
||||
supabase
|
||||
.from('activity_events')
|
||||
.select('recipient_id,event_at')
|
||||
.eq('user_id', activeUserId)
|
||||
.order('event_at', { ascending: false })
|
||||
.limit(100),
|
||||
]);
|
||||
|
||||
const queryError = recipientsResult.error ?? activityResult.error;
|
||||
if (queryError) {
|
||||
showError(queryError.message);
|
||||
if (!hasCache) setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const activities = (activityResult.data ?? []) as ActivityRow[];
|
||||
// Filter active on the client if it's the real user; preview user bypass may not have is_active set consistently
|
||||
const rows = (recipientsResult.data ?? []) as (RecipientRow & {
|
||||
is_active: boolean | null;
|
||||
})[];
|
||||
const activeRows = user ? rows.filter((r) => r.is_active !== false) : rows;
|
||||
|
||||
const list = await Promise.all(
|
||||
activeRows.map(async (recipient) => {
|
||||
const latestActivity = activities.find(
|
||||
(a) => a.recipient_id === recipient.id
|
||||
);
|
||||
|
||||
let avatarUrl = await getRecipientAvatarUrl(recipient.photo_path);
|
||||
|
||||
if (!avatarUrl) {
|
||||
avatarUrl = getSeededRecipientImage(recipient.first_name);
|
||||
}
|
||||
|
||||
return {
|
||||
id: recipient.id,
|
||||
firstName: recipient.first_name,
|
||||
lastName: recipient.last_name,
|
||||
relationship: recipient.relationship,
|
||||
location: `${recipient.city}, ${recipient.country}`,
|
||||
lastActivityText: formatLastActivity(latestActivity?.event_at),
|
||||
avatarUrl,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
const nextHash = JSON.stringify(list);
|
||||
const currentHash = JSON.stringify(
|
||||
recipientsListMemory.get(activeUserId) ?? recipients
|
||||
);
|
||||
recipientsListMemory.set(activeUserId, list);
|
||||
if (nextHash !== currentHash) {
|
||||
setRecipients(list);
|
||||
}
|
||||
setLoading(false);
|
||||
void writeCache(cacheKey, list);
|
||||
};
|
||||
|
||||
const visibleRecipients = useMemo(() => {
|
||||
const query = searchTerm.trim().toLowerCase();
|
||||
if (!query) return recipients;
|
||||
return recipients.filter((recipient) =>
|
||||
[
|
||||
recipient.firstName,
|
||||
recipient.lastName,
|
||||
recipient.relationship,
|
||||
recipient.location,
|
||||
]
|
||||
.join(' ')
|
||||
.toLowerCase()
|
||||
.includes(query)
|
||||
);
|
||||
}, [recipients, searchTerm]);
|
||||
|
||||
const handleRefresh = async (event: CustomEvent) => {
|
||||
await loadRecipients({ forceRefresh: true });
|
||||
event.detail.complete();
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonContent
|
||||
fullscreen
|
||||
className="recipients-shell"
|
||||
style={
|
||||
{
|
||||
'--background': 'linear-gradient(180deg, #fafafa 0%, #f4f0ff 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': 'calc(var(--ion-safe-area-top, 0px) + 8px)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
|
||||
<IonRefresherContent />
|
||||
</IonRefresher>
|
||||
|
||||
<div className="recipients-top-row" style={{ padding: '16px 0 12px' }}>
|
||||
<div>
|
||||
<h1 className="recipients-page-title">Loved ones</h1>
|
||||
<p className="rlc-location" style={{ marginTop: '4px' }}>
|
||||
Manage family and care recipients
|
||||
</p>
|
||||
</div>
|
||||
<IonButton
|
||||
className="recipients-add-btn"
|
||||
onClick={() => history.push('/recipients/new')}
|
||||
>
|
||||
<IonIcon icon={addOutline} slot="start" />
|
||||
Add
|
||||
</IonButton>
|
||||
</div>
|
||||
|
||||
<ListSearchRow
|
||||
value={searchTerm}
|
||||
onChange={setSearchTerm}
|
||||
placeholder="Search loved ones..."
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p
|
||||
style={{
|
||||
margin: '0 20px 12px',
|
||||
color: '#dc2626',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div>
|
||||
{[1, 2, 3].map((item) => (
|
||||
<div key={item} className="recipient-list-card">
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{
|
||||
width: '52px',
|
||||
height: '52px',
|
||||
borderRadius: '16px',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '60%', height: '16px' }}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: '40%', height: '12px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : visibleRecipients.length === 0 ? (
|
||||
<div className="empty-state-card">
|
||||
<IonIcon icon={peopleOutline} className="esc-icon" />
|
||||
<h2 className="esc-title">
|
||||
{recipients.length === 0
|
||||
? 'No loved ones yet'
|
||||
: 'No matches found'}
|
||||
</h2>
|
||||
<p className="esc-msg">
|
||||
{recipients.length === 0
|
||||
? 'Add your first loved one so you can send support with confidence.'
|
||||
: 'Try a different name, relationship, or city.'}
|
||||
</p>
|
||||
{recipients.length === 0 && (
|
||||
<IonButton
|
||||
onClick={() => history.push('/recipients/new')}
|
||||
style={
|
||||
{
|
||||
'--background': '#6d28d9',
|
||||
'--border-radius': '999px',
|
||||
'--box-shadow': 'none',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonIcon icon={addOutline} slot="start" />
|
||||
Add loved one
|
||||
</IonButton>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{visibleRecipients.map((recipient) => (
|
||||
<RecipientListCard
|
||||
key={recipient.id}
|
||||
recipient={recipient}
|
||||
onClick={(id) => history.push(`/recipients/${id}`)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecipientsPage;
|
||||
@@ -1,367 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { IonButton, IonContent, IonInput, IonPage } from '@ionic/react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import AvatarPicker from '../components/AvatarPicker';
|
||||
import '../styles/auth.css';
|
||||
|
||||
type ProfileDraft = {
|
||||
first_name?: string | null;
|
||||
last_name?: string | null;
|
||||
phone?: string | null;
|
||||
country_of_residence?: string | null;
|
||||
avatar_path?: string | null;
|
||||
};
|
||||
|
||||
const SetupProfilePage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { user, refreshProfile, signOut } = useAuth();
|
||||
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [phone, setPhone] = useState('');
|
||||
const [country, setCountry] = useState('');
|
||||
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
||||
const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
|
||||
const messageTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const mountedRef = useRef(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [prefilling, setPrefilling] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
mountedRef.current = true;
|
||||
return () => {
|
||||
mountedRef.current = false;
|
||||
if (messageTimerRef.current) {
|
||||
clearTimeout(messageTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadExistingProfile();
|
||||
}, [user?.id]);
|
||||
|
||||
const showError = (message: string) => {
|
||||
if (messageTimerRef.current) {
|
||||
clearTimeout(messageTimerRef.current);
|
||||
}
|
||||
setError(message);
|
||||
messageTimerRef.current = setTimeout(() => {
|
||||
if (mountedRef.current) {
|
||||
setError(null);
|
||||
}
|
||||
}, 4000);
|
||||
};
|
||||
|
||||
const loadExistingProfile = async () => {
|
||||
if (!user) {
|
||||
setPrefilling(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setPrefilling(true);
|
||||
let profile: ProfileDraft | null = null;
|
||||
let profileLoadError: unknown = null;
|
||||
|
||||
try {
|
||||
const profileLoadRequest = supabase
|
||||
.from('profiles')
|
||||
.select('first_name,last_name,phone,country_of_residence,avatar_path')
|
||||
.eq('id', user.id)
|
||||
.maybeSingle();
|
||||
|
||||
const result = await Promise.race([
|
||||
profileLoadRequest,
|
||||
new Promise<never>((_, reject) =>
|
||||
setTimeout(
|
||||
() => reject(new Error('Profile setup loading timed out.')),
|
||||
8000
|
||||
)
|
||||
),
|
||||
]);
|
||||
|
||||
profile = result.data as ProfileDraft | null;
|
||||
profileLoadError = result.error;
|
||||
} catch (loadError) {
|
||||
profileLoadError = loadError;
|
||||
}
|
||||
|
||||
if (!mountedRef.current) return;
|
||||
|
||||
if (profileLoadError) {
|
||||
console.error(
|
||||
'[SetupProfilePage] Failed to load existing profile',
|
||||
profileLoadError
|
||||
);
|
||||
showError(
|
||||
'We could not load your profile yet. You can still finish setup.'
|
||||
);
|
||||
}
|
||||
if (profile) {
|
||||
setFirstName(profile.first_name ?? '');
|
||||
setLastName(profile.last_name ?? '');
|
||||
setPhone(profile.phone ?? '');
|
||||
setCountry(profile.country_of_residence ?? '');
|
||||
if (profile.avatar_path) {
|
||||
const { data: publicUrlData } = supabase.storage
|
||||
.from('avatars')
|
||||
.getPublicUrl(profile.avatar_path);
|
||||
setAvatarPreview(publicUrlData.publicUrl);
|
||||
}
|
||||
} else if (user.user_metadata?.full_name) {
|
||||
const parts = String(user.user_metadata.full_name).split(' ');
|
||||
setFirstName(parts[0] ?? '');
|
||||
setLastName(parts.slice(1).join(' '));
|
||||
}
|
||||
setPrefilling(false);
|
||||
};
|
||||
|
||||
const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
if (!mountedRef.current) return;
|
||||
setAvatarFile(file);
|
||||
setAvatarPreview(
|
||||
typeof reader.result === 'string' ? reader.result : null
|
||||
);
|
||||
};
|
||||
reader.onerror = () => {
|
||||
showError(
|
||||
'We could not preview that image. Please choose another photo.'
|
||||
);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!user) {
|
||||
showError('Please sign in again to complete your profile');
|
||||
return;
|
||||
}
|
||||
|
||||
const cleanFirstName = firstName.trim();
|
||||
const cleanLastName = lastName.trim();
|
||||
const cleanPhone = phone.trim();
|
||||
const cleanCountry = country.trim();
|
||||
|
||||
if (!cleanFirstName || !cleanLastName || !cleanPhone || !cleanCountry) {
|
||||
showError('Please complete all profile fields');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
let avatarPath: string | null = null;
|
||||
if (avatarFile) {
|
||||
const extension = avatarFile.name.split('.').pop() || 'jpg';
|
||||
avatarPath = `${user.id}/${Date.now()}.${extension}`;
|
||||
const uploadRequest = supabase.storage
|
||||
.from('avatars')
|
||||
.upload(avatarPath, avatarFile);
|
||||
const { error: uploadError } = await Promise.race([
|
||||
uploadRequest,
|
||||
new Promise<never>((_, reject) =>
|
||||
setTimeout(
|
||||
() =>
|
||||
reject(new Error('Photo upload timed out. Please try again.')),
|
||||
12000
|
||||
)
|
||||
),
|
||||
]);
|
||||
|
||||
if (uploadError) {
|
||||
showError(uploadError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const now = new Date().toISOString();
|
||||
const profilePayload = {
|
||||
id: user.id,
|
||||
first_name: cleanFirstName,
|
||||
last_name: cleanLastName,
|
||||
full_name: `${cleanFirstName} ${cleanLastName}`,
|
||||
phone: cleanPhone,
|
||||
country_of_residence: cleanCountry,
|
||||
...(avatarPath ? { avatar_path: avatarPath } : {}),
|
||||
notification_push_enabled: true,
|
||||
notification_email_enabled: true,
|
||||
notification_sms_enabled: false,
|
||||
updated_at: now,
|
||||
};
|
||||
|
||||
const profileSaveRequest = supabase
|
||||
.from('profiles')
|
||||
.upsert(profilePayload, { onConflict: 'id' })
|
||||
.select('*')
|
||||
.single();
|
||||
|
||||
const { data: savedProfile, error: profileError } = await Promise.race([
|
||||
profileSaveRequest,
|
||||
new Promise<never>((_, reject) =>
|
||||
setTimeout(
|
||||
() =>
|
||||
reject(new Error('Profile save timed out. Please try again.')),
|
||||
12000
|
||||
)
|
||||
),
|
||||
]);
|
||||
|
||||
if (profileError) {
|
||||
showError(profileError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await refreshProfile();
|
||||
|
||||
if (!mountedRef.current) return;
|
||||
|
||||
setLoading(false);
|
||||
history.replace('/home');
|
||||
} catch (submitError: any) {
|
||||
if (!mountedRef.current) return;
|
||||
showError(
|
||||
submitError.message || 'Profile setup failed. Please try again.'
|
||||
);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||
|
||||
const handleLogout = async () => {
|
||||
if (loading || prefilling) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await signOut();
|
||||
history.replace('/auth');
|
||||
} catch (logoutError: any) {
|
||||
showError(
|
||||
logoutError?.message || 'We could not sign you out. Please try again.'
|
||||
);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonContent
|
||||
className="auth-content"
|
||||
style={
|
||||
{
|
||||
'--background': 'linear-gradient(180deg, #fafafa 0%, #f4f0ff 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '0px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div className="auth-shell">
|
||||
<div className="auth-brand-block">
|
||||
<h4 className="auth-eyebrow">Profile setup</h4>
|
||||
<h1 className="auth-heading">Tell us about you</h1>
|
||||
<p className="auth-subtitle">
|
||||
We use this to personalise your Kumusha dashboard and keep your
|
||||
account secure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="auth-form-card">
|
||||
<AvatarPicker
|
||||
previewUrl={avatarPreview}
|
||||
onFileChange={handleAvatarChange}
|
||||
initials={initials || undefined}
|
||||
disabled={loading || prefilling}
|
||||
/>
|
||||
|
||||
<IonInput
|
||||
type="text"
|
||||
label="First name"
|
||||
labelPlacement="floating"
|
||||
value={firstName}
|
||||
onIonInput={(event) => setFirstName(event.detail.value ?? '')}
|
||||
disabled={loading || prefilling}
|
||||
placeholder="e.g. Tadiwa"
|
||||
className="auth-field"
|
||||
/>
|
||||
<IonInput
|
||||
type="text"
|
||||
label="Last name"
|
||||
labelPlacement="floating"
|
||||
value={lastName}
|
||||
onIonInput={(event) => setLastName(event.detail.value ?? '')}
|
||||
disabled={loading || prefilling}
|
||||
placeholder="e.g. Moyo"
|
||||
className="auth-field"
|
||||
/>
|
||||
<IonInput
|
||||
type="tel"
|
||||
inputMode="tel"
|
||||
label="Mobile number"
|
||||
labelPlacement="floating"
|
||||
value={phone}
|
||||
onIonInput={(event) => setPhone(event.detail.value ?? '')}
|
||||
disabled={loading || prefilling}
|
||||
placeholder="e.g. +44 7123 456789"
|
||||
className="auth-field"
|
||||
/>
|
||||
<IonInput
|
||||
type="text"
|
||||
label="Country of residence"
|
||||
labelPlacement="floating"
|
||||
value={country}
|
||||
onIonInput={(event) => setCountry(event.detail.value ?? '')}
|
||||
disabled={loading || prefilling}
|
||||
placeholder="e.g. United Kingdom"
|
||||
className="auth-field"
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="auth-status-text" style={{ color: '#dc2626' }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="setup-profile-actions-row">
|
||||
<IonButton
|
||||
type="button"
|
||||
fill="outline"
|
||||
disabled={loading || prefilling}
|
||||
onClick={handleLogout}
|
||||
className="setup-profile-secondary-btn"
|
||||
>
|
||||
Logout
|
||||
</IonButton>
|
||||
<IonButton
|
||||
type="submit"
|
||||
expand="block"
|
||||
disabled={loading || prefilling}
|
||||
className="setup-profile-primary-btn"
|
||||
>
|
||||
{loading ? 'Saving profile...' : 'Finish setup'}
|
||||
</IonButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default SetupProfilePage;
|
||||
@@ -1,78 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonContent, IonIcon, IonPage } from '@ionic/react';
|
||||
import {
|
||||
flashOutline,
|
||||
heart,
|
||||
medkitOutline,
|
||||
phonePortraitOutline,
|
||||
} from 'ionicons/icons';
|
||||
import basketImage from '../assets/basket.png';
|
||||
import '../styles/auth.css';
|
||||
|
||||
interface SplashPageProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
progressLabel?: string;
|
||||
}
|
||||
|
||||
const SplashPage: React.FC<SplashPageProps> = ({
|
||||
title = 'Send support to loved ones from anywhere',
|
||||
subtitle,
|
||||
progressLabel,
|
||||
}) => {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonContent
|
||||
fullscreen
|
||||
style={
|
||||
{
|
||||
'--background':
|
||||
'linear-gradient(180deg, #fafafa 0%, #f6f1ff 52%, #f4f0ff 100%)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div className="app-splash-shell">
|
||||
<div className="app-splash-card">
|
||||
<div className="app-splash-logo-wrap" aria-hidden="true">
|
||||
<div className="app-splash-category-orbit app-splash-category-orbit--groceries">
|
||||
<img
|
||||
src={basketImage}
|
||||
alt=""
|
||||
className="app-splash-category-image"
|
||||
/>
|
||||
</div>
|
||||
<div className="app-splash-category-orbit app-splash-category-orbit--medicine">
|
||||
<IonIcon icon={medkitOutline} />
|
||||
</div>
|
||||
<div className="app-splash-category-orbit app-splash-category-orbit--airtime">
|
||||
<IonIcon icon={phonePortraitOutline} />
|
||||
</div>
|
||||
<div className="app-splash-category-orbit app-splash-category-orbit--electricity">
|
||||
<IonIcon icon={flashOutline} />
|
||||
</div>
|
||||
<div className="app-splash-logo-glow" />
|
||||
<div className="app-splash-logo-circle">
|
||||
<IonIcon icon={heart} />
|
||||
</div>
|
||||
<div className="app-splash-heart-ripple app-splash-heart-ripple--one" />
|
||||
<div className="app-splash-heart-ripple app-splash-heart-ripple--two" />
|
||||
</div>
|
||||
<p className="app-splash-brand">Kumusha</p>
|
||||
<h1 className="app-splash-title">{title}</h1>
|
||||
{subtitle ? (
|
||||
<p className="app-splash-subtitle">{subtitle}</p>
|
||||
) : null}
|
||||
<div className="app-splash-progress-track">
|
||||
<span className="app-splash-progress-bar" />
|
||||
</div>
|
||||
{progressLabel ? (
|
||||
<p className="app-splash-progress-label">{progressLabel}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default SplashPage;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,297 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonButtons,
|
||||
IonTitle,
|
||||
IonButton,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import { useHistory, useLocation } from 'react-router-dom';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import { chevronBackOutline, mailOutline } from 'ionicons/icons';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import OtpInputSlots from '../components/OtpInputSlots';
|
||||
import '../styles/auth.css';
|
||||
|
||||
interface LocationState {
|
||||
email?: string;
|
||||
resent?: boolean;
|
||||
}
|
||||
|
||||
const VerifyEmailPage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation<LocationState>();
|
||||
const { user, profile, profileStatus } = useAuth();
|
||||
|
||||
const email =
|
||||
location.state?.email?.trim().toLowerCase() ||
|
||||
localStorage.getItem('kumusha_pending_verification_email') ||
|
||||
'';
|
||||
const wasResent = location.state?.resent;
|
||||
|
||||
const [code, setCode] = useState<string[]>(['', '', '', '', '', '']);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState<string | null>(
|
||||
wasResent ? 'We sent a fresh code to your email.' : null
|
||||
);
|
||||
const [cooldown, setCooldown] = useState(wasResent ? 60 : 0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!email) {
|
||||
showError(
|
||||
'We could not find the email used for sign up. Please sign up again.'
|
||||
);
|
||||
}
|
||||
}, [email]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user || profileStatus === 'loading') return;
|
||||
|
||||
if (
|
||||
!profile ||
|
||||
!profile.first_name ||
|
||||
!profile.last_name ||
|
||||
!profile.phone ||
|
||||
!profile.country_of_residence
|
||||
) {
|
||||
history.replace('/setup-profile');
|
||||
} else {
|
||||
history.replace('/home');
|
||||
}
|
||||
}, [user, profile, profileStatus, history]);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
setError(null);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let timer: ReturnType<typeof setTimeout> | undefined;
|
||||
if (cooldown > 0) {
|
||||
timer = setTimeout(() => setCooldown((c) => c - 1), 1000);
|
||||
}
|
||||
return () => {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
};
|
||||
}, [cooldown]);
|
||||
|
||||
const showError = (msg: string) => {
|
||||
setStatus(null);
|
||||
setError(msg);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const showStatus = (msg: string) => {
|
||||
setError(null);
|
||||
setStatus(msg);
|
||||
setTimeout(() => setStatus(null), 4000);
|
||||
};
|
||||
|
||||
const handleDigitChange = (index: number, val: string) => {
|
||||
const newCode = [...code];
|
||||
newCode[index] = val;
|
||||
setCode(newCode);
|
||||
};
|
||||
|
||||
const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
|
||||
e.preventDefault();
|
||||
const pastedData = e.clipboardData
|
||||
.getData('Text')
|
||||
.replace(/[^0-9]/g, '')
|
||||
.slice(0, 6);
|
||||
if (!pastedData) return;
|
||||
const newCode = [...code];
|
||||
for (let i = 0; i < pastedData.length; i++) {
|
||||
newCode[i] = pastedData[i];
|
||||
}
|
||||
setCode(newCode);
|
||||
};
|
||||
|
||||
const handleVerifyOtp = async () => {
|
||||
const token = code.join('');
|
||||
if (token.length !== 6) {
|
||||
showError('Please enter the full 6-digit code.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!email) {
|
||||
showError(
|
||||
'We could not find the email used for sign up. Please go back and create your account again.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setStatus(null);
|
||||
|
||||
const { error: verifyError } = await supabase.auth.verifyOtp({
|
||||
email,
|
||||
token,
|
||||
type: 'email',
|
||||
});
|
||||
|
||||
if (verifyError) {
|
||||
showError(verifyError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.removeItem('kumusha_pending_verification_email');
|
||||
showStatus('Email verified. Finishing your sign in...');
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleResend = async () => {
|
||||
if (cooldown > 0) return;
|
||||
if (!email) {
|
||||
showError(
|
||||
'We could not find the email used for sign up. Please go back and create your account again.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
setStatus(null);
|
||||
|
||||
const { error: resendError } = await supabase.auth.resend({
|
||||
type: 'signup',
|
||||
email,
|
||||
});
|
||||
|
||||
if (resendError) {
|
||||
showError(resendError.message);
|
||||
return;
|
||||
}
|
||||
|
||||
setCode(['', '', '', '', '', '']);
|
||||
setCooldown(60);
|
||||
showStatus('A new 6-digit code has been sent.');
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': 'transparent' }}>
|
||||
<IonButtons slot="start">
|
||||
<IonButton fill="clear" onClick={() => history.goBack()}>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle style={{ fontSize: '0px' }}>Verify email</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
className="auth-content"
|
||||
style={{
|
||||
'--background': 'linear-gradient(180deg, #fafafa 0%, #f4f0ff 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '0px',
|
||||
}}
|
||||
>
|
||||
<div className="auth-shell">
|
||||
<div
|
||||
className="auth-brand-block"
|
||||
style={{ gap: '12px', marginTop: '20px' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '56px',
|
||||
height: '56px',
|
||||
borderRadius: '24px',
|
||||
backgroundColor: 'rgba(109,40,217,0.12)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={mailOutline}
|
||||
style={{ fontSize: '26px', color: '#6d28d9' }}
|
||||
/>
|
||||
</div>
|
||||
<h1 className="auth-heading" style={{ fontSize: '28px' }}>
|
||||
Check your email
|
||||
</h1>
|
||||
<p className="auth-subtitle" style={{ maxWidth: '340px' }}>
|
||||
{email ? (
|
||||
<>
|
||||
We sent a 6-digit code to <strong>{email}</strong>. Enter it
|
||||
below to confirm your account and continue.
|
||||
</>
|
||||
) : (
|
||||
'We could not find the email used for sign up. Go back and create your account again.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="auth-card auth-card--elevated">
|
||||
<div
|
||||
style={{ display: 'flex', flexDirection: 'column', gap: '18px' }}
|
||||
>
|
||||
<OtpInputSlots
|
||||
value={code}
|
||||
onChange={handleDigitChange}
|
||||
onPaste={handlePaste}
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
{status ? (
|
||||
<div
|
||||
style={{
|
||||
borderRadius: '12px',
|
||||
background: 'rgba(109,40,217,0.08)',
|
||||
color: '#6d28d9',
|
||||
padding: '12px 14px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{status}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{error ? (
|
||||
<div className="auth-inline-message">{error}</div>
|
||||
) : null}
|
||||
|
||||
<button
|
||||
className="auth-submit-btn"
|
||||
onClick={handleVerifyOtp}
|
||||
disabled={loading || code.join('').length !== 6}
|
||||
>
|
||||
{loading ? 'Verifying...' : 'Verify Code'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleResend}
|
||||
disabled={cooldown > 0 || loading}
|
||||
className="auth-link-button"
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
fontSize: '14px',
|
||||
padding: '4px 0',
|
||||
color: cooldown > 0 || loading ? '#9ca3af' : '#6d28d9',
|
||||
}}
|
||||
>
|
||||
{cooldown > 0 ? `Resend code in ${cooldown}s` : 'Resend code'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default VerifyEmailPage;
|
||||
@@ -1,317 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonInput,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { chevronBackOutline, lockClosedOutline } from 'ionicons/icons';
|
||||
import { useHistory, useLocation } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import OtpInputSlots from '../components/OtpInputSlots';
|
||||
import '../styles/auth.css';
|
||||
|
||||
interface LocationState {
|
||||
email?: string;
|
||||
}
|
||||
|
||||
const VerifyResetPage: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation<LocationState>();
|
||||
const { user, refreshProfile, profileStatus } = useAuth();
|
||||
const email = location.state?.email;
|
||||
|
||||
const [code, setCode] = useState<string[]>(['', '', '', '', '', '']);
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState<string | null>(null);
|
||||
const [cooldown, setCooldown] = useState(0);
|
||||
const [passwordUpdated, setPasswordUpdated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!email) {
|
||||
history.replace('/forgot-password');
|
||||
}
|
||||
}, [email, history]);
|
||||
|
||||
useEffect(() => {
|
||||
if (cooldown <= 0) return;
|
||||
const timer = setTimeout(() => setCooldown((current) => current - 1), 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [cooldown]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && passwordUpdated && profileStatus !== 'loading') {
|
||||
loadProfileAndNavigate();
|
||||
}
|
||||
}, [user, passwordUpdated, profileStatus]);
|
||||
|
||||
const showMessage = (message: string, kind: 'error' | 'status') => {
|
||||
if (kind === 'error') {
|
||||
setError(message);
|
||||
setStatus(null);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
} else {
|
||||
setStatus(message);
|
||||
setError(null);
|
||||
setTimeout(() => setStatus(null), 4000);
|
||||
}
|
||||
};
|
||||
|
||||
const loadProfileAndNavigate = async () => {
|
||||
if (!user) return;
|
||||
|
||||
const data = await refreshProfile();
|
||||
|
||||
if (
|
||||
!data ||
|
||||
!data.first_name ||
|
||||
!data.last_name ||
|
||||
!data.phone ||
|
||||
!data.country_of_residence
|
||||
) {
|
||||
history.replace('/setup-profile');
|
||||
} else {
|
||||
history.replace('/home');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDigitChange = (index: number, value: string) => {
|
||||
const nextCode = [...code];
|
||||
nextCode[index] = value.replace(/\D/g, '').slice(-1);
|
||||
setCode(nextCode);
|
||||
};
|
||||
|
||||
const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
|
||||
event.preventDefault();
|
||||
const digits = event.clipboardData
|
||||
.getData('Text')
|
||||
.replace(/\D/g, '')
|
||||
.slice(0, 6);
|
||||
if (!digits) return;
|
||||
|
||||
const nextCode = ['', '', '', '', '', ''];
|
||||
digits.split('').forEach((digit, index) => {
|
||||
nextCode[index] = digit;
|
||||
});
|
||||
setCode(nextCode);
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
const token = code.join('');
|
||||
if (token.length !== 6) {
|
||||
showMessage('Please enter the 6-digit reset code', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 6) {
|
||||
showMessage('Password must be at least 6 characters', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setStatus(null);
|
||||
|
||||
const { error: verifyError } = await supabase.auth.verifyOtp({
|
||||
email: email!,
|
||||
token,
|
||||
type: 'recovery',
|
||||
});
|
||||
|
||||
if (verifyError) {
|
||||
showMessage(verifyError.message, 'error');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const { error: updateError } = await supabase.auth.updateUser({
|
||||
password: newPassword,
|
||||
});
|
||||
|
||||
if (updateError) {
|
||||
showMessage(updateError.message, 'error');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
showMessage('Password updated', 'status');
|
||||
setPasswordUpdated(true);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleResend = async () => {
|
||||
if (cooldown > 0 || !email) return;
|
||||
|
||||
const { error: resendError } =
|
||||
await supabase.auth.resetPasswordForEmail(email);
|
||||
if (resendError) {
|
||||
showMessage(resendError.message, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
showMessage('A new reset code has been sent', 'status');
|
||||
setCooldown(60);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar
|
||||
style={
|
||||
{
|
||||
'--background': 'transparent',
|
||||
'--border-width': '0px',
|
||||
'--color': '#111827',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonButtons slot="start">
|
||||
<IonButton
|
||||
fill="clear"
|
||||
onClick={() => history.goBack()}
|
||||
style={
|
||||
{
|
||||
'--color': '#111827',
|
||||
'--border-radius': '12px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
aria-label="Go back"
|
||||
>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle style={{ fontSize: '18px', fontWeight: 700 }}>
|
||||
New password
|
||||
</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
className="auth-content"
|
||||
style={
|
||||
{
|
||||
'--background': 'linear-gradient(180deg, #fafafa 0%, #f4f0ff 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '0px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div className="auth-shell">
|
||||
<div
|
||||
className="auth-intro-block"
|
||||
style={{ alignItems: 'flex-start', textAlign: 'left' }}
|
||||
>
|
||||
<div className="auth-icon-container">
|
||||
<IonIcon icon={lockClosedOutline} />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="auth-intro-heading">Enter your reset code</h1>
|
||||
<p className="auth-intro-body" style={{ marginTop: '8px' }}>
|
||||
Use the 6-digit code sent to <strong>{email}</strong>, then
|
||||
choose a new password.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="auth-form-card" style={{ marginBottom: '12px' }}>
|
||||
<OtpInputSlots
|
||||
value={code}
|
||||
onChange={handleDigitChange}
|
||||
onPaste={handlePaste}
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleResend}
|
||||
disabled={cooldown > 0 || loading}
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
padding: '8px',
|
||||
fontSize: '14px',
|
||||
fontWeight: 700,
|
||||
color: cooldown > 0 ? '#9ca3af' : '#6d28d9',
|
||||
}}
|
||||
>
|
||||
{cooldown > 0 ? `Resend code in ${cooldown}s` : 'Resend code'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="auth-form-card">
|
||||
<IonInput
|
||||
type="password"
|
||||
label="New password"
|
||||
labelPlacement="floating"
|
||||
value={newPassword}
|
||||
onIonInput={(event) => setNewPassword(event.detail.value ?? '')}
|
||||
disabled={loading}
|
||||
placeholder="Enter a new password"
|
||||
style={
|
||||
{
|
||||
'--background': '#fafafa',
|
||||
'--border-radius': '12px',
|
||||
'--padding-start': '14px',
|
||||
'--padding-end': '14px',
|
||||
'--highlight-color-focused': '#6d28d9',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="auth-status-text" style={{ color: '#dc2626' }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{status && (
|
||||
<p className="auth-status-text" style={{ color: '#16a34a' }}>
|
||||
{status}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<IonButton
|
||||
type="submit"
|
||||
expand="block"
|
||||
disabled={
|
||||
loading ||
|
||||
code.join('').length !== 6 ||
|
||||
newPassword.length < 6
|
||||
}
|
||||
style={
|
||||
{
|
||||
'--background': '#6d28d9',
|
||||
'--background-activated': '#5b21b6',
|
||||
'--border-radius': '999px',
|
||||
'--box-shadow': 'none',
|
||||
'--color': '#ffffff',
|
||||
height: '52px',
|
||||
fontSize: '15px',
|
||||
fontWeight: 700,
|
||||
marginTop: '4px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{loading ? 'Updating password...' : 'Update password'}
|
||||
</IonButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default VerifyResetPage;
|
||||
@@ -1,295 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonSkeletonText,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import {
|
||||
chevronBackOutline,
|
||||
copyOutline,
|
||||
listOutline,
|
||||
qrCodeOutline,
|
||||
shieldCheckmarkOutline,
|
||||
} from 'ionicons/icons';
|
||||
import { useHistory, useLocation, useParams } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { formatMoney } from '../utils/formatMoney';
|
||||
import '../styles/support.css';
|
||||
|
||||
type Params = { id: string };
|
||||
|
||||
type RedemptionEntry = {
|
||||
id: string;
|
||||
redeemed_amount: number;
|
||||
redeemed_at: string;
|
||||
merchant_name: string | null;
|
||||
status: string | null;
|
||||
};
|
||||
|
||||
type Voucher = {
|
||||
id: string;
|
||||
voucher_code: string;
|
||||
status: string;
|
||||
expires_at: string;
|
||||
qr_payload: string;
|
||||
voucher_type: string;
|
||||
redeemed_amount?: number;
|
||||
remaining_amount?: number;
|
||||
voucher_redemptions?: RedemptionEntry[] | null;
|
||||
support_orders?: {
|
||||
service_type: string;
|
||||
amount: number;
|
||||
recipients?: { first_name: string; last_name: string } | null;
|
||||
merchants?: { name: string; branch_name: string | null } | null;
|
||||
} | null;
|
||||
};
|
||||
|
||||
const VoucherDetailPage: React.FC = () => {
|
||||
const { id } = useParams<Params>();
|
||||
const history = useHistory();
|
||||
const location = useLocation<{ parentRoot?: string }>();
|
||||
const { user } = useAuth();
|
||||
const [voucher, setVoucher] = useState<Voucher | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
void loadVoucher();
|
||||
});
|
||||
|
||||
const handleGoBack = () => {
|
||||
if (history.length > 1) {
|
||||
history.goBack();
|
||||
} else {
|
||||
history.replace('/activity');
|
||||
}
|
||||
};
|
||||
|
||||
const parentRoot = location.state?.parentRoot ?? '/activity';
|
||||
|
||||
const handleGoToParentRoot = () => {
|
||||
history.replace(parentRoot);
|
||||
};
|
||||
|
||||
const showMessage = (text: string) => {
|
||||
setMessage(text);
|
||||
setTimeout(() => setMessage(null), 4000);
|
||||
};
|
||||
|
||||
const loadVoucher = async () => {
|
||||
if (!user) return;
|
||||
setLoading(true);
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('vouchers')
|
||||
.select(
|
||||
'id,voucher_code,status,expires_at,qr_payload,voucher_type,redeemed_amount,remaining_amount,voucher_redemptions(id,redeemed_amount,redeemed_at,merchant_name,status),support_orders!inner(service_type,amount,user_id,recipients(first_name,last_name),merchants(name,branch_name))'
|
||||
)
|
||||
.eq('id', id)
|
||||
.eq('support_orders.user_id', user.id)
|
||||
.single();
|
||||
|
||||
if (error || !data) {
|
||||
showMessage(error?.message ?? 'Voucher not found');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setVoucher(data as unknown as Voucher);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleCopyCode = async () => {
|
||||
if (!voucher) return;
|
||||
await navigator.clipboard.writeText(voucher.voucher_code);
|
||||
showMessage('Voucher code copied');
|
||||
};
|
||||
|
||||
const totalAmount = Number(voucher?.support_orders?.amount ?? 0);
|
||||
const redeemedAmount = Number(voucher?.redeemed_amount ?? 0);
|
||||
const fallbackRemaining = Math.max(totalAmount - redeemedAmount, 0);
|
||||
const remainingAmount = Number(
|
||||
voucher?.remaining_amount ?? fallbackRemaining
|
||||
);
|
||||
const hasPartialRedemption = redeemedAmount > 0 && remainingAmount > 0;
|
||||
const redemptionHistory = [...(voucher?.voucher_redemptions ?? [])].sort(
|
||||
(a, b) =>
|
||||
new Date(b.redeemed_at).getTime() - new Date(a.redeemed_at).getTime()
|
||||
);
|
||||
|
||||
return (
|
||||
<IonPage style={{ backgroundColor: '#fafafa' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar
|
||||
style={
|
||||
{
|
||||
'--background': 'transparent',
|
||||
'--border-width': '0px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonButtons slot="start">
|
||||
<IonButton fill="clear" onClick={handleGoBack} aria-label="Go back">
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle style={{ fontSize: 18, fontWeight: 700 }}>Voucher</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonButton
|
||||
fill="clear"
|
||||
onClick={handleGoToParentRoot}
|
||||
aria-label="Back to activity"
|
||||
>
|
||||
<IonIcon icon={listOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
style={
|
||||
{
|
||||
'--background': 'linear-gradient(180deg, #fafafa 0%, #f4f0ff 100%)',
|
||||
'--padding-top': '8px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="voucher-hero-card">
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: 160, height: 32, borderRadius: 999 }}
|
||||
/>
|
||||
<IonSkeletonText
|
||||
animated
|
||||
style={{ width: 220, height: 220, borderRadius: 24 }}
|
||||
/>
|
||||
</div>
|
||||
) : voucher ? (
|
||||
<>
|
||||
{message && (
|
||||
<p
|
||||
style={{ margin: '12px 20px', color: '#6d28d9', fontSize: 13 }}
|
||||
>
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
<div className="voucher-hero-card">
|
||||
<span className="vhc-code-pill">{voucher.voucher_code}</span>
|
||||
<div className="vhc-qr-placeholder">
|
||||
<IonIcon icon={qrCodeOutline} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="vhc-expiry">
|
||||
Expires {new Date(voucher.expires_at).toLocaleDateString()}
|
||||
</p>
|
||||
<p className="vhc-merchant">
|
||||
{voucher.support_orders?.merchants
|
||||
? `${voucher.support_orders.merchants.name}${voucher.support_orders.merchants.branch_name ? ` — ${voucher.support_orders.merchants.branch_name}` : ''}`
|
||||
: `Kumusha ${voucher.support_orders?.service_type === 'medication' ? 'pharmacy' : 'grocery'} partner`}
|
||||
</p>
|
||||
<p className="vhc-merchant">
|
||||
For{' '}
|
||||
{voucher.support_orders?.recipients
|
||||
? `${voucher.support_orders.recipients.first_name} ${voucher.support_orders.recipients.last_name}`
|
||||
: 'recipient'}{' '}
|
||||
· {formatMoney(Number(voucher.support_orders?.amount ?? 0))}
|
||||
</p>
|
||||
</div>
|
||||
<IonButton
|
||||
onClick={handleCopyCode}
|
||||
style={
|
||||
{
|
||||
'--background': '#6d28d9',
|
||||
'--border-radius': '999px',
|
||||
'--box-shadow': 'none',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<IonIcon icon={copyOutline} slot="start" />
|
||||
Copy code
|
||||
</IonButton>
|
||||
</div>
|
||||
|
||||
{(hasPartialRedemption || redemptionHistory.length > 0) && (
|
||||
<div className="voucher-balance-card">
|
||||
<div className="voucher-balance-head">
|
||||
<div>
|
||||
<p className="voucher-balance-title">Voucher balance</p>
|
||||
<p className="voucher-balance-subtitle">
|
||||
Track redeemed and remaining value for this voucher.
|
||||
</p>
|
||||
</div>
|
||||
<div className="voucher-balance-total">
|
||||
{formatMoney(totalAmount)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="voucher-balance-pills">
|
||||
<div className="voucher-balance-pill is-redeemed">
|
||||
Redeemed {formatMoney(redeemedAmount)}
|
||||
</div>
|
||||
<div className="voucher-balance-pill is-remaining">
|
||||
Unredeemed {formatMoney(remainingAmount)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{redemptionHistory.length > 0 && (
|
||||
<div className="voucher-redemption-history">
|
||||
<p className="voucher-redemption-history-title">
|
||||
Redemption history
|
||||
</p>
|
||||
{redemptionHistory.map((entry) => (
|
||||
<div key={entry.id} className="voucher-redemption-row">
|
||||
<div>
|
||||
<p className="voucher-redemption-merchant">
|
||||
{entry.merchant_name ||
|
||||
voucher.support_orders?.merchants?.name ||
|
||||
`Kumusha ${voucher.support_orders?.service_type === 'medication' ? 'pharmacy' : 'grocery'} partner`}
|
||||
</p>
|
||||
<p className="voucher-redemption-date">
|
||||
{new Date(entry.redeemed_at).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="voucher-redemption-right">
|
||||
<p className="voucher-redemption-amount">
|
||||
{formatMoney(entry.redeemed_amount)}
|
||||
</p>
|
||||
<span className="voucher-redemption-status">
|
||||
{entry.status || 'Redeemed'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="security-note-card">
|
||||
<IonIcon icon={shieldCheckmarkOutline} className="snc-icon" />
|
||||
<p className="snc-text">
|
||||
Redeemable at any approved Kumusha{' '}
|
||||
{voucher.support_orders?.service_type === 'medication'
|
||||
? 'pharmacy'
|
||||
: 'grocery'}{' '}
|
||||
partner. Balance updates automatically after partial redemption.
|
||||
Do not share code.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default VoucherDetailPage;
|
||||
@@ -0,0 +1,458 @@
|
||||
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;
|
||||
@@ -1,507 +0,0 @@
|
||||
/* Activity Feed */
|
||||
.activity-top-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin: 0 20px 14px;
|
||||
}
|
||||
|
||||
.activity-title-block {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.activity-page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
color: #171827;
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.activity-page-subtitle {
|
||||
margin: 0;
|
||||
color: rgba(23, 24, 39, 0.56);
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.activity-shell {
|
||||
padding-bottom: calc(130px + var(--ion-safe-area-bottom, 0px));
|
||||
}
|
||||
|
||||
.activity-type-filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 20px 12px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.activity-type-filter-row::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.activity-type-chip {
|
||||
flex: 0 0 auto;
|
||||
background: #ffffff;
|
||||
color: rgba(23, 24, 39, 0.58);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
padding: 9px 16px;
|
||||
margin: 0;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.activity-type-chip.active {
|
||||
background: #6d28d9;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.activity-filter-row {
|
||||
margin: 0 20px 18px;
|
||||
}
|
||||
|
||||
.activity-range-shell {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border-radius: 24px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.activity-range-segment {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.activity-range-segment ion-segment-button {
|
||||
min-height: 46px;
|
||||
--background: transparent;
|
||||
--background-checked: #6d28d9;
|
||||
--color: rgba(23, 24, 39, 0.5);
|
||||
--color-checked: #ffffff;
|
||||
--indicator-color: transparent;
|
||||
--border-radius: 999px;
|
||||
--padding-start: 2px;
|
||||
--padding-end: 2px;
|
||||
text-transform: none;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.activity-range-segment ion-label {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.activity-grouped-list {
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-radius: 24px;
|
||||
padding: 6px 0;
|
||||
margin: 0 20px 20px;
|
||||
}
|
||||
|
||||
.activity-date-group-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: rgba(23, 24, 39, 0.38);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 16px 20px 8px;
|
||||
}
|
||||
|
||||
.activity-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 20px;
|
||||
gap: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activity-feed-item {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.activity-feed-item + .activity-feed-item {
|
||||
border-top: 1px solid rgba(23, 24, 39, 0.06);
|
||||
}
|
||||
|
||||
.activity-feed-item:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.activity-feed-item:active {
|
||||
background: rgba(109, 40, 217, 0.03);
|
||||
}
|
||||
|
||||
.activity-feed-avatar-wrap {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.activity-feed-avatar {
|
||||
position: relative;
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
border-radius: 999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #171827;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-lavender {
|
||||
background: #efe7fb;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-mint {
|
||||
background: #e8f7ee;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-sky {
|
||||
background: #eaf3ff;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-gold {
|
||||
background: #fff2df;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-brand {
|
||||
background: #ece9ff;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-badge {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 6px 14px rgba(23, 24, 39, 0.12);
|
||||
}
|
||||
|
||||
.activity-feed-avatar-badge-grocery {
|
||||
background: #f1e7fb;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-badge-medication {
|
||||
background: #e8f7ee;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-badge-airtime {
|
||||
background: #eaf3ff;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-badge-electricity {
|
||||
background: #fff2df;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.activity-feed-avatar-badge ion-icon {
|
||||
font-size: 13px;
|
||||
--ionicon-stroke-width: 48px;
|
||||
}
|
||||
|
||||
.activity-feed-badge-image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.activity-feed-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.activity-feed-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(128px, 1fr) auto;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.activity-feed-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.activity-feed-title {
|
||||
margin: 0;
|
||||
color: #171827;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.activity-feed-subtitle {
|
||||
margin: 0;
|
||||
color: rgba(23, 24, 39, 0.54);
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.activity-feed-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
min-width: 112px;
|
||||
}
|
||||
|
||||
.activity-feed-amount {
|
||||
margin: 0;
|
||||
color: #171827;
|
||||
font-size: 14px;
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.activity-feed-status {
|
||||
width: fit-content;
|
||||
min-height: 28px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 0 10px 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: capitalize;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.activity-feed-status ion-icon {
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.activity-feed-status-success {
|
||||
background: rgba(22, 163, 74, 0.1);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.activity-feed-status-warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.activity-feed-status-partial {
|
||||
background: rgba(245, 158, 11, 0.14);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.activity-feed-breakdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.activity-feed-breakdown-summary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.activity-feed-breakdown-pill {
|
||||
min-height: 24px;
|
||||
border-radius: 999px;
|
||||
padding: 0 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.activity-feed-breakdown-pill ion-icon {
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.activity-feed-breakdown-pill.is-redeemed {
|
||||
background: rgba(22, 163, 74, 0.1);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.activity-feed-breakdown-pill.is-remaining {
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.activity-feed-usage-note {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: rgba(23, 24, 39, 0.56);
|
||||
font-size: 10px;
|
||||
line-height: 1.35;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Notifications List */
|
||||
.notifications-list-card {
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 8px 0;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.notification-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16px 20px;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nr-status-dot {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nr-status-dot.is-unread {
|
||||
background: #6d28d9;
|
||||
}
|
||||
|
||||
.nr-status-dot.is-read {
|
||||
background: #d1d5db;
|
||||
}
|
||||
|
||||
.nr-icon-box {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nr-icon-box img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nr-icon-box ion-icon {
|
||||
font-size: 21px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nr-icon-box.is-read {
|
||||
opacity: 0.64;
|
||||
}
|
||||
|
||||
/* Support type mappings */
|
||||
.nr-icon-box.notification-service-grocery {
|
||||
background: rgba(109, 40, 217, 0.1);
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.nr-icon-box.notification-service-medication {
|
||||
background: rgba(22, 163, 74, 0.1);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.nr-icon-box.notification-service-airtime {
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.nr-icon-box.notification-service-electricity {
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.nr-icon-box.notification-service-support {
|
||||
background: rgba(109, 40, 217, 0.1);
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.nr-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nr-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-dark);
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.nr-body {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--ion-color-medium);
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.nr-time {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.nr-link-icon {
|
||||
font-size: 18px;
|
||||
color: var(--ion-color-medium);
|
||||
align-self: center;
|
||||
}
|
||||
@@ -1,959 +0,0 @@
|
||||
.auth-page-shell,
|
||||
.auth-shell {
|
||||
padding: 18px 20px calc(var(--ion-safe-area-bottom, 0px) + 28px);
|
||||
}
|
||||
|
||||
.auth-content {
|
||||
--background: linear-gradient(180deg, #fafafa 0%, #f6f1ff 52%, #f4f0ff 100%);
|
||||
}
|
||||
|
||||
.auth-shell--centered {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.auth-brand-block,
|
||||
.auth-brand-intro {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
padding: 44px 0 0 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.auth-brand-header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.auth-brand-name {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #6d28d9;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-radius: 24px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.auth-card--elevated {
|
||||
box-shadow:
|
||||
0 24px 60px rgba(109, 40, 217, 0.1),
|
||||
0 8px 20px rgba(17, 24, 39, 0.05);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.auth-social-buttons,
|
||||
.auth-form-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.auth-form-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.auth-divider {
|
||||
color: rgba(17, 24, 39, 0.45);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin: 20px 0 16px;
|
||||
}
|
||||
|
||||
.auth-divider span {
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
padding: 0 12px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.auth-divider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: rgba(17, 24, 39, 0.08);
|
||||
}
|
||||
|
||||
.field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.auth-field-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(17, 24, 39, 0.66);
|
||||
}
|
||||
|
||||
.auth-text-input {
|
||||
width: 100%;
|
||||
min-height: 52px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid rgba(17, 24, 39, 0.08);
|
||||
border-radius: 12px;
|
||||
background: #f8f7fb;
|
||||
font-size: 15px;
|
||||
color: #111827;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
transition:
|
||||
border-color 0.18s ease,
|
||||
background 0.18s ease,
|
||||
box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.auth-text-input::placeholder {
|
||||
color: rgba(17, 24, 39, 0.38);
|
||||
}
|
||||
|
||||
.auth-text-input:focus {
|
||||
border-color: rgba(109, 40, 217, 0.4);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.08);
|
||||
}
|
||||
|
||||
.auth-text-input:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.auth-text-input.has-error {
|
||||
border-color: rgba(220, 38, 38, 0.28);
|
||||
background: rgba(254, 242, 242, 0.8);
|
||||
}
|
||||
|
||||
.auth-password-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-password-wrap .auth-text-input {
|
||||
padding-right: 48px;
|
||||
}
|
||||
|
||||
.auth-password-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
transform: translateY(-50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgba(17, 24, 39, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.auth-password-toggle ion-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.auth-field-error {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.auth-submit-btn {
|
||||
width: 100%;
|
||||
min-height: 52px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: #6d28d9;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.auth-submit-btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.auth-inline-message {
|
||||
border-radius: 12px;
|
||||
background: rgba(220, 38, 38, 0.08);
|
||||
color: #dc2626;
|
||||
padding: 12px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.auth-meta-hint {
|
||||
font-size: 12px;
|
||||
color: rgba(17, 24, 39, 0.45);
|
||||
}
|
||||
|
||||
.auth-link-button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: #6d28d9;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.auth-eyebrow {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #6d28d9;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.auth-heading {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
line-height: 1.12;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: rgba(17, 24, 39, 0.62);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-mode-toggle {
|
||||
background: #f7f4fb;
|
||||
border-radius: 999px;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.auth-toggle-pill {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 11px 12px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.auth-toggle-pill.active {
|
||||
background: #ffffff;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06);
|
||||
}
|
||||
|
||||
.auth-toggle-pill.inactive {
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
color: rgba(17, 24, 39, 0.5);
|
||||
}
|
||||
|
||||
.social-auth-button {
|
||||
width: 100%;
|
||||
min-height: 52px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: #f8f7fb;
|
||||
color: #111827;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.social-auth-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.social-auth-button__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.social-auth-button__label {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.login,
|
||||
.register {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.otp-input-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.otp-slot {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.avatar-picker-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-preview-circle {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.auth-form-card {
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.auth-field {
|
||||
--background: #fafafa;
|
||||
--color: #111827;
|
||||
--placeholder-color: rgba(17, 24, 39, 0.38);
|
||||
--placeholder-opacity: 1;
|
||||
--highlight-color-focused: #6d28d9;
|
||||
--border-radius: 12px;
|
||||
--padding-start: 16px;
|
||||
--padding-end: 16px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.auth-field::part(label) {
|
||||
color: rgba(17, 24, 39, 0.62);
|
||||
}
|
||||
|
||||
.auth-field.ion-focused::part(label) {
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.auth-helper-text {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--ion-color-danger);
|
||||
margin-left: 16px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.auth-status-text {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.auth-primary-btn {
|
||||
--background: var(--ion-color-primary);
|
||||
--border-radius: 999px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-top: 8px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.auth-social-btn {
|
||||
--background: #fafafa;
|
||||
--border-radius: 999px;
|
||||
--box-shadow: none;
|
||||
--color: var(--ion-color-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
background: transparent;
|
||||
margin: 16px 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-footer-text {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--ion-color-medium);
|
||||
}
|
||||
|
||||
.auth-footer-link {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.auth-intro-block {
|
||||
background: transparent;
|
||||
margin: 8px 0 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.auth-icon-container {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 24px;
|
||||
background: rgba(109, 40, 217, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--ion-color-primary);
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.auth-intro-heading {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-dark);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-intro-body {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: var(--ion-color-medium);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-otp-row {
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 20px;
|
||||
margin: 0 0 20px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.auth-otp-input {
|
||||
width: calc((100% - 60px) / 6);
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
background: #fafafa;
|
||||
border: 1px solid transparent;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-dark);
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.auth-otp-input:focus {
|
||||
outline: none;
|
||||
background: rgba(109, 40, 217, 0.1);
|
||||
border-color: var(--ion-color-primary);
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.auth-action-area {
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.auth-resend-btn {
|
||||
--background: transparent;
|
||||
--color: var(--ion-color-primary);
|
||||
--box-shadow: none;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.auth-resend-btn[disabled] {
|
||||
--color: #9ca3af;
|
||||
}
|
||||
|
||||
.auth-success-card {
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-success-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-dark);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-success-body {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--ion-color-medium);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setup-avatar-container {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 24px;
|
||||
background: rgba(109, 40, 217, 0.1);
|
||||
margin: 0 auto 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setup-avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.setup-avatar-icon {
|
||||
font-size: 32px;
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.setup-avatar-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.setup-profile-actions-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.setup-profile-actions-row ion-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setup-profile-secondary-btn {
|
||||
flex: 0 0 auto;
|
||||
min-width: 112px;
|
||||
height: 52px;
|
||||
--border-radius: 999px;
|
||||
--box-shadow: none;
|
||||
--border-color: rgba(109, 40, 217, 0.18);
|
||||
--border-width: 1px;
|
||||
--color: #6d28d9;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.setup-profile-primary-btn {
|
||||
flex: 1;
|
||||
height: 52px;
|
||||
--background: #6d28d9;
|
||||
--background-activated: #5b21b6;
|
||||
--border-radius: 999px;
|
||||
--box-shadow: none;
|
||||
--color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.auth-keep-signed-in {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: #f8f7fb;
|
||||
border-radius: 12px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.auth-keep-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-keep-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.auth-keep-subtitle {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(17, 24, 39, 0.55);
|
||||
}
|
||||
|
||||
.auth-keep-check {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(17, 24, 39, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.auth-keep-check ion-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.auth-keep-check.active {
|
||||
background: #6d28d9;
|
||||
border-color: #6d28d9;
|
||||
}
|
||||
|
||||
.auth-splash-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.auth-splash-overlay ion-page,
|
||||
.auth-splash-overlay ion-content {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.app-splash-shell {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: calc(var(--ion-safe-area-top, 0px) + 18px) 20px
|
||||
calc(var(--ion-safe-area-bottom, 0px) + 28px);
|
||||
}
|
||||
|
||||
.app-splash-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: transparent;
|
||||
border-radius: 24px;
|
||||
padding: 32px 24px;
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-splash-logo-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.app-splash-category-orbit {
|
||||
position: absolute;
|
||||
width: 61px;
|
||||
height: 61px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12px 26px rgba(109, 40, 217, 0.12);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -30.5px;
|
||||
margin-left: -30.5px;
|
||||
}
|
||||
|
||||
.app-splash-category-orbit ion-icon {
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.app-splash-category-image {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-splash-category-orbit--groceries {
|
||||
background: rgba(109, 40, 217, 0.12);
|
||||
color: #6d28d9;
|
||||
animation: app-splash-orbit-one 5.2s linear infinite;
|
||||
}
|
||||
|
||||
.app-splash-category-orbit--medicine {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
color: #16a34a;
|
||||
animation: app-splash-orbit-two 6.1s linear infinite;
|
||||
}
|
||||
|
||||
.app-splash-category-orbit--airtime {
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
color: #2563eb;
|
||||
animation: app-splash-orbit-three 5.7s linear infinite;
|
||||
}
|
||||
|
||||
.app-splash-category-orbit--electricity {
|
||||
background: rgba(251, 191, 36, 0.14);
|
||||
color: #d97706;
|
||||
animation: app-splash-orbit-four 6.4s linear infinite;
|
||||
}
|
||||
|
||||
.app-splash-logo-glow {
|
||||
position: absolute;
|
||||
width: 101px;
|
||||
height: 101px;
|
||||
border-radius: 35px;
|
||||
background: rgba(109, 40, 217, 0.14);
|
||||
filter: blur(18px);
|
||||
animation: app-splash-pulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.app-splash-logo-circle {
|
||||
position: relative;
|
||||
width: 79px;
|
||||
height: 79px;
|
||||
border-radius: 26px;
|
||||
background: rgba(109, 40, 217, 0.12);
|
||||
color: #6d28d9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 37px;
|
||||
animation: app-splash-heart-float 2.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.app-splash-logo-circle ion-icon {
|
||||
animation: app-splash-heart-beat 1.45s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.app-splash-heart-ripple {
|
||||
position: absolute;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 31px;
|
||||
border: 1.5px solid rgba(109, 40, 217, 0.16);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.app-splash-heart-ripple--one {
|
||||
animation: app-splash-ripple 2.4s ease-out infinite;
|
||||
}
|
||||
|
||||
.app-splash-heart-ripple--two {
|
||||
animation: app-splash-ripple 2.4s ease-out 1.1s infinite;
|
||||
}
|
||||
|
||||
.app-splash-brand {
|
||||
margin: 0 0 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #6d28d9;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.app-splash-title {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
margin: 0 0 48px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.app-splash-subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(17, 24, 39, 0.62);
|
||||
margin: 0 0 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.app-splash-progress-track {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(109, 40, 217, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-splash-progress-label {
|
||||
margin: 12px 0 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(17, 24, 39, 0.5);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.app-splash-progress-bar {
|
||||
display: block;
|
||||
width: 42%;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
|
||||
animation: app-splash-slide 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes app-splash-slide {
|
||||
0% {
|
||||
transform: translateX(-110%);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(140%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(140%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-splash-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.65;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-splash-heart-beat {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
18% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
34% {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
48% {
|
||||
transform: scale(1.12);
|
||||
}
|
||||
64% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-splash-heart-float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-splash-ripple {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.88);
|
||||
}
|
||||
24% {
|
||||
opacity: 0.55;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.28);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-splash-orbit-one {
|
||||
from {
|
||||
transform: rotate(0deg) translateX(131px) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg) translateX(131px) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-splash-orbit-two {
|
||||
from {
|
||||
transform: rotate(360deg) translateX(149px) rotate(-360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg) translateX(149px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-splash-orbit-three {
|
||||
from {
|
||||
transform: rotate(120deg) translateX(140px) rotate(-120deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(480deg) translateX(140px) rotate(-480deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-splash-orbit-four {
|
||||
from {
|
||||
transform: rotate(220deg) translateX(153px) rotate(-220deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-140deg) translateX(153px) rotate(140deg);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user