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

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

@@ -0,0 +1,51 @@
+import { useMutation } from "@apollo/client";
+import { Switch, 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 { 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 = () => ({});
+
+function ShopInfoConsentComponent({ bodyshop }) {
+  const { t } = useTranslation();
+
+  const [updateEnforceConsent] = useMutation(UPDATE_BODYSHOP_ENFORCE_CONSENT);
+
+  console.dir(bodyshop);
+
+  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>
+        <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
+                }
+              }
+            })
+          }
+        />
+      </div>
+      <PhoneNumberConsentList bodyshop={bodyshop} />
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoConsentComponent);