bananas-commerce-admin
Version:
What's this, an admin for apes?
92 lines • 4.3 kB
JavaScript
import React 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 { hasPermission } from "../../../util/has_permission";
export const MemberDetailCard = (props) => {
const params = useParams();
const api = useApi();
const { user } = useUser();
const { t } = useI18n();
const handleSave = async (values) => {
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,
};
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)
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);
throw new Error("updating member fields.");
}
};
const member = props.member ?? {
id: "",
number: "",
given_name: "",
family_name: "",
email: "",
phone: "",
billing_address: {
street_address: "",
street_address2: "",
postal_code: "",
city: "",
country_code: "",
region: "",
care_of: "",
},
origin: "",
date_verified: "",
};
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,
React.createElement(CardRow, null,
React.createElement(CardFieldText, { formName: "given_name", label: t("First Name"), required: true, size: 3, value: member.given_name }),
React.createElement(CardFieldText, { formName: "family_name", label: t("Last Name"), required: true, size: 3, value: member.family_name })),
React.createElement(CardRow, null,
React.createElement(CardFieldText, { formName: "phone", label: t("Phone"), required: true, size: 3, value: member.phone }),
React.createElement(CardFieldText, { formName: "email", label: t("Email"), size: 3, value: member.email })),
React.createElement(CardRow, null,
React.createElement(CardFieldAddress, { formName: "billing_address", isEditable: hasPermission(user, "member.change_memberaddress"), label: t("Address"), required: true, value: member.billing_address }))),
React.createElement(CardActions, null,
React.createElement(CardCancelButton, null),
React.createElement(CardSaveButton, null))));
};
//# sourceMappingURL=MemberDetailCard.js.map