Polish mobile app for App Store review and expand CRUD.
Default to beenvoice.soconnor.dev with server settings hidden behind Advanced; add Entities tab with clients/businesses, invoice creation, UI fixes for dashboard layout, date fields, FAB position, and card-matched button radius. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,335 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Switch,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { Input } from "@/components/ui/Input";
|
||||
import { fonts, spacing } from "@/constants/theme";
|
||||
import { useAppTheme } from "@/contexts/ThemeContext";
|
||||
import type { ThemeColors } from "@/lib/theme-palette";
|
||||
import { useThemedStyles } from "@/lib/use-themed-styles";
|
||||
import { api } from "@/lib/trpc";
|
||||
|
||||
type BusinessFormValues = {
|
||||
name: string;
|
||||
nickname: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
addressLine1: string;
|
||||
addressLine2: string;
|
||||
city: string;
|
||||
state: string;
|
||||
postalCode: string;
|
||||
country: string;
|
||||
website: string;
|
||||
taxId: string;
|
||||
isDefault: boolean;
|
||||
};
|
||||
|
||||
const emptyValues: BusinessFormValues = {
|
||||
name: "",
|
||||
nickname: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
addressLine1: "",
|
||||
addressLine2: "",
|
||||
city: "",
|
||||
state: "",
|
||||
postalCode: "",
|
||||
country: "United States",
|
||||
website: "",
|
||||
taxId: "",
|
||||
isDefault: false,
|
||||
};
|
||||
|
||||
type BusinessFormProps = {
|
||||
mode: "create" | "edit";
|
||||
businessId?: string;
|
||||
scrollPadding: number;
|
||||
onSaved: () => void;
|
||||
onDeleted?: () => void;
|
||||
};
|
||||
|
||||
export function BusinessForm({
|
||||
mode,
|
||||
businessId,
|
||||
scrollPadding,
|
||||
onSaved,
|
||||
onDeleted,
|
||||
}: BusinessFormProps) {
|
||||
const { colors } = useAppTheme();
|
||||
const styles = useThemedStyles(createBusinessFormStyles);
|
||||
const utils = api.useUtils();
|
||||
|
||||
const businessQuery = api.businesses.getById.useQuery(
|
||||
{ id: businessId ?? "" },
|
||||
{ enabled: mode === "edit" && Boolean(businessId) },
|
||||
);
|
||||
|
||||
const [values, setValues] = useState<BusinessFormValues>(emptyValues);
|
||||
const [fieldError, setFieldError] = useState<string | null>(null);
|
||||
|
||||
const switchProps = {
|
||||
trackColor: { false: colors.switchTrackOff, true: colors.switchTrackOn },
|
||||
thumbColor: Platform.OS === "android" ? colors.switchThumb : undefined,
|
||||
ios_backgroundColor: colors.switchIosBackground,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const business = businessQuery.data;
|
||||
if (!business) return;
|
||||
setValues({
|
||||
name: business.name,
|
||||
nickname: business.nickname ?? "",
|
||||
email: business.email ?? "",
|
||||
phone: business.phone ?? "",
|
||||
addressLine1: business.addressLine1 ?? "",
|
||||
addressLine2: business.addressLine2 ?? "",
|
||||
city: business.city ?? "",
|
||||
state: business.state ?? "",
|
||||
postalCode: business.postalCode ?? "",
|
||||
country: business.country ?? "United States",
|
||||
website: business.website ?? "",
|
||||
taxId: business.taxId ?? "",
|
||||
isDefault: business.isDefault ?? false,
|
||||
});
|
||||
}, [businessQuery.data]);
|
||||
|
||||
const createBusiness = api.businesses.create.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.businesses.getAll.invalidate();
|
||||
onSaved();
|
||||
},
|
||||
onError: (err) => setFieldError(err.message),
|
||||
});
|
||||
|
||||
const updateBusiness = api.businesses.update.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.businesses.getAll.invalidate();
|
||||
if (businessId) void utils.businesses.getById.invalidate({ id: businessId });
|
||||
onSaved();
|
||||
},
|
||||
onError: (err) => setFieldError(err.message),
|
||||
});
|
||||
|
||||
const deleteBusiness = api.businesses.delete.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.businesses.getAll.invalidate();
|
||||
onDeleted?.();
|
||||
},
|
||||
onError: (err) => Alert.alert("Could not delete business", err.message),
|
||||
});
|
||||
|
||||
function patch<K extends keyof BusinessFormValues>(field: K, value: BusinessFormValues[K]) {
|
||||
setValues((prev) => ({ ...prev, [field]: value }));
|
||||
setFieldError(null);
|
||||
}
|
||||
|
||||
function buildPayload() {
|
||||
return {
|
||||
name: values.name.trim(),
|
||||
nickname: values.nickname.trim(),
|
||||
email: values.email.trim(),
|
||||
phone: values.phone.trim(),
|
||||
addressLine1: values.addressLine1.trim(),
|
||||
addressLine2: values.addressLine2.trim(),
|
||||
city: values.city.trim(),
|
||||
state: values.state.trim(),
|
||||
postalCode: values.postalCode.trim(),
|
||||
country: values.country.trim() || "United States",
|
||||
website: values.website.trim(),
|
||||
taxId: values.taxId.trim(),
|
||||
isDefault: values.isDefault,
|
||||
};
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (!values.name.trim()) {
|
||||
setFieldError("Business name is required");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = buildPayload();
|
||||
|
||||
if (mode === "create") {
|
||||
createBusiness.mutate(payload);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!businessId) return;
|
||||
updateBusiness.mutate({ id: businessId, ...payload });
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
if (!businessId) return;
|
||||
Alert.alert(
|
||||
"Delete business",
|
||||
"This cannot be undone. Businesses with invoices cannot be deleted.",
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Delete",
|
||||
style: "destructive",
|
||||
onPress: () => deleteBusiness.mutate({ id: businessId }),
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
const saving = createBusiness.isPending || updateBusiness.isPending;
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
style={styles.flex}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={[styles.container, { paddingBottom: scrollPadding }]}
|
||||
contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : undefined}
|
||||
scrollIndicatorInsets={{ bottom: scrollPadding }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<Card title="Profile">
|
||||
<Input label="Name" value={values.name} onChangeText={(v) => patch("name", v)} />
|
||||
<Input
|
||||
label="Nickname"
|
||||
value={values.nickname}
|
||||
onChangeText={(v) => patch("nickname", v)}
|
||||
placeholder="Optional short name"
|
||||
/>
|
||||
<Input
|
||||
label="Email"
|
||||
value={values.email}
|
||||
onChangeText={(v) => patch("email", v)}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<Input
|
||||
label="Phone"
|
||||
value={values.phone}
|
||||
onChangeText={(v) => patch("phone", v)}
|
||||
keyboardType="phone-pad"
|
||||
/>
|
||||
<Input
|
||||
label="Website"
|
||||
value={values.website}
|
||||
onChangeText={(v) => patch("website", v)}
|
||||
autoCapitalize="none"
|
||||
keyboardType="url"
|
||||
placeholder="https://"
|
||||
/>
|
||||
<Input
|
||||
label="Tax ID"
|
||||
value={values.taxId}
|
||||
onChangeText={(v) => patch("taxId", v)}
|
||||
placeholder="Optional"
|
||||
/>
|
||||
<View style={styles.switchRow}>
|
||||
<View style={styles.switchCopy}>
|
||||
<Text style={[styles.switchLabel, { color: colors.foreground }]}>
|
||||
Default business
|
||||
</Text>
|
||||
<Text style={[styles.switchHint, { color: colors.mutedForeground }]}>
|
||||
Used for new invoices when none is selected
|
||||
</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={values.isDefault}
|
||||
onValueChange={(v) => patch("isDefault", v)}
|
||||
{...switchProps}
|
||||
/>
|
||||
</View>
|
||||
</Card>
|
||||
|
||||
<Card title="Address">
|
||||
<Input
|
||||
label="Address line 1"
|
||||
value={values.addressLine1}
|
||||
onChangeText={(v) => patch("addressLine1", v)}
|
||||
/>
|
||||
<Input
|
||||
label="Address line 2"
|
||||
value={values.addressLine2}
|
||||
onChangeText={(v) => patch("addressLine2", v)}
|
||||
/>
|
||||
<Input label="City" value={values.city} onChangeText={(v) => patch("city", v)} />
|
||||
<Input label="State" value={values.state} onChangeText={(v) => patch("state", v)} />
|
||||
<Input
|
||||
label="Postal code"
|
||||
value={values.postalCode}
|
||||
onChangeText={(v) => patch("postalCode", v)}
|
||||
/>
|
||||
<Input
|
||||
label="Country"
|
||||
value={values.country}
|
||||
onChangeText={(v) => patch("country", v)}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{fieldError ? <Text style={styles.error}>{fieldError}</Text> : null}
|
||||
|
||||
<View style={styles.actions}>
|
||||
<Button
|
||||
title={mode === "create" ? "Create business" : "Save changes"}
|
||||
loading={saving}
|
||||
onPress={handleSave}
|
||||
/>
|
||||
{mode === "edit" ? (
|
||||
<Button
|
||||
title="Delete business"
|
||||
variant="danger"
|
||||
loading={deleteBusiness.isPending}
|
||||
onPress={confirmDelete}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const createBusinessFormStyles = (colors: ThemeColors, _isDark: boolean) =>
|
||||
StyleSheet.create({
|
||||
flex: { flex: 1 },
|
||||
container: {
|
||||
padding: spacing.md,
|
||||
gap: spacing.md,
|
||||
},
|
||||
switchRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: spacing.md,
|
||||
paddingTop: spacing.xs,
|
||||
},
|
||||
switchCopy: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
},
|
||||
switchLabel: {
|
||||
fontFamily: fonts.bodyMedium,
|
||||
fontSize: 14,
|
||||
},
|
||||
switchHint: {
|
||||
fontFamily: fonts.body,
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
},
|
||||
actions: {
|
||||
gap: spacing.sm,
|
||||
},
|
||||
error: {
|
||||
color: colors.destructive,
|
||||
fontFamily: fonts.body,
|
||||
fontSize: 14,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user