itmar-block-packages 1.7.1 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itmar-block-packages",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "description": "We have put together a package of common React components used for WordPress custom blocks.",
   "main": "build/index.js",
   "scripts": {

package/src/formatCreate.js

@@ -0,0 +1,179 @@
+import { __ } from "@wordpress/i18n";
+import {
+  PanelBody,
+  PanelRow,
+  RangeControl,
+  TextControl,
+  SelectControl,
+} from "@wordpress/components";
+import { format, getSettings } from "@wordpress/date";
+
+//日付のフォーマット
+const dateFormats = [
+  { label: "YYYY-MM-DD HH:mm:ss", value: "Y-m-d H:i:s" },
+  { label: "MM/DD/YYYY", value: "m/d/Y" },
+  { label: "DD/MM/YYYY", value: "d/m/Y" },
+  { label: "MMMM D, YYYY", value: "F j, Y" },
+  { label: "HH:mm:ss", value: "H:i:s" },
+  { label: "YYYY.M.D", value: "Y.n.j" },
+  { label: "Day, MMMM D, YYYY", value: "l, F j, Y" },
+  { label: "ddd, MMM D, YYYY", value: "D, M j, Y" },
+  { label: "YYYY年M月D日 (曜日)", value: "Y年n月j日 (l)" },
+];
+//プレーンのフォーマット
+const plaineFormats = [
+  {
+    key: "str_free",
+    label: __("Free String", "block-collections"),
+    value: "%s",
+  },
+  {
+    key: "num_comma",
+    label: __("Numbers (comma separated)", "block-collections"),
+    value: {
+      style: "decimal",
+      useGrouping: true, // カンマ区切り
+    },
+  },
+  {
+    key: "num_no_comma",
+    label: __("Numbers (no commas)", "block-collections"),
+    value: {
+      style: "decimal",
+      useGrouping: false,
+    },
+  },
+  {
+    key: "num_amount",
+    label: __("Amount", "block-collections"),
+    value: {
+      style: "currency",
+      currency: "JPY",
+    },
+  },
+];
+
+export const FormatSelectControl = ({
+  titleType,
+  userFormat,
+  freeStrFormat,
+  decimal,
+  onFormatChange,
+}) => {
+  const isPlaine = titleType === "plaine";
+  const isDate = titleType === "date";
+  const isUser = titleType === "user";
+
+  //SelectControlのオプションを生成
+  const options = isDate
+    ? dateFormats
+    : plaineFormats.map((f) => ({ label: f.label, value: f.key }));
+
+  return (
+    <PanelBody title={__("Display Format Setting", "block-collections")}>
+      {(isPlaine || isDate) && (
+        <>
+          <SelectControl
+            label={__("Select Format", "block-collections")}
+            value={userFormat}
+            options={options}
+            onChange={(newFormat) =>
+              onFormatChange({
+                userFormat: newFormat,
+                freeStrFormat,
+                decimal,
+              })
+            }
+          />
+
+          {userFormat?.startsWith("str_") && (
+            <TextControl
+              label={__("String Format", "block-collections")}
+              value={freeStrFormat}
+              onChange={(newFormat) =>
+                onFormatChange({
+                  userFormat,
+                  freeStrFormat: newFormat,
+                  decimal,
+                })
+              }
+            />
+          )}
+          {userFormat?.startsWith("num_") && (
+            <PanelRow className="itmar_post_blocks_pannel">
+              <RangeControl
+                value={decimal}
+                label={__("Decimal Num", "query-blocks")}
+                max={5}
+                min={0}
+                onChange={(val) =>
+                  onFormatChange({
+                    userFormat,
+                    freeStrFormat,
+                    decimal: val,
+                  })
+                }
+              />
+            </PanelRow>
+          )}
+        </>
+      )}
+
+      {isUser && (
+        <TextControl
+          label={__("User Format", "block-collections")}
+          value={freeStrFormat}
+          onChange={(newFormat) =>
+            onFormatChange({
+              userFormat: "str_free",
+              freeStrFormat: newFormat,
+              decimal,
+            })
+          }
+        />
+      )}
+    </PanelBody>
+  );
+};
+
+export const displayFormated = (
+  content,
+  userFormat,
+  freeStrFormat,
+  decimal
+) => {
+  // 内部で使用するロケール
+  const locale = getSettings().l10n?.locale || "en";
+
+  //日付にフォーマットがあれば、それで書式設定してリターン
+  const isDateFormat = dateFormats.find((f) => f.value === userFormat);
+  if (isDateFormat) {
+    const ret_val = format(userFormat, content, getSettings());
+    return ret_val;
+  }
+  //数値や文字列のフォーマット
+  const selectedFormat = plaineFormats.find((f) => f.key === userFormat)?.value;
+  if (typeof selectedFormat === "object") {
+    // Intl.NumberFormat オプション
+    try {
+      const numeric = parseFloat(content);
+      // `selectedFormat` を元に新しいフォーマット設定を生成（mutateしない）
+      const options = { ...selectedFormat };
+
+      if (typeof decimal === "number" && decimal > 0) {
+        options.minimumFractionDigits = decimal;
+        options.maximumFractionDigits = decimal;
+      }
+
+      const formatter = new Intl.NumberFormat(locale, options);
+      return formatter.format(numeric);
+    } catch (e) {
+      console.warn("Number format failed:", e);
+      return content;
+    }
+  } else if (typeof selectedFormat === "string") {
+    return freeStrFormat.replace("%s", content);
+  }
+  //フォーマットが見つからないときはそのまま返す
+  return content;
+};

package/src/index.js

@@ -110,3 +110,13 @@ export { default as UpdateAllPostsBlockAttributes } from "./UpdateAllPostsBlockA
 
 //住所変換関連の関数
 export { fetchZipToAddress } from "./ZipAddress";
+
+//書式設定用のコンポーネント
+export { FormatSelectControl, displayFormated } from "./formatCreate";
+
+//ShopifyAPI関連のコンポーネント
+export {
+  checkCustomerLoginState,
+  redirectCustomerAuthorize,
+  sendRegistrationRequest,
+} from "./shopfiApi";

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();
+}