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

client/src/components/shop-info/shop-info.consent.component.jsx

@@ -1,9 +1,10 @@
 import { useMutation } from "@apollo/client";
-import { Switch, Typography } from "antd";
+import { Switch, Typography, Tooltip, message } 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";
 
@@ -11,14 +12,23 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = () => ({});
+const mapDispatchToProps = (dispatch) => ({
+  updateBodyshopEnforceConsent: (enforce_sms_consent) => dispatch(updateBodyshopEnforceConsent(enforce_sms_consent))
+});
 
-function ShopInfoConsentComponent({ bodyshop }) {
+function ShopInfoConsentComponent({ bodyshop, updateBodyshopEnforceConsent }) {
   const { t } = useTranslation();
 
-  const [updateEnforceConsent] = useMutation(UPDATE_BODYSHOP_ENFORCE_CONSENT);
-
-  console.dir(bodyshop);
+  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;
 
@@ -27,23 +37,29 @@ function ShopInfoConsentComponent({ bodyshop }) {
       <Typography.Title level={4}>{t("settings.title")}</Typography.Title>
       <div style={{ marginBottom: 16 }}>
         <Typography.Text>{t("settings.enforce_sms_consent")}</Typography.Text>
-        <Switch
-          checked={enforceConsent}
-          onChange={(checked) =>
-            updateEnforceConsent({
-              variables: { id: bodyshop.id, enforce_sms_consent: checked },
-              optimisticResponse: {
-                update_bodyshops_by_pk: {
-                  __typename: "bodyshops",
-                  id: bodyshop.id,
-                  enforce_sms_consent: checked
+        <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>
-      <PhoneNumberConsentList bodyshop={bodyshop} />
+      {enforceConsent && <PhoneNumberConsentList bodyshop={bodyshop} />}
     </div>
   );
 }