itmar-block-packages 1.8.0 → 1.10.0

package/src/shopfiApi.js

@@ -0,0 +1,187 @@
+function generateState() {
+  const timestamp = Date.now().toString();
+  const randomString = Math.random().toString(36).substring(2);
+  return timestamp + randomString;
+}
+
+function generateNonce(length = 32) {
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let nonce = "";
+  for (let i = 0; i < length; i++) {
+    nonce += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return nonce;
+}
+
+function generateCodeVerifier(length = 128) {
+  const charset =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += charset.charAt(Math.floor(Math.random() * charset.length));
+  }
+  return result;
+}
+
+async function generateCodeChallenge(codeVerifier) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(codeVerifier);
+  const digest = await crypto.subtle.digest("SHA-256", data);
+  return btoa(String.fromCharCode(...new Uint8Array(digest)))
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
+// ✅ Shopifyへの認証リダイレクト
+export async function redirectCustomerAuthorize(
+  shopId,
+  clientId,
+  userMail,
+  callbackUri,
+  redirectUri
+) {
+  //呼び出し元の戻り先
+  const statePayload = {
+    ts: Date.now(),
+    random: Math.random().toString(36).substring(2),
+    return_url: redirectUri,
+  };
+  //stateで渡しておく
+  const state = btoa(JSON.stringify(statePayload));
+  const nonce = generateNonce();
+  const codeVerifier = generateCodeVerifier();
+  const codeChallenge = await generateCodeChallenge(codeVerifier);
+
+  localStorage.setItem("shopify_code_verifier", codeVerifier);
+  localStorage.setItem("shopify_state", state);
+  localStorage.setItem("shopify_nonce", nonce);
+  localStorage.setItem("shopify_client_id", clientId);
+  localStorage.setItem("shopify_user_mail", userMail);
+  localStorage.setItem("shopify_shop_id", shopId);
+  localStorage.setItem("shopify_redirect_uri", callbackUri); //ログアウトの処理で使用する
+
+  const url = new URL(
+    `https://shopify.com/authentication/${shopId}/oauth/authorize`
+  );
+  url.searchParams.append("scope", "openid email customer-account-api:full");
+  url.searchParams.append("client_id", clientId);
+  url.searchParams.append("response_type", "code");
+  url.searchParams.append("redirect_uri", callbackUri);
+  url.searchParams.append("state", state);
+  url.searchParams.append("nonce", nonce);
+  url.searchParams.append("code_challenge", codeChallenge);
+  url.searchParams.append("code_challenge_method", "S256");
+
+  window.location.href = url.toString();
+}
+
+// ✅ トークンがあれば検証（Storefront API 経由で customer を取得）
+export async function checkCustomerLoginState() {
+  const token = localStorage.getItem("shopify_customer_token");
+
+  if (!token) return false;
+
+  const checkUrl = "/wp-json/itmar-ec-relate/v1/shopify-login-check";
+  const postData = {
+    nonce: itmar_option.nonce,
+    token: JSON.stringify({ token }),
+  };
+  sendRegistrationAjax(checkUrl, postData, true)
+    .done(function (res) {
+      console.log(res);
+    })
+    .fail(function (xhr, status, error) {
+      alert("サーバーエラー: " + error);
+      console.error(xhr.responseText);
+    });
+}
+
+/**
+ * @param {string} urlOrPath - RESTは '/itmar-shopify/v1/...' でも '/wp-json/...' でもOK。admin-ajaxは '/wp-admin/admin-ajax.php'
+ * @param {object} data - 送信するデータ。nonce は data._wpnonce か data.nonce に入れておけばOK
+ * @param {'auto'|'rest'|'ajax'} mode - 既定は 'auto'
+ */
+export async function sendRegistrationRequest(
+  urlOrPath,
+  data = {},
+  mode = "auto"
+) {
+  const isRestUrlLike = (u) =>
+    u.startsWith("/wp-json") || !u.startsWith("/wp-admin");
+
+  // 送信先の確定（RESTのときは /wp-json 省略パスでもOKにする）
+  let isRest;
+  if (mode === "auto") {
+    isRest = isRestUrlLike(urlOrPath);
+  } else {
+    isRest = mode === "rest";
+  }
+
+  let url = urlOrPath;
+
+  if (isRest) {
+    // '/itmar-shopify/v1/...' のようなパスだけ渡されたら /wp-json を補う
+    if (!url.startsWith("/wp-json")) {
+      const root =
+        (window.wpApiSettings && window.wpApiSettings.root) || "/wp-json/";
+      url = root.replace(/\/+$/, "/") + url.replace(/^\/+/, "");
+    }
+  } else {
+    // admin-ajax の既定URL
+    if (!url) url = "/wp-admin/admin-ajax.php";
+  }
+
+  const fetchOptions = {
+    method: "POST",
+    credentials: "same-origin", // 同一オリジン Cookie
+    headers: {},
+  };
+
+  // ノンス抽出（_wpnonce を優先）
+  const nonce =
+    data._wpnonce ||
+    data.nonce ||
+    (window.wpApiSettings && window.wpApiSettings.nonce);
+
+  if (isRest) {
+    fetchOptions.headers["Content-Type"] = "application/json";
+    if (nonce) fetchOptions.headers["X-WP-Nonce"] = nonce;
+
+    // nonce系は本文から除く（任意）
+    const { _wpnonce, nonce: _legacyNonce, ...rest } = data;
+    fetchOptions.body = JSON.stringify(rest);
+  } else {
+    // admin-ajax は URLSearchParams で送る
+    const form = new URLSearchParams();
+    Object.entries(data).forEach(([k, v]) => {
+      if (v !== undefined && v !== null) form.append(k, String(v));
+    });
+    // ノンスは _wpnonce に統一
+    if (nonce && !form.has("_wpnonce")) form.append("_wpnonce", nonce);
+    fetchOptions.body = form;
+  }
+
+  const res = await fetch(url, fetchOptions);
+
+  // WP REST はメソッド不一致・ルートなし等でも JSON 返さないことがあるので分岐
+  const contentType = res.headers.get("content-type") || "";
+  const tryJson = contentType.includes("application/json");
+
+  if (!res.ok) {
+    let msg = `HTTP ${res.status}`;
+    if (tryJson) {
+      try {
+        const j = await res.json();
+        msg += j.message ? `: ${j.message}` : "";
+      } catch {}
+    } else {
+      const t = await res.text();
+      if (t) msg += `: ${t.slice(0, 200)}`;
+    }
+    throw new Error(msg);
+  }
+
+  return tryJson ? res.json() : res.text();
+}

package/src/wordpressApi.js

@@ -68,8 +68,9 @@ const ChoiceControl = (props) => {
     const fetchData = async () => {
       try {
         const fetchChoices = await fetchFunction(selectedSlug);
-
         setChoices(fetchChoices);
+        //指定の投稿タイプに含まれないフィールドを削除する
+        pruneChoiceItemsByObjectKeys(fetchChoices[0], choiceItems);
       } catch (error) {
         console.error("Error fetching data:", error.message);
       }
@@ -90,22 +91,78 @@ const ChoiceControl = (props) => {
     }
     return setItems;
   };
+  /**
+   * dataObj のキー一覧を「choiceItems と比較する形」に変換して Set で返す
+   * - 通常キー: そのまま
+   * - acf / meta: 子キーに `${parent}_` を付けたもの（例: acf_relate_url, meta_footnotes）
+   */
+  function buildComparableKeySet(dataObj) {
+    const keySet = new Set();
+
+    if (!dataObj || typeof dataObj !== "object") return keySet;
+
+    for (const [key, val] of Object.entries(dataObj)) {
+      if (
+        (key === "acf" || key === "meta") &&
+        val &&
+        typeof val === "object" &&
+        !Array.isArray(val)
+      ) {
+        for (const childKey of Object.keys(val)) {
+          keySet.add(`${key}_${childKey}`);
+        }
+        continue;
+      }
+
+      keySet.add(key);
+    }
+
+    return keySet;
+  }
+
+  /**
+   * choiceItems を dataObj のキーに合わせて削除する
+   * - choiceItems が string 配列でも、{value: "..."} の配列でも動くようにしてあります
+   */
+  function pruneChoiceItemsByObjectKeys(dataObj, choiceItems) {
+    const validKeys = buildComparableKeySet(dataObj);
+
+    const getItemKey = (item) => {
+      if (typeof item === "string") return item;
+      if (item && typeof item === "object")
+        return item.value ?? item.key ?? item.name ?? "";
+      return "";
+    };
+
+    const next = (choiceItems ?? []).filter((item) =>
+      validKeys.has(getItemKey(item))
+    );
+
+    // ★ 配列の参照はそのまま、中身だけ置き換える
+    choiceItems.splice(0, choiceItems.length, ...next);
+
+    return choiceItems; // 必要なら返す
+  }
 
   //階層化されたカスタムフィールドのフィールド名を表示する関数
   let groupLabel = "";
-  const dispCustumFields = (obj, prefix = "", onChange) => {
+  const dispCustumFields = (obj, prefix = "", isImage = false, onChange) => {
     return Object.entries(obj).map(([key, value]) => {
       const fieldName = prefix ? `${prefix}.${key}` : key; //prefixはグループ名
 
       const fieldLabel = key.replace(/^(meta_|acf_)/, "");
-
-      if (typeof value === "object" && value !== null) {
+      //オブジェクトであって配列でないものがグループと考える
+      if (
+        typeof value === "object" &&
+        !Array.isArray(value) &&
+        value !== null
+      ) {
         groupLabel = `${fieldLabel}.`;
         return (
           <div className="group_area">
             <div className="group_label">{fieldLabel}</div>
             <div key={fieldName} className="field_group">
-              {dispCustumFields(value, fieldName, onChange)}
+              {dispCustumFields(value, fieldName, isImage, onChange)}
             </div>
           </div>
         );
@@ -117,6 +174,7 @@ const ChoiceControl = (props) => {
           { value: "itmar/design-title", label: "itmar/design-title" },
           { value: "core/paragraph", label: "core/paragraph" },
           { value: "core/image", label: "core/image" },
+          { value: "itmar/slide-mv", label: "itmar/slide-mv" },
         ];
         return (
           <div className="itmar_custom_field_set">
@@ -136,20 +194,23 @@ const ChoiceControl = (props) => {
                 props.onChange(newChoiceFields);
               }}
             />
-            <ComboboxControl
-              options={options}
-              value={
-                blockMap[`${prefix ? groupLabel : ""}${fieldLabel}`] ||
-                "itmar/design-title"
-              }
-              onChange={(newValue) => {
-                const fieldKey = prefix
-                  ? `${groupLabel}${fieldLabel}`
-                  : `${fieldLabel}`;
-                const newBlockMap = { ...blockMap, [fieldKey]: newValue };
-                props.onBlockMapChange(newBlockMap);
-              }}
-            />
+            {!isImage && (
+              <ComboboxControl
+                options={options}
+                value={
+                  //blockMap[`${prefix ? groupLabel : ""}${key}`] || "itmar/design-title"
+                  blockMap[`${prefix ? prefix + "." : ""}${key}`] ||
+                  "itmar/design-title"
+                }
+                onChange={(newValue) => {
+                  //const fieldKey = prefix ? `${groupLabel}${key}` : `${key}`;
+                  const fieldKey = prefix ? `${prefix}.${key}` : `${key}`;
+
+                  const newBlockMap = { ...blockMap, [fieldKey]: newValue };
+                  props.onBlockMapChange(newBlockMap);
+                }}
+              />
+            )}
           </div>
         );
       }
@@ -240,6 +301,23 @@ const ChoiceControl = (props) => {
                   }}
                 />
               )}
+              {choice.content && (
+                <ToggleControl
+                  className="field_choice"
+                  label={__("Content", "block-collections")}
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "content"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(
+                      checked,
+                      "content",
+                      choiceItems
+                    );
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
               {choice.date && (
                 <ToggleControl
                   className="field_choice"
@@ -343,6 +421,7 @@ const ChoiceControl = (props) => {
                   </div>
                   <div className="custom_field_area">
                     {dispCustumFields({
+                      // meta はそのまま
                       ...Object.entries(choice.meta).reduce(
                         (acc, [key, value]) => ({
                           ...acc,
@@ -350,13 +429,16 @@ const ChoiceControl = (props) => {
                         }),
                         {}
                       ),
-                      ...Object.entries(choice.acf).reduce(
-                        (acc, [key, value]) => ({
-                          ...acc,
-                          [`acf_${key}`]: value,
-                        }),
-                        {}
-                      ),
+                      // acf は「同名で _source があるもののベース側を除く」
+                      ...Object.entries(choice.acf)
+                        .filter(([key]) => !key.endsWith("_source"))
+                        .reduce(
+                          (acc, [key, value]) => ({
+                            ...acc,
+                            [`acf_${key}`]: value,
+                          }),
+                          {}
+                        ),
                     })}
                   </div>
                 </>
@@ -364,6 +446,93 @@ const ChoiceControl = (props) => {
             </div>
           );
         })}
+      {type === "imgField" &&
+        choices.map((choice, index) => {
+          //metaの対象カスタムフィールドが含まれるかのフラグ
+          const metaFlg =
+            choice.meta &&
+            !Object.keys(choice.meta).every(
+              (key) => key === "_acf_changed" || key === "footnotes"
+            );
+          //acfの対象カスタムフィールドが含まれるかのフラグ
+          const acfFlg =
+            choice.acf &&
+            typeof choice.acf === "object" &&
+            !Array.isArray(choice.acf);
+
+          return (
+            <div key={index} className="field_section">
+              {choice.content && (
+                <ToggleControl
+                  className="field_choice"
+                  label={__("Content", "block-collections")}
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "content"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(
+                      checked,
+                      "content",
+                      choiceItems
+                    );
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
+              {(choice.featured_media || choice.featured_media === 0) && (
+                <ToggleControl
+                  className="field_choice"
+                  label={__("Featured Image", "block-collections")}
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "featured_media"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(
+                      checked,
+                      "featured_media",
+                      choiceItems
+                    );
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
+
+              {(metaFlg || acfFlg) && (
+                <>
+                  <div className="custom_field_label">
+                    {__("Custom Field", "block-collections")}
+                  </div>
+                  <div className="custom_field_area">
+                    {dispCustumFields(
+                      {
+                        // meta はそのまま
+                        ...Object.entries(choice.meta).reduce(
+                          (acc, [key, value]) => ({
+                            ...acc,
+                            [`meta_${key}`]: value,
+                          }),
+                          {}
+                        ),
+                        // acf は「同名で _source があるもののベース側を除く」
+                        ...Object.entries(choice.acf)
+                          .filter(([key]) => !key.endsWith("_source"))
+                          .reduce(
+                            (acc, [key, value]) => ({
+                              ...acc,
+                              [`acf_${key}`]: value,
+                            }),
+                            {}
+                          ),
+                      },
+                      "",
+                      true
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
     </div>
   );
 };
@@ -483,6 +652,7 @@ export const restFieldes = async (rest_base) => {
   //投稿データに以下のフィールドが含まれているかを調べる
   const selectedFields = [
     "title",
+    "content",
     "date",
     "excerpt",
     "featured_media",
@@ -495,6 +665,7 @@ export const restFieldes = async (rest_base) => {
   const response = await apiFetch({
     path: `/wp/v2/${rest_base}?_fields=${fieldsParam}&per_page=1&order=desc`,
   });
+
   return response;
 };