- {/* Outbound message metadata */}
- {message.isoutbound && (
+ {/* Outbound message metadata for non-system messages */}
+ {!isSystem && message.isoutbound && (
{i18n.t("messaging.labels.sentby", {
by: message.userid,
diff --git a/client/src/components/chat-send-message/chat-send-message.component.jsx b/client/src/components/chat-send-message/chat-send-message.component.jsx
index c3e91b2b1..5b4d31d14 100644
--- a/client/src/components/chat-send-message/chat-send-message.component.jsx
+++ b/client/src/components/chat-send-message/chat-send-message.component.jsx
@@ -1,5 +1,5 @@
-import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
-import { Alert, Input, Space, Spin } from "antd";
+import { ExclamationCircleOutlined, LoadingOutlined, SendOutlined } from "@ant-design/icons";
+import { Alert, Input, Space, Spin, Tooltip } from "antd";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -69,7 +69,16 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
return (
- {isOptedOut && }
+ {isOptedOut && (
+
+ }
+ message={t("messaging.errors.no_consent")}
+ type="error"
+ />
+
+ )}
{!isOptedOut && (
<>
diff --git a/client/src/components/owner-detail-form/owner-detail-form.component.jsx b/client/src/components/owner-detail-form/owner-detail-form.component.jsx
index a71cbc836..99bacd566 100644
--- a/client/src/components/owner-detail-form/owner-detail-form.component.jsx
+++ b/client/src/components/owner-detail-form/owner-detail-form.component.jsx
@@ -1,14 +1,15 @@
-import { Form, Input } from "antd";
-import React from "react";
+import { Form, Input, Tooltip } from "antd";
+import { CloseCircleFilled } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
-export default function OwnerDetailFormComponent({ form, loading }) {
+export default function OwnerDetailFormComponent({ form, loading, isPhone1OptedOut, isPhone2OptedOut }) {
const { t } = useTranslation();
const { getFieldValue } = form;
+
return (
@@ -62,19 +63,55 @@ export default function OwnerDetailFormComponent({ form, loading }) {
>
-
PhoneItemFormatterValidation(getFieldValue, "ownr_ph1")]}
- >
-
+
+
+ PhoneItemFormatterValidation(getFieldValue, "ownr_ph1")]}
+ >
+
+
+ {isPhone1OptedOut && (
+
+
+
+ )}
+
- PhoneItemFormatterValidation(getFieldValue, "ownr_ph2")]}
- >
-
+
+
+ PhoneItemFormatterValidation(getFieldValue, "ownr_ph2")]}
+ >
+
+
+ {isPhone2OptedOut && (
+
+
+
+ )}
+
diff --git a/client/src/components/owner-detail-form/owner-detail-form.container.jsx b/client/src/components/owner-detail-form/owner-detail-form.container.jsx
index fdf2df339..a92913d30 100644
--- a/client/src/components/owner-detail-form/owner-detail-form.container.jsx
+++ b/client/src/components/owner-detail-form/owner-detail-form.container.jsx
@@ -1,69 +1,113 @@
import { Button, Form, Popconfirm } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
-
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
-import { useMutation } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client";
import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
import { DELETE_OWNER, UPDATE_OWNER } from "../../graphql/owners.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors"; // Adjust path
+import { phoneNumberOptOutService } from "../../utils/phoneOptOutService.js"; // Adjust path
import OwnerDetailFormComponent from "./owner-detail-form.component";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { phone } from "phone"; // Import phone utility for formatting
-function OwnerDetailFormContainer({ owner, refetch }) {
+// Connect to Redux to access bodyshop
+const mapStateToProps = createStructuredSelector({
+ bodyshop: selectBodyshop
+});
+
+function OwnerDetailFormContainer({ owner, refetch, bodyshop }) {
const { t } = useTranslation();
const [form] = Form.useForm();
- const history = useNavigate();
+ const navigate = useNavigate();
const [loading, setLoading] = useState(false);
+ const [optedOutPhones, setOptedOutPhones] = useState(new Set());
const [updateOwner] = useMutation(UPDATE_OWNER);
const [deleteOwner] = useMutation(DELETE_OWNER);
const notification = useNotification();
+ const apolloClient = useApolloClient();
+
+ // Fetch opt-out status on mount
+ useEffect(() => {
+ const fetchOptOutStatus = async () => {
+ if (bodyshop?.id && (owner?.ownr_ph1 || owner?.ownr_ph2)) {
+ const phoneNumbers = [owner.ownr_ph1, owner.ownr_ph2].filter(Boolean);
+ const optOutSet = await phoneNumberOptOutService(apolloClient, bodyshop.id, phoneNumbers);
+ setOptedOutPhones(optOutSet);
+ }
+ };
+
+ fetchOptOutStatus();
+ }, [apolloClient, bodyshop?.id, owner?.ownr_ph1, owner?.ownr_ph2]);
+
+ // Reset form fields when owner changes
+ useEffect(() => {
+ form.setFieldsValue({
+ ownr_ph1: owner?.ownr_ph1,
+ ownr_ph2: owner?.ownr_ph2,
+ ...owner
+ });
+ }, [owner, form]);
const handleDelete = async () => {
setLoading(true);
- const result = await deleteOwner({
- variables: { id: owner.id }
- });
- console.log(result);
- if (result.errors) {
- notification["error"]({
+ try {
+ const result = await deleteOwner({
+ variables: { id: owner.id }
+ });
+ if (result.errors) {
+ notification.error({
+ message: t("owners.errors.deleting", {
+ error: JSON.stringify(result.errors)
+ })
+ });
+ } else {
+ notification.success({
+ message: t("owners.successes.delete")
+ });
+ navigate(`/manage/owners`);
+ }
+ } catch (error) {
+ notification.error({
message: t("owners.errors.deleting", {
- error: JSON.stringify(result.errors)
+ error: error.message
})
});
+ } finally {
setLoading(false);
- } else {
- notification["success"]({
- message: t("owners.successes.delete")
- });
- setLoading(false);
- history(`/manage/owners`);
}
};
const handleFinish = async (values) => {
setLoading(true);
- const result = await updateOwner({
- variables: { ownerId: owner.id, owner: values }
- });
-
- if (!!result.errors) {
- notification["error"]({
+ try {
+ const result = await updateOwner({
+ variables: { ownerId: owner.id, owner: values }
+ });
+ if (result.errors) {
+ notification.error({
+ message: t("owners.errors.saving", {
+ error: JSON.stringify(result.errors)
+ })
+ });
+ } else {
+ notification.success({
+ message: t("owners.successes.save")
+ });
+ if (refetch) await refetch();
+ form.resetFields();
+ }
+ } catch (error) {
+ notification.error({
message: t("owners.errors.saving", {
- error: JSON.stringify(result.errors)
+ error: error.message
})
});
+ } finally {
setLoading(false);
- return;
}
-
- notification["success"]({
- message: t("owners.successes.save")
- });
-
- if (refetch) await refetch();
- form.resetFields();
- form.resetFields();
- setLoading(false);
};
return (
@@ -72,6 +116,7 @@ function OwnerDetailFormContainer({ owner, refetch }) {
title={t("menus.header.owners")}
extra={[
,
-