588 lines
17 KiB
TypeScript
588 lines
17 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import * as ImagePicker from "expo-image-picker";
|
|
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 { isRequiredString, useFieldVisibility } from "@/lib/form-validation";
|
|
import { api } from "@/lib/trpc";
|
|
import { BusinessBrandImage } from "@/components/businesses/BusinessBrandImage";
|
|
import {
|
|
getBrandAssetFieldNames,
|
|
type BrandAssetKind,
|
|
type BrandAssetTheme,
|
|
} from "@beenvoice/domain/brand-assets";
|
|
|
|
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;
|
|
hideNameWithLogo: boolean;
|
|
isDefault: boolean;
|
|
};
|
|
|
|
const emptyValues: BusinessFormValues = {
|
|
name: "",
|
|
nickname: "",
|
|
email: "",
|
|
phone: "",
|
|
addressLine1: "",
|
|
addressLine2: "",
|
|
city: "",
|
|
state: "",
|
|
postalCode: "",
|
|
country: "United States",
|
|
website: "",
|
|
taxId: "",
|
|
hideNameWithLogo: false,
|
|
isDefault: false,
|
|
};
|
|
|
|
const MAX_BRAND_ASSET_BYTES = 5 * 1024 * 1024;
|
|
const BRAND_ASSET_SLOTS: Array<{
|
|
kind: BrandAssetKind;
|
|
theme: BrandAssetTheme;
|
|
label: string;
|
|
}> = [
|
|
{ kind: "logo", theme: "light", label: "Logo · light" },
|
|
{ kind: "logo", theme: "dark", label: "Logo · dark" },
|
|
{ kind: "wordmark", theme: "light", label: "Wordmark · light" },
|
|
{ kind: "wordmark", theme: "dark", label: "Wordmark · dark" },
|
|
{ kind: "icon", theme: "light", label: "Icon · light" },
|
|
{ kind: "icon", theme: "dark", label: "Icon · dark" },
|
|
];
|
|
|
|
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 [uploadingAsset, setUploadingAsset] = useState<string | null>(null);
|
|
const { touch, visible, markSubmitted } = useFieldVisibility();
|
|
|
|
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 ?? "",
|
|
hideNameWithLogo: business.hideNameWithLogo ?? false,
|
|
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),
|
|
});
|
|
const uploadLogo = api.businesses.uploadLogo.useMutation({
|
|
onSuccess: () => {
|
|
if (businessId)
|
|
void utils.businesses.getById.invalidate({ id: businessId });
|
|
},
|
|
onError: (err) => Alert.alert("Could not upload brand asset", err.message),
|
|
onSettled: () => setUploadingAsset(null),
|
|
});
|
|
const removeLogo = api.businesses.removeLogo.useMutation({
|
|
onSuccess: () => {
|
|
if (businessId)
|
|
void utils.businesses.getById.invalidate({ id: businessId });
|
|
},
|
|
onError: (err) => Alert.alert("Could not remove brand asset", err.message),
|
|
});
|
|
|
|
async function pickBrandAsset(kind: BrandAssetKind, theme: BrandAssetTheme) {
|
|
if (!businessId) return;
|
|
const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
if (!permission.granted) {
|
|
Alert.alert(
|
|
"Photos access needed",
|
|
"Allow photo access to upload branding.",
|
|
);
|
|
return;
|
|
}
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ["images"],
|
|
quality: 1,
|
|
base64: true,
|
|
});
|
|
if (result.canceled) return;
|
|
const asset = result.assets[0];
|
|
if (!asset?.base64) return;
|
|
const mimeType = asset.mimeType ?? "image/jpeg";
|
|
if (!["image/png", "image/jpeg", "image/webp"].includes(mimeType)) {
|
|
Alert.alert(
|
|
"Unsupported image",
|
|
"Mobile supports PNG, JPEG, and WebP. Upload SVG assets from the web app.",
|
|
);
|
|
return;
|
|
}
|
|
if (asset.fileSize && asset.fileSize > MAX_BRAND_ASSET_BYTES) {
|
|
Alert.alert("Image too large", "Brand assets must be 5MB or less.");
|
|
return;
|
|
}
|
|
const key = `${kind}-${theme}`;
|
|
setUploadingAsset(key);
|
|
uploadLogo.mutate({
|
|
id: businessId,
|
|
kind,
|
|
theme,
|
|
filename: asset.fileName ?? `${key}.jpg`,
|
|
mimeType,
|
|
data: asset.base64,
|
|
});
|
|
}
|
|
|
|
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(),
|
|
hideNameWithLogo: values.hideNameWithLogo,
|
|
isDefault: values.isDefault,
|
|
};
|
|
}
|
|
|
|
function handleSave() {
|
|
markSubmitted();
|
|
if (!canSave) 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;
|
|
const nameError = values.name.trim()
|
|
? undefined
|
|
: "Business name is required";
|
|
const canSave = isRequiredString(values.name);
|
|
|
|
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)}
|
|
onBlur={() => touch("name")}
|
|
required
|
|
error={visible("name") ? nameError : undefined}
|
|
/>
|
|
<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>
|
|
|
|
{mode === "edit" && businessQuery.data ? (
|
|
<Card title="Brand assets">
|
|
<Text style={[styles.brandHint, { color: colors.mutedForeground }]}>
|
|
Upload combined logos, wordmarks, and compact icons for light and
|
|
dark backgrounds. Missing variants fall back automatically.
|
|
</Text>
|
|
{BRAND_ASSET_SLOTS.map((slot) => {
|
|
const [storageField] = getBrandAssetFieldNames(
|
|
slot.kind,
|
|
slot.theme,
|
|
);
|
|
const hasAsset = Boolean(businessQuery.data[storageField]);
|
|
const key = `${slot.kind}-${slot.theme}`;
|
|
return (
|
|
<View key={key} style={styles.brandSlot}>
|
|
<View
|
|
style={[
|
|
styles.brandPreview,
|
|
{
|
|
backgroundColor:
|
|
slot.theme === "dark" ? "#09090b" : "#ffffff",
|
|
borderColor: colors.border,
|
|
},
|
|
]}
|
|
>
|
|
{hasAsset ? (
|
|
<BusinessBrandImage
|
|
business={businessQuery.data}
|
|
kind={slot.kind}
|
|
theme={slot.theme}
|
|
style={styles.brandImage}
|
|
/>
|
|
) : (
|
|
<Text
|
|
style={{
|
|
color:
|
|
slot.theme === "dark"
|
|
? "rgba(255,255,255,0.45)"
|
|
: "rgba(0,0,0,0.35)",
|
|
}}
|
|
>
|
|
No asset
|
|
</Text>
|
|
)}
|
|
</View>
|
|
<Text
|
|
style={[styles.brandLabel, { color: colors.foreground }]}
|
|
>
|
|
{slot.label}
|
|
</Text>
|
|
<View style={styles.brandActions}>
|
|
<Button
|
|
title={hasAsset ? "Replace" : "Upload"}
|
|
variant="secondary"
|
|
leftIcon="cloud-upload-outline"
|
|
loading={uploadingAsset === key}
|
|
disabled={Boolean(uploadingAsset)}
|
|
style={styles.brandAction}
|
|
onPress={() => void pickBrandAsset(slot.kind, slot.theme)}
|
|
/>
|
|
{hasAsset ? (
|
|
<Button
|
|
title="Remove"
|
|
variant="ghost"
|
|
leftIcon="trash-outline"
|
|
loading={removeLogo.isPending}
|
|
style={styles.brandAction}
|
|
onPress={() =>
|
|
removeLogo.mutate({
|
|
id: businessId!,
|
|
kind: slot.kind,
|
|
theme: slot.theme,
|
|
})
|
|
}
|
|
/>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
})}
|
|
<View style={styles.switchRow}>
|
|
<View style={styles.switchCopy}>
|
|
<Text
|
|
style={[styles.switchLabel, { color: colors.foreground }]}
|
|
>
|
|
Hide business name on invoices
|
|
</Text>
|
|
<Text
|
|
style={[styles.switchHint, { color: colors.mutedForeground }]}
|
|
>
|
|
Useful when the combined logo already includes the name
|
|
</Text>
|
|
</View>
|
|
<Switch
|
|
value={values.hideNameWithLogo}
|
|
onValueChange={(value) => patch("hideNameWithLogo", value)}
|
|
{...switchProps}
|
|
/>
|
|
</View>
|
|
</Card>
|
|
) : null}
|
|
|
|
<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 selectable style={styles.error}>
|
|
{fieldError}
|
|
</Text>
|
|
) : null}
|
|
|
|
<View style={styles.actions}>
|
|
<Button
|
|
title={mode === "create" ? "Create business" : "Save changes"}
|
|
loading={saving}
|
|
disabled={!canSave}
|
|
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,
|
|
},
|
|
brandHint: {
|
|
fontFamily: fonts.body,
|
|
fontSize: 13,
|
|
lineHeight: 18,
|
|
},
|
|
brandSlot: {
|
|
gap: spacing.sm,
|
|
paddingVertical: spacing.xs,
|
|
},
|
|
brandPreview: {
|
|
height: 92,
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: spacing.md,
|
|
},
|
|
brandImage: {
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
brandLabel: {
|
|
fontFamily: fonts.bodySemiBold,
|
|
fontSize: 14,
|
|
},
|
|
brandActions: {
|
|
flexDirection: "row",
|
|
gap: spacing.sm,
|
|
},
|
|
brandAction: {
|
|
flex: 1,
|
|
},
|
|
error: {
|
|
color: colors.destructive,
|
|
fontFamily: fonts.body,
|
|
fontSize: 14,
|
|
},
|
|
});
|