JS to gate content by member

member.js

const markButton = document.querySelector("#mark");
const unMarkButton = document.querySelector("#unmark");
let complete;

let button = document.querySelector(
  "body > section.hero-heading-center.wf-section > div > div > div:nth-child(1) > a"
);

window.onload = (event) => {
  markButton.addEventListener("click", markComplete);
  unMarkButton.addEventListener("click", unMarkComplete);
  getUser();
};

function markComplete() {
  complete = true;
  markButton.style.display = "none";
  unMarkButton.style.display = "block";
  updateUser();
}

function unMarkComplete() {
  complete = false;
  markButton.style.display = "block";
  unMarkButton.style.display = "none";
  updateUser();
}

function getUser() {
  const value = document.cookie;
  const parts = value.split(`; wf-csrf=`);
  constnewtoken = parts.shift();
  console.log(parts[0]);
  fetch(
    "https://new-membership-site-f12667.webflow.io/.wf_graphql/usys/apollo",
    {
      method: "POST",
      headers: {
        "content-type": "application/json",
        authority: "new-membership-site-f12667.webflow.io",
        path: "/.wf_graphql/usys/apollo",
        "x-wf-csrf": parts[0],
        scheme: "https",
        referrer: "https://new-membership-site-f12667.webflow.io/user-account",
        accept: "*/*, application/json",
        "accept-encoding": "gzip, deflate, br",
        "content-length": 9999999,
        origin: "https://new-membership-site-f12667.webflow.io",
        "sec-ch-ua": `"Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"`,
      },
      body: JSON.stringify({
        query: `
        query FetchUser {
            site {
              siteUser {
                createdOn
                data {
                    name: plainText(id: "name")
                    email: email(id: "email")
                    acceptCommunications: bool(id: "accept-communications")
                    f_dfd6280a16292a3ed775a96c43570a9b: plainText(id: "dfd6280a16292a3ed775a96c43570a9b")
                    f_485d8ff68fe3112fb84d08299abfed7e: plainText(id: "485d8ff68fe3112fb84d08299abfed7e")
                    f_a939419e53b35ae6f387a8a5cbb51e6b: bool(id: "a939419e53b35ae6f387a8a5cbb51e6b")
                    f_2d72a5ed9e0060436c766aff3fa85547: email(id: "2d72a5ed9e0060436c766aff3fa85547")
                    f_8b888b22053cc3a76947cd03cbdc44db: link(id: "8b888b22053cc3a76947cd03cbdc44db")
                    __typename
                }
                __typename
              }
              __typename
            }
          }
      `,
        operationName: "FetchUser",
        variables: {},
      }),
    }
  )
    .then((res) => res.json())
    .then((result) => {
      console.log(result);
      complete =
        result.data.site.siteUser.data.f_a939419e53b35ae6f387a8a5cbb51e6b;
      let terms =
        result.data.site.siteUser.data.f_a939419e53b35ae6f387a8a5cbb51e6b;
      console.log(
        result.data.site.siteUser.data.f_a939419e53b35ae6f387a8a5cbb51e6b
      );
      if (terms == true) {
        button.style.display = "block";
      } else {
        button.style.display = "none";
      }

      if (complete == true) {
        unMarkButton.style.display = "block";
        markButton.style.display = "none";
      } else {
        unMarkButton.style.display = "none";
        markButton.style.display = "block";
      }
    });
}

function updateUser() {
  const value = document.cookie;
  const parts = value.split(`; wf-csrf=`);
  constnewtoken = parts.shift();
  console.log(parts[0]);
  console.log(complete);
  fetch(
    "https://new-membership-site-f12667.webflow.io/.wf_graphql/usys/apollo",
    {
      method: "POST",
      headers: {
        "content-type": "application/json",
        authority: "new-membership-site-f12667.webflow.io",
        path: "/.wf_graphql/usys/apollo",
        cookie: document.cookie,
        "x-wf-csrf": parts[0],
        scheme: "https",
        referrer: "https://new-membership-site-f12667.webflow.io/user-account",
        accept: "*/*, application/json",
        "accept-encoding": "gzip, deflate, br",
        "content-length": 9999999,
        origin: "https://new-membership-site-f12667.webflow.io",
        "sec-ch-ua": `"Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"`,
      },
      body: JSON.stringify({
        operationName: "UpdateUsysUserData",
        variables: {
          data: {
            plainText: [
              { id: "name", value: "Bob Belcher" },
              { id: "dfd6280a16292a3ed775a96c43570a9b", value: "New Title" },
              { id: "485d8ff68fe3112fb84d08299abfed7e", value: "yes" },
            ],
            bool: [
              { id: "acceptCommunications", value: true },
              { id: "a939419e53b35ae6f387a8a5cbb51e6b", value: `${complete}` },
            ],
            email: [
              {
                id: "2d72a5ed9e0060436c766aff3fa85547",
                value: "[email protected]",
              },
            ],
            link: [
              {
                id: "8b888b22053cc3a76947cd03cbdc44db",
                value: "https://twitter.com/rileyrichter",
              },
            ],
          },
        },
        query: `mutation UpdateUsysUserData($data: usys_update_user_data!) {
        usysUpdateUserData(data: $data) {
          data {
            name: plainText(id: "name")
            acceptCommunications: bool(id: "accept-communications")
            f_dfd6280a16292a3ed775a96c43570a9b: plainText(id: "dfd6280a16292a3ed775a96c43570a9b")
            f_485d8ff68fe3112fb84d08299abfed7e: plainText(id: "485d8ff68fe3112fb84d08299abfed7e")
            f_a939419e53b35ae6f387a8a5cbb51e6b: bool(id: "a939419e53b35ae6f387a8a5cbb51e6b")
            f_2d72a5ed9e0060436c766aff3fa85547: email(id: "2d72a5ed9e0060436c766aff3fa85547")
            f_8b888b22053cc3a76947cd03cbdc44db: link(id: "8b888b22053cc3a76947cd03cbdc44db")
            __typename
          }
          __typename
        }
      }`,
      }),
    }
  )
    .then((res) => res.json())
    .then((result) => {
      console.log(result);
      if (complete == true) {
        unMarkButton.style.display = "block";
        markButton.style.display = "none";
      } else {
        unMarkButton.style.display = "none";
        markButton.style.display = "block";
      }
    });
}