yichong-canva2 1.1.27

package/README.md

@@ -0,0 +1,65 @@
+# yichong-canva-provider
+
+A React provider package for Canva integration, managing user authentication, subscription status, and profile information.
+
+## Features
+
+- User authentication management
+- Subscription status tracking
+- Profile information handling
+- Google Drive integration
+- Canva token management
+
+## Installation
+
+```bash
+npm install yichong-canva2
+```
+
+## Requirements
+
+This package requires the following peer dependencies:
+- React >= 18
+- React DOM >= 18
+- @canva/user >= 2.1.0
+
+## Usage
+
+```typescript
+import { YichongCanvaProvider } from 'yichong-canva2';
+
+function App() {
+  return (
+    <YichongCanvaProvider>
+      {/* Your app components */}
+    </YichongCanvaProvider>
+  );
+}
+```
+
+## TypeScript Support
+
+This package is written in TypeScript and includes type definitions. The main types include:
+
+- `UserStatus`: Interface for user authentication and profile data
+- `Subscription`: User subscription details
+
+## Scripts
+
+- `npm run dev`: Start development server
+- `npm run build`: Build the package
+- `npm run lint`: Run ESLint
+- `npm run preview`: Preview the build
+- `npm run publish`: Publish the package
+
+## Build Configuration
+
+The package uses Vite for building and includes:
+- TypeScript support
+- React plugin
+- DTS plugin for type definitions
+- Terser for minification
+
+## License
+
+This project is proprietary and confidential.

package/dist/index.js

@@ -0,0 +1,8 @@
+import { YiChongCanvaProvider } from "./login/privider.js";
+import { YiChongCanvaContext } from "./login/context.js";
+import { useYiChongCanva } from "./login/use_canva.js";
+export {
+  YiChongCanvaContext,
+  YiChongCanvaProvider,
+  useYiChongCanva
+};

package/dist/login/context.js

@@ -0,0 +1,36 @@
+import React from "react";
+const YiChongCanvaContext = React.createContext(
+  {
+    userStatus: {},
+    updateUserStatus: () => {
+    },
+    handleLogin: () => {
+    },
+    credits: 0,
+    getLimitUsage: () => null,
+    getMonthlyUsageLimit: () => null,
+    isSubscribed: false,
+    use: () => {
+    },
+    canUse: () => false,
+    canUseLimit: () => ({ canUse: false }),
+    isFreeUnlimited: () => false,
+    pollUserStatus: () => void 0,
+    getPricingLink: () => "",
+    updateTestMode: () => {
+    },
+    refreshUserStatus: () => Promise.resolve({}),
+    hasClickedUpgrade: false,
+    setHasClickedUpgrade: () => {
+    },
+    stopCurrentPolling: () => false,
+    updateCredits: () => {
+    },
+    loginStatus: "idle",
+    manualLogin: () => {
+    }
+  }
+);
+export {
+  YiChongCanvaContext
+};

package/dist/login/login/apis/index.js

@@ -0,0 +1,78 @@
+import requestUrl from "./request.js";
+const headers = {
+  "Content-Type": "application/json"
+};
+const baseUrl = "https://usa.imgkits.com/";
+function getUserIds(token, appId) {
+  const queryString = new URLSearchParams({
+    canva_user_token: token,
+    appid: appId
+  }).toString();
+  const url = `https://canva.livepolls.app/getUserIdByAppid?${queryString}`;
+  return requestUrl({
+    url,
+    method: "GET",
+    headers,
+    redirect: "follow"
+  });
+}
+function handleUserLoginByCanvaId(userId, productName) {
+  const url = baseUrl + productName + "/api/user/canvaid-login";
+  return requestUrl({
+    url,
+    method: "POST",
+    headers,
+    body: JSON.stringify({
+      canva_id: userId
+    }),
+    redirect: "follow"
+  });
+}
+function getPassport(userId, productName) {
+  const passport = localStorage.getItem(userId + "_passport");
+  if (passport) {
+    return Promise.resolve({
+      data: {
+        passport
+      }
+    });
+  }
+  let url = baseUrl + productName + "/api/user/canva-passport";
+  if (productName === "imgkits") {
+    url = baseUrl + "/api/user/canva-passport";
+  }
+  return requestUrl({
+    url,
+    method: "POST",
+    headers,
+    body: JSON.stringify({
+      canva_id: userId
+    }),
+    redirect: "follow"
+  }).then((res) => {
+    localStorage.setItem(userId + "_passport", res.data.passport);
+    return res;
+  });
+}
+function getUserStatusByPassport(passport, productName) {
+  const header = {
+    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+    "X-Access-Ticket": passport
+  };
+  const url = baseUrl + productName + "/api/user/status";
+  return requestUrl({
+    url,
+    method: "POST",
+    headers: header,
+    redirect: "follow"
+  });
+}
+const apis = {
+  getUserIds,
+  handleUserLoginByCanvaId,
+  getPassport,
+  getUserStatusByPassport
+};
+export {
+  apis as default
+};

package/dist/login/login/apis/request.js

@@ -0,0 +1,6 @@
+const requestUrl = (option) => {
+  return fetch(option.url, option).then((res) => res.json());
+};
+export {
+  requestUrl as default
+};

package/dist/login/login/login.js

@@ -0,0 +1,190 @@
+import { auth } from "@canva/user";
+import apis from "./apis/index.js";
+auth.initOauth();
+async function handleLogin({
+  appId,
+  productName
+}) {
+  try {
+    let userId = window.userId;
+    console.log("userId", userId);
+    if (!userId) {
+      const token = await auth.getCanvaUserToken();
+      window.g_canva_token = token;
+      const userIdResult = await apis.getUserIds(token, appId);
+      userId = userIdResult.verified.userId;
+      window.userId = userId;
+      await apis.handleUserLoginByCanvaId(userId, productName);
+    }
+    const userStatus = await getUserProfile({
+      userId,
+      productName
+    });
+    window.g_token = userStatus.jwt || "";
+    userStatus.userId = userId;
+    return userStatus;
+  } catch (e) {
+    throw new Error("login failed");
+  }
+}
+function takeSubscribeBaseline(userStatus) {
+  const sub = userStatus == null ? void 0 : userStatus.subscription;
+  return {
+    free_cnt: typeof (sub == null ? void 0 : sub.free_cnt) === "number" ? sub.free_cnt : null,
+    detailJson: (sub == null ? void 0 : sub.detail) == null ? null : JSON.stringify(sub.detail),
+    available: computeAvailableLimit(userStatus)
+  };
+}
+function computeAvailableLimit(userStatus) {
+  var _a, _b;
+  const sub = userStatus == null ? void 0 : userStatus.subscription;
+  const freeCnt = typeof (sub == null ? void 0 : sub.free_cnt) === "number" ? Math.max(sub.free_cnt, 0) : 0;
+  const detail = sub == null ? void 0 : sub.detail;
+  const isActive = !!detail && (!detail.ends_at || new Date(detail.ends_at).getTime() > Date.now());
+  if (!isActive) {
+    return freeCnt;
+  }
+  const limit = ((_b = (_a = userStatus.profile) == null ? void 0 : _a.usage_limits) == null ? void 0 : _b.monthly_usage_limit) ?? 0;
+  if (limit <= -1) {
+    return null;
+  }
+  const used = (sub == null ? void 0 : sub.monthly_usage_cnt) ?? 0;
+  return Math.max(limit - used, 0) + freeCnt;
+}
+function isSubscribeChanged(current, baseline) {
+  const sub = current.subscription;
+  const detailJson = (sub == null ? void 0 : sub.detail) == null ? null : JSON.stringify(sub.detail);
+  if (detailJson !== baseline.detailJson) {
+    return true;
+  }
+  const freeCnt = typeof (sub == null ? void 0 : sub.free_cnt) === "number" ? sub.free_cnt : null;
+  if (freeCnt != null && (baseline.free_cnt == null ? freeCnt > 0 : freeCnt > baseline.free_cnt)) {
+    return true;
+  }
+  const available = computeAvailableLimit(current);
+  if (available != null && baseline.available != null && available > baseline.available) {
+    return true;
+  }
+  return false;
+}
+/**
+ * 轮询获取用户资料/订阅状态
+ * 
+ * @param {Object} options - 参数对象
+ * @param {number} [options.maxCount=50] - 最大轮询次数
+ * @param {number|function} [options.interval] - 每次轮询等待的间隔(ms)，可以是函数
+ * @param {number} [options.maxDurationMs] - 最大轮询持续时间(ms)
+ * @param {string} options.productName - 产品名称
+ * @param {string} options.userId - 用户ID
+ * @param {function} [options.successCallback] - 轮询成功(获取到所需状态)时的回调
+ * @param {function} [options.failCallback] - 轮询失败时的回调
+ * @param {boolean} [options.isSubscribe=false] - 是否为订阅状态检测
+ * @param {*} [options.baseline] - 比较基准，用于判断订阅状态是否变化
+ * @param {function} [options.isChanged] - 判断状态变化的函数
+ * @param {function} [options.onStop] - 停止轮询回调(暴露终止方法)
+ * @returns {Promise<object>} 用户状态对象
+ */
+async function getUserProfile({
+  maxCount = 50,
+  interval,
+  maxDurationMs,
+  productName,
+  userId,
+  successCallback,
+  failCallback,
+  isSubscribe = false,
+  baseline,
+  isChanged,
+  onStop
+}) {
+  var _a, _b;
+  let count = 0; // 已轮询次数
+  const startedAt = Date.now(); // 记录开始时间
+  // 获取passport凭证
+  let passportResult = await apis.getPassport(userId, productName);
+  let passport = (_a = passportResult.data) == null ? void 0 : _a.passport;
+  let isStop = false; // 外部停止标识
+  let cancelSleep = null; // 终止sleep回调
+  let snapshot = baseline ?? null; // 订阅基线快照
+  // 收到onStop通知时，终止轮询
+  onStop == null ? void 0 : onStop(() => {
+    isStop = true;
+    count = maxCount; // 直接达到退出条件
+    cancelSleep == null ? void 0 : cancelSleep(); // 若在sleep中则提前唤醒
+  });
+  // 判断是否到达最大轮询次数或超时
+  const expired = () => count >= maxCount || maxDurationMs != null && Date.now() - startedAt >= maxDurationMs;
+  while (!expired()) {
+    console.log("poll", count);
+    let userStatus;
+    try {
+      // 查询passport对应的用户状态
+      userStatus = await (await apis.getUserStatusByPassport(passport, productName)).data;
+    } catch (e) {
+      userStatus = void 0;
+    }
+    if (userStatus == null ? void 0 : userStatus.profile) {
+      // 普通获取，无需订阅状态变化判断
+      if (!isSubscribe) {
+        successCallback == null ? void 0 : successCallback(userStatus);
+        return userStatus;
+      }
+      // 订阅状态获取
+      if (!snapshot) {
+        snapshot = takeSubscribeBaseline(userStatus); // 初始化基线
+      } else {
+        // 用isChanged或缺省方法进行状态对比
+        const changed = isChanged ? isChanged(userStatus, snapshot) : isSubscribeChanged(userStatus, snapshot);
+        if (changed) {
+          console.log("subscribe success");
+          successCallback == null ? void 0 : successCallback(userStatus);
+          return userStatus;
+        }
+      }
+    } else if (userStatus) {
+      // (有返回但无profile) passport失效，移除缓存重新获取
+      localStorage.removeItem(userId + "_passport");
+      try {
+        passportResult = await apis.getPassport(userId, productName);
+        passport = (_b = passportResult.data) == null ? void 0 : _b.passport;
+      } catch (e) {
+        // 无需处理，继续重试
+      }
+    }
+    count++;
+    if (isStop || expired()) {
+      break;
+    }
+    // 计算下一次轮询的间隔
+    let ms = typeof interval === "function" ? interval() : interval ?? 3e3;
+    // 距离最大允许持续时间的剩余时间也必须纳入约束
+    if (maxDurationMs != null) {
+      ms = Math.min(ms, Math.max(maxDurationMs - (Date.now() - startedAt), 0));
+    }
+    await sleep(ms, (cancel) => {
+      cancelSleep = cancel;
+    });
+    cancelSleep = null;
+  }
+  if (isStop) {
+    return; // 被外部主动终止，直接返回
+  }
+  failCallback == null ? void 0 : failCallback();
+  throw new Error("get user profile error");
+}
+function sleep(ms = 3e3, onCancel) {
+  return new Promise((resolve) => {
+    const id = setTimeout(resolve, ms);
+    onCancel == null ? void 0 : onCancel(() => {
+      clearTimeout(id);
+      resolve();
+    });
+  });
+}
+export {
+  computeAvailableLimit,
+  getUserProfile,
+  handleLogin,
+  isSubscribeChanged,
+  takeSubscribeBaseline
+};