bananas-commerce-admin
Version:
What's this, an admin for apes?
126 lines • 7.12 kB
JavaScript
import React, { useState } from "react";
import { useParams } from "react-router-dom";
import Card from "../../../components/Card";
import CardActions from "../../../components/Card/CardActions";
import CardCancelButton from "../../../components/Card/CardCancelButton";
import CardContent from "../../../components/Card/CardContent";
import CardFieldAddress from "../../../components/Card/CardFieldAddress";
import CardFieldText from "../../../components/Card/CardFieldText";
import CardHeader from "../../../components/Card/CardHeader";
import CardRow from "../../../components/Card/CardRow";
import CardSaveButton from "../../../components/Card/CardSaveButton";
import { useApi } from "../../../contexts/ApiContext";
import { useI18n } from "../../../contexts/I18nContext";
import { useUser } from "../../../contexts/UserContext";
import { getFormErrors, ValidationError } from "../../../util/form_validation";
import { hasPermission } from "../../../util/has_permission";
import { CustomerType } from "../types/member";
export const MemberDetailCard = (props) => {
const params = useParams();
const api = useApi();
const { user } = useUser();
const { t } = useI18n();
const [fieldErrors, setFieldErrors] = useState({});
const handleSave = async (values) => {
setFieldErrors({});
const body = { ...values };
const addressFields = {
street_address: values.street_address,
street_address2: values.street_address2,
postal_code: values.postal_code,
city: values.city,
country_code: values.country_code,
region: values.region,
care_of: values.care_of,
};
// Convert all empty string fields to null
Object.entries(body).forEach(([key, value]) => {
if (value === "") {
// @ts-expect-error - we know that body has these properties
body[key] = null;
}
});
if (Object.values(addressFields).some((value) => value)) {
body.billing_address = {};
Object.entries(addressFields).forEach(([key, value]) => {
// @ts-expect-error - we know that body has a billing_address property
if (value != null && value !== "")
body.billing_address[key] = value;
});
}
const action = api.operations["member.member:update"];
if (!action) {
throw new Error('Invalid action "member.member:update".');
}
const response = await action.call({
params,
body,
});
if (response.ok) {
const updatedMember = await response.json();
props.onUpdated(updatedMember);
return t("Member updated successfully.");
}
else {
console.error("[MEMBERSHIP_DETAIL_CARD]", response);
const errors = await getFormErrors(response);
if (errors) {
setFieldErrors(errors.fieldErrors);
throw new ValidationError(errors.formErrors[0] ?? t("Invalid form input. Please correct the highlighted fields."), errors);
}
throw new Error("updating member fields.");
}
};
const member = props.member ?? {
id: "",
number: "",
customer_type: "",
company_name: "",
identification_number: "",
given_name: "",
family_name: "",
email: "",
phone: "",
billing_address: {
street_address: "",
street_address2: "",
postal_code: "",
city: "",
country_code: "",
region: "",
care_of: "",
},
origin: "",
date_verified: "",
is_valid_customer: true,
};
const isCompany = member.customer_type === CustomerType.COMPANY;
return (React.createElement(Card, { columns: 6, isEditable: hasPermission(user, "member.change_member"), onSubmit: handleSave },
React.createElement(CardHeader, { title: t("Contact Details") }),
React.createElement(CardContent, null,
isCompany && (React.createElement(CardRow, null,
React.createElement(CardFieldText, { error: Boolean(fieldErrors.company_name), formName: "company_name", helperText: fieldErrors.company_name, label: t("Company Name"), required: isCompany, size: 3, value: member.company_name }),
React.createElement(CardFieldText, { disabled: !isCompany, error: Boolean(fieldErrors.identification_number), formName: "identification_number", helperText: fieldErrors.identification_number, label: t("Organization Number"), size: 3, value: member.identification_number ?? "" }))),
React.createElement(CardRow, null,
React.createElement(CardFieldText, { error: Boolean(fieldErrors.given_name), formName: "given_name", helperText: fieldErrors.given_name, label: isCompany ? t("Contact") + ": " + t("First Name") : t("First Name"), required: !isCompany, size: 3, value: member.given_name }),
React.createElement(CardFieldText, { error: Boolean(fieldErrors.family_name), formName: "family_name", helperText: fieldErrors.family_name, label: t("Last Name"), required: !isCompany, size: 3, value: member.family_name })),
React.createElement(CardRow, null,
React.createElement(CardFieldText, { required: true, error: Boolean(fieldErrors.email), formName: "email", helperText: fieldErrors.email, label: t("Email"), size: 3, value: member.email }),
React.createElement(CardFieldText, { error: Boolean(fieldErrors.phone), formName: "phone", helperText: fieldErrors.phone, label: t("Phone"), size: 3, value: member.phone })),
!isCompany && member.identification_number && (React.createElement(CardRow, null,
React.createElement(CardFieldText, { disabled: !isCompany, error: Boolean(fieldErrors.identification_number), formName: "identification_number", helperText: fieldErrors.identification_number, label: t("SSN"), size: 6, value: member.identification_number ?? "" }))),
React.createElement(CardRow, null,
React.createElement(CardFieldAddress, { fieldErrors: {
street_address: fieldErrors.street_address,
street_address2: fieldErrors.street_address2,
postal_code: fieldErrors.postal_code,
city: fieldErrors.city,
country_code: fieldErrors.country_code,
region: fieldErrors.region,
care_of: fieldErrors.care_of,
}, formName: "billing_address", isCompany: isCompany, isEditable: hasPermission(user, "member.change_memberaddress"), label: t("Billing Address"), required: isCompany, value: member.billing_address }))),
React.createElement(CardActions, null,
React.createElement(CardCancelButton, null),
React.createElement(CardSaveButton, null))));
};
//# sourceMappingURL=MemberDetailCard.js.map