admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3182-Phone-Number-Consent - Checkpoint

Browse Source
This commit is contained in:
Dave Richer
2025-05-21 14:32:35 -04:00
parent 7bd5190bf2
commit 8ee52598e8
31 changed files with 128 additions and 991 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
client/src/components/chat-affix/chat-affix.container.jsx
View File

@@ -8,15 +8,12 @@ import ChatPopupComponent from "../chat-popup/chat-popup.component";
import "./chat-affix.styles.scss";
import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
import { useSocket } from "../../contexts/SocketIO/useSocket.js";
import { GET_PHONE_NUMBER_CONSENT } from "../../graphql/consent.queries";
export function ChatAffixContainer({ bodyshop, chatVisible }) {
const { t } = useTranslation();
const client = useApolloClient();
const { socket } = useSocket();
const enforceConsent = bodyshop?.enforce_sms_consent ?? false;
useEffect(() => {
if (!bodyshop || !bodyshop.messagingservicesid) return;
@@ -41,63 +38,11 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
if (socket && socket.connected) {
registerMessagingHandlers({ socket, client });
// Handle consent-changed events only if enforce_sms_consent is true
const handleConsentChanged = ({ bodyshopId, phone_number, consent_status, reason }) => {
if (!enforceConsent || bodyshopId !== bodyshop.id) return;
try {
const cacheData = client.readQuery({
query: GET_PHONE_NUMBER_CONSENT,
variables: { bodyshopid: bodyshopId, phone_number }
});
if (!cacheData?.phone_number_consent?.[0]) {
console.warn("No cached data for GET_PHONE_NUMBER_CONSENT:", { bodyshopId, phone_number });
return;
}
const updatedConsent = {
...cacheData.phone_number_consent[0],
consent_status,
consent_updated_at: new Date().toISOString(),
phone_number_consent_history: [
{
__typename: "phone_number_consent_history",
id: `temp-${Date.now()}`,
reason,
changed_at: new Date().toISOString(),
old_value: cacheData.phone_number_consent[0].consent_status,
new_value: consent_status,
changed_by: "system"
},
...(cacheData.phone_number_consent[0].phone_number_consent_history || [])
]
};
client.writeQuery(
{
query: GET_PHONE_NUMBER_CONSENT,
variables: { bodyshopid: bodyshopId, phone_number }
},
{
phone_number_consent: [updatedConsent]
}
);
console.log("Cache update in handleConsentChanged:", { phone_number, consent_status, updatedConsent });
} catch (error) {
console.error("Error updating consent cache in handleConsentChanged:", error.message, error.stack);
}
};
socket.on("consent-changed", handleConsentChanged);
return () => {
socket.off("consent-changed", handleConsentChanged);
unregisterMessagingHandlers({ socket });
};
}
}, [bodyshop, socket, t, client, enforceConsent]);
}, [bodyshop, socket, t, client]);
if (!bodyshop || !bodyshop.messagingservicesid) return <></>;

81
client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
View File

@@ -1,5 +1,5 @@
import { Badge, Card, List, Space, Tag } from "antd";
import { useEffect, useState, useMemo } from "react";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Virtuoso } from "react-virtuoso";
import { createStructuredSelector } from "reselect";
@@ -10,61 +10,35 @@ import PhoneFormatter from "../../utils/PhoneFormatter";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
import _ from "lodash";
import "./chat-conversation-list.styles.scss";
import { useQuery } from "@apollo/client";
import { GET_PHONE_NUMBER_CONSENTS } from "../../graphql/consent.queries";
import { phone } from "phone";
import { useTranslation } from "react-i18next";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
selectedConversation: selectSelectedConversation,
bodyshop: selectBodyshop
selectedConversation: selectSelectedConversation
});
const mapDispatchToProps = (dispatch) => ({
setSelectedConversation: (conversationId) => dispatch(setSelectedConversation(conversationId))
});
function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation, bodyshop }) {
const { t } = useTranslation();
function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
// That comma is there for a reason, do not remove it
const [, forceUpdate] = useState(false);
const enforceConsent = bodyshop?.enforce_sms_consent ?? false;
const phoneNumbers = conversationList.map((item) => phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, ""));
const { data: consentData, loading: consentLoading } = useQuery(GET_PHONE_NUMBER_CONSENTS, {
variables: {
bodyshopid: conversationList[0]?.bodyshopid,
phone_numbers: phoneNumbers
},
skip: !enforceConsent || !conversationList.length || !conversationList[0]?.bodyshopid,
fetchPolicy: "cache-and-network"
});
const consentMap = useMemo(() => {
const map = new Map();
consentData?.phone_number_consent?.forEach((consent) => {
map.set(consent.phone_number, consent.consent_status);
});
return map;
}, [consentData]);
// Re-render every minute
useEffect(() => {
const interval = setInterval(() => {
forceUpdate((prev) => !prev);
}, 60000);
return () => clearInterval(interval);
forceUpdate((prev) => !prev); // Toggle state to trigger re-render
}, 60000); // 1 minute in milliseconds
return () => clearInterval(interval); // Cleanup on unmount
}, []);
const sortedConversationList = useMemo(() => {
// Memoize the sorted conversation list
const sortedConversationList = React.useMemo(() => {
return _.orderBy(conversationList, ["updated_at"], ["desc"]);
}, [conversationList]);
const renderConversation = (index, t) => {
const renderConversation = (index) => {
const item = sortedConversationList[index];
const normalizedPhone = phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, "");
const isConsented = enforceConsent ? (consentMap.get(normalizedPhone) ?? false) : true;
const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
const cardContentLeft =
item.job_conversations.length > 0
@@ -86,12 +60,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
</>
);
const cardExtra = (
<>
<Badge count={item.messages_aggregate.aggregate.count} />
{enforceConsent && !isConsented && <Tag color="red">{t("messaging.labels.no_consent")}</Tag>}
</>
);
const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
const getCardStyle = () =>
item.id === selectedConversation
@@ -104,25 +73,9 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
onClick={() => setSelectedConversation(item.id)}
className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
>
<Card style={getCardStyle()} variant={true} size="small" extra={cardExtra} title={cardTitle}>
<div
style={{
display: "inline-block",
width: "70%",
textAlign: "left"
}}
>
{cardContentLeft}
</div>
<div
style={{
display: "inline-block",
width: "30%",
textAlign: "right"
}}
>
{cardContentRight}
</div>
<Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
<div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
<div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
</Card>
</List.Item>
);
@@ -132,7 +85,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
<div className="chat-list-container">
<Virtuoso
data={sortedConversationList}
itemContent={(index) => renderConversation(index, t)}
itemContent={(index) => renderConversation(index)}
style={{ height: "100%", width: "100%" }}
/>
</div>

15
client/src/components/chat-send-message/chat-send-message.component.jsx
View File

@@ -1,5 +1,5 @@
import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
import { Input, Spin, Alert } from "antd";
import { Alert, Input, Spin } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -12,7 +12,6 @@ import ChatMediaSelector from "../chat-media-selector/chat-media-selector.compon
import ChatPresetsComponent from "../chat-presets/chat-presets.component";
import { useQuery } from "@apollo/client";
import { GET_PHONE_NUMBER_CONSENT } from "../../graphql/consent.queries";
import AlertComponent from "../alert/alert.component";
import { phone } from "phone";
const mapStateToProps = createStructuredSelector({
@@ -31,15 +30,13 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
const [selectedMedia, setSelectedMedia] = useState([]);
const { t } = useTranslation();
const enforceConsent = bodyshop?.enforce_sms_consent ?? false;
const normalizedPhone = phone(conversation.phone_num, "CA").phoneNumber.replace(/^\+1/, "");
const { data: consentData } = useQuery(GET_PHONE_NUMBER_CONSENT, {
variables: { bodyshopid: bodyshop.id, phone_number: normalizedPhone },
fetchPolicy: "cache-and-network",
skip: !enforceConsent
fetchPolicy: "cache-and-network"
});
const isConsented = enforceConsent ? (consentData?.phone_number_consent?.[0]?.consent_status ?? false) : true;
const isConsented = consentData?.phone_number_consent?.[0]?.consent_status ?? false;
useEffect(() => {
inputArea.current.focus();
@@ -72,9 +69,7 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
return (
<div className="imex-flex-row" style={{ width: "100%" }}>
{enforceConsent && !isConsented && (
<Alert message={t("messaging.errors.no_consent")} type="warning" style={{ marginBottom: 8 }} />
)}
{!isConsented && <Alert message={t("messaging.errors.no_consent")} type="warning" style={{ marginBottom: 8 }} />}
<ChatPresetsComponent className="imex-flex-row__margin" />
<ChatMediaSelector
conversation={conversation}

231
client/src/components/phone-number-consent/phone-number-consent.component.jsx
View File

@@ -1,6 +1,6 @@
import { useQuery, useApolloClient } from "@apollo/client";
import { Table, Switch, Input, Tooltip, Upload, Button } from "antd";
import { useState, useEffect } from "react";
import { useApolloClient, useQuery } from "@apollo/client";
import { Input, Table } from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -8,9 +8,7 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
import { GET_PHONE_NUMBER_CONSENTS } from "../../graphql/consent.queries";
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
import { TimeAgoFormatter } from "../../utils/DateFormatter";
import { UploadOutlined } from "@ant-design/icons";
import { phone } from "phone";
import axios from "axios";
import { useSocket } from "../../contexts/SocketIO/useSocket.js";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
@@ -32,216 +30,6 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
const client = useApolloClient();
const { socket } = useSocket();
useEffect(() => {
if (!socket || !socket.connected) return;
const handleConsentChanged = ({ bodyshopId, phone_number, consent_status, reason }) => {
if (bodyshopId !== bodyshop.id) return;
try {
const cacheData = client.readQuery({
query: GET_PHONE_NUMBER_CONSENTS,
variables: { bodyshopid: bodyshop.id, search: search ? `%${search}%` : undefined }
});
if (!cacheData?.phone_number_consent) {
console.warn("No cached data for GET_PHONE_NUMBER_CONSENTS in WebSocket handler");
return;
}
const updatedConsents = cacheData.phone_number_consent.map((consent) =>
consent.phone_number === phone_number
? {
...consent,
consent_status,
consent_updated_at: new Date().toISOString(),
phone_number_consent_history: [
{
__typename: "phone_number_consent_history",
id: `temp-${Date.now()}`,
reason,
changed_at: new Date().toISOString(),
old_value: consent.consent_status,
new_value: consent_status,
changed_by: currentUser.email
},
...(consent.phone_number_consent_history || [])
]
}
: consent
);
client.writeQuery(
{
query: GET_PHONE_NUMBER_CONSENTS,
variables: { bodyshopid: bodyshop.id, search: search ? `%${search}%` : undefined }
},
{
phone_number_consent: updatedConsents
}
);
console.log("WebSocket cache update:", { phone_number, consent_status, updatedConsents });
} catch (error) {
console.error("Error updating consent cache (WebSocket):", error.message, error.stack);
}
};
socket.on("consent-changed", handleConsentChanged);
return () => {
socket.off("consent-changed", handleConsentChanged);
};
}, [socket, client, bodyshop.id, search, currentUser.email]);
const handleSetConsent = async (phone_number, consent_status) => {
try {
const response = await axios.post("/sms/setConsent", {
bodyshopid: bodyshop.id,
phone_number,
consent_status,
reason: "Manual override in app",
changed_by: currentUser.email
});
const updatedConsent = {
...response.data.consent,
phone_number_consent_history: response.data.consent.phone_number_consent_history.map((history) => ({
...history,
__typename: "phone_number_consent_history"
}))
};
// Update Apollo cache
const cacheData = client.readQuery({
query: GET_PHONE_NUMBER_CONSENTS,
variables: { bodyshopid: bodyshop.id, search: search ? `%${search}%` : undefined }
});
let cacheUpdated = false;
if (cacheData?.phone_number_consent) {
const isPhoneNumberInCache = cacheData.phone_number_consent.some(
(consent) => consent.phone_number === phone_number
);
const updatedConsents = isPhoneNumberInCache
? cacheData.phone_number_consent.map((consent) =>
consent.phone_number === phone_number ? updatedConsent : consent
)
: [...cacheData.phone_number_consent, updatedConsent];
cacheUpdated = client.writeQuery(
{
query: GET_PHONE_NUMBER_CONSENTS,
variables: { bodyshopid: bodyshop.id, search: search ? `%${search}%` : undefined }
},
{
phone_number_consent: updatedConsents
}
);
console.log("Cache update in handleSetConsent:", {
phone_number,
consent_status,
updatedConsents,
search
});
} else {
console.warn("No cached data for GET_PHONE_NUMBER_CONSENTS in handleSetConsent");
}
// Always refetch to ensure UI updates
await refetch();
notification.success({
message: t("consent.update_success")
});
} catch (error) {
notification.error({
message: t("consent.update_failed")
});
console.error("Error updating consent:", error.message, error.stack);
}
};
const handleBulkUpload = async (file) => {
const reader = new FileReader();
reader.onload = async (e) => {
const text = e.target.result;
const lines = text.split("\n").slice(1); // Skip header
const consents = lines
.filter((line) => line.trim())
.map((line) => {
const [phone_number, consent_status] = line.split(",");
return {
phone_number: phone(phone_number, "CA").phoneNumber.replace(/^\+1/, ""),
consent_status: consent_status.trim().toLowerCase() === "true"
};
});
try {
const response = await axios.post("/sms/bulkSetConsent", {
bodyshopid: bodyshop.id,
consents
});
const updatedConsents = response.data.consents.map((consent) => ({
...consent,
phone_number_consent_history: consent.phone_number_consent_history.map((history) => ({
...history,
__typename: "phone_number_consent_history"
}))
}));
// Update Apollo cache
const cacheData = client.readQuery({
query: GET_PHONE_NUMBER_CONSENTS,
variables: { bodyshopid: bodyshop.id, search: search ? `%${search}%` : undefined }
});
if (cacheData?.phone_number_consent) {
const updatedConsentsMap = new Map(updatedConsents.map((consent) => [consent.phone_number, consent]));
const mergedConsents = cacheData.phone_number_consent.map((consent) =>
updatedConsentsMap.has(consent.phone_number) ? updatedConsentsMap.get(consent.phone_number) : consent
);
updatedConsents.forEach((consent) => {
if (!mergedConsents.some((c) => c.phone_number === consent.phone_number)) {
mergedConsents.push(consent);
}
});
client.writeQuery(
{
query: GET_PHONE_NUMBER_CONSENTS,
variables: { bodyshopid: bodyshop.id, search: search ? `%${search}%` : undefined }
},
{
phone_number_consent: mergedConsents
}
);
console.log("Cache update in handleBulkUpload:", { updatedConsents, mergedConsents });
} else {
console.warn("No cached data for GET_PHONE_NUMBER_CONSENTS in handleBulkUpload");
}
// Refetch to ensure UI updates
await refetch();
} catch (error) {
notification.error({
message: t("consent.bulk_update_failed")
});
console.error("Bulk upload failed:", error.message, error.stack);
}
};
reader.readAsText(file);
return false;
};
if (!bodyshop?.enforce_sms_consent) return null;
const columns = [
{
title: t("consent.phone_number"),
@@ -249,15 +37,6 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
render: (text) => <PhoneNumberFormatter>{text}</PhoneNumberFormatter>,
sorter: (a, b) => a.phone_number.localeCompare(b.phone_number)
},
{
title: t("consent.status"),
dataIndex: "consent_status",
render: (status, record) => (
<Tooltip title={record.phone_number_consent_history?.[0]?.reason || "No audit history"}>
<Switch checked={status} onChange={(checked) => handleSetConsent(record.phone_number, checked)} />
</Tooltip>
)
},
{
title: t("consent.updated_at"),
dataIndex: "consent_updated_at",
@@ -272,9 +51,7 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
onSearch={(value) => setSearch(value)}
style={{ marginBottom: 16 }}
/>
<Upload beforeUpload={handleBulkUpload} accept=".csv" showUploadList={false}>
<Button icon={<UploadOutlined />}>{t("consent.bulk_upload")}</Button>
</Upload>
<Table
columns={columns}
dataSource={data?.phone_number_consent}

50
client/src/components/shop-info/shop-info.consent.component.jsx
View File

@@ -1,65 +1,23 @@
import { useMutation } from "@apollo/client";
import { Switch, Typography, Tooltip, message } from "antd";
import { Typography } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { updateBodyshopEnforceConsent } from "../../redux/user/user.actions";
import { UPDATE_BODYSHOP_ENFORCE_CONSENT } from "../../graphql/bodyshop.queries";
import PhoneNumberConsentList from "../phone-number-consent/phone-number-consent.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
updateBodyshopEnforceConsent: (enforce_sms_consent) => dispatch(updateBodyshopEnforceConsent(enforce_sms_consent))
});
const mapDispatchToProps = (dispatch) => ({});
function ShopInfoConsentComponent({ bodyshop, updateBodyshopEnforceConsent }) {
function ShopInfoConsentComponent({ bodyshop }) {
const { t } = useTranslation();
const [updateEnforceConsent] = useMutation(UPDATE_BODYSHOP_ENFORCE_CONSENT, {
onError: (error) => {
message.error(t("settings.enforce_sms_consent_error"));
console.error("Error updating enforce_sms_consent:", error);
},
onCompleted: (data) => {
message.success(t("settings.enforce_sms_consent_success"));
updateBodyshopEnforceConsent(data.update_bodyshops_by_pk.enforce_sms_consent);
}
});
const enforceConsent = bodyshop?.enforce_sms_consent ?? false;
return (
<div>
<Typography.Title level={4}>{t("settings.title")}</Typography.Title>
<div style={{ marginBottom: 16 }}>
<Typography.Text>{t("settings.enforce_sms_consent")}</Typography.Text>
<Tooltip
title={enforceConsent ? t("settings.enforce_sms_consent_warning") : t("settings.enforce_sms_consent_enable")}
>
<Switch
checked={enforceConsent}
onChange={(checked) => {
if (!checked && enforceConsent) return; // Prevent disabling
updateEnforceConsent({
variables: { id: bodyshop.id, enforce_sms_consent: checked },
optimisticResponse: {
update_bodyshops_by_pk: {
__typename: "bodyshops",
id: bodyshop.id,
enforce_sms_consent: checked
}
}
});
}}
disabled={enforceConsent}
/>
</Tooltip>
</div>
{enforceConsent && <PhoneNumberConsentList bodyshop={bodyshop} />}
{<PhoneNumberConsentList bodyshop={bodyshop} />}
</div>
);
}