@designbasekorea/figma-ui 0.7.3 → 0.8.0

package/dist/index.esm.js

@@ -71,6 +71,10 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.unlock_pro_features': '프로 기능 활성화',
         'license.current_plan': '현재 플랜',
         'license.pro_plan': '프로 플랜',
+        'license.source_tabs_label': '라이선스 제공 방식',
+        'license.source_lemon_squeezy': 'Lemon Squeezy 라이선스',
+        'license.source_lemon_hint': '기존 Lemon Squeezy 구매 라이선스 키를 입력하세요.',
+        'license.source_youtube_hint': 'YouTube 멤버십 회원에게 제공되는 전용 키를 입력하세요.',
         'license.membership': '멤버십',
         'license.pro_account': '프로 계정',
         'license.upgrade_to_pro': '프로로 업그레이드',
@@ -109,7 +113,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.youtube_membership_join': '멤버십 가입',
         'license.youtube_membership_guide': '안내보기',
         'license.all_plugins': '모든 플러그인',
-        'license.source_youtube_membership': 'YouTube 멤버십',
+        'license.source_youtube_membership': 'YouTube 멤버십 전용',
         'license.source_purchase': '구매 라이선스',
         'license.status_active': '활성',
         'license.status_inactive': '라이선스 확인 실패',
@@ -225,6 +229,10 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.unlock_pro_features': 'Unlock Pro features',
         'license.current_plan': 'Current plan',
         'license.pro_plan': 'Pro plan',
+        'license.source_tabs_label': 'License type',
+        'license.source_lemon_squeezy': 'Lemon Squeezy license',
+        'license.source_lemon_hint': 'Enter the license key from your Lemon Squeezy purchase.',
+        'license.source_youtube_hint': 'Enter the key provided to YouTube channel members.',
         'license.membership': 'Membership',
         'license.pro_account': 'Pro account',
         'license.upgrade_to_pro': 'Upgrade to Pro',
@@ -263,7 +271,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.youtube_membership_join': 'Join membership',
         'license.youtube_membership_guide': 'View guide',
         'license.all_plugins': 'All plugins',
-        'license.source_youtube_membership': 'YouTube Membership',
+        'license.source_youtube_membership': 'YouTube membership only',
         'license.source_purchase': 'Purchased license',
         'license.status_active': 'Active',
         'license.status_inactive': 'License check failed',
@@ -379,6 +387,10 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.unlock_pro_features': 'Pro機能を有効化',
         'license.current_plan': '現在のプラン',
         'license.pro_plan': 'Proプラン',
+        'license.source_tabs_label': 'ライセンスの種類',
+        'license.source_lemon_squeezy': 'Lemon Squeezy ライセンス',
+        'license.source_lemon_hint': 'Lemon Squeezyで購入したライセンスキーを入力してください。',
+        'license.source_youtube_hint': 'YouTubeメンバー向けの専用キーを入力してください。',
         'license.membership': 'メンバーシップ',
         'license.pro_account': 'Proアカウント',
         'license.upgrade_to_pro': 'Proにアップグレード',
@@ -417,7 +429,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.youtube_membership_join': 'メンバーシップに参加',
         'license.youtube_membership_guide': 'ガイドを見る',
         'license.all_plugins': 'すべてのプラグイン',
-        'license.source_youtube_membership': 'YouTubeメンバーシップ',
+        'license.source_youtube_membership': 'YouTubeメンバーシップ専用',
         'license.source_purchase': '購入ライセンス',
         'license.status_active': '有効',
         'license.status_inactive': 'ライセンス確認に失敗しました',
@@ -2014,7 +2026,7 @@ function formatUsageLabel(state, t) {
     }
     return (resolveText(t, { key: 'license.usage_generic', values: { remaining, limit } }, `남은 횟수 ${remaining}/${limit}`) ?? `남은 횟수 ${remaining}/${limit}`);
 }
-const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicenseKey = '', licenseStatus: initialLicenseStatus, licenseSource: initialLicenseSource, accessScope: initialAccessScope, expiresAt: initialExpiresAt, lastVerifiedAt: initialLastVerifiedAt, wordpressLinks, paymentPageUrl, mode = 'pricing', membershipUrl, enableAccountAuth = true, showLicenseKeyInput = true, pricingFeatures, pricing, paymentType = 'subscription', messageTypes, onStateChange, setPaymentStatus, setUsageCount, onLicenseSubmit, usageCount: initialUsageCount = 0, t, locale, className, }) => {
+const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicenseKey = '', licenseStatus: initialLicenseStatus, licenseSource: initialLicenseSource, accessScope: initialAccessScope, expiresAt: initialExpiresAt, lastVerifiedAt: initialLastVerifiedAt, wordpressLinks, paymentPageUrl, mode = 'pricing', showYoutubeMembershipTab = false, membershipUrl, enableAccountAuth = true, showLicenseKeyInput = true, pricingFeatures, pricing, paymentType = 'subscription', messageTypes, onStateChange, setPaymentStatus, setUsageCount, onLicenseSubmit, usageCount: initialUsageCount = 0, t, locale, className, }) => {
     const { t: translate } = useFigmaUiI18n(locale, t);
     const links = useMemo(() => ({
         purchaseUrl: wordpressLinks?.purchaseUrl ?? paymentPageUrl,
@@ -2043,8 +2055,9 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
         onUsageCountChange: setUsageCount,
     });
     const [licenseKeyDraft, setLicenseKeyDraft] = useState(initialLicenseKey);
+    const [activeLicenseMode, setActiveLicenseMode] = useState(mode);
     const isPaid = state.isLicenseRegistered && state.paymentStatus === 'PAID';
-    const isMembershipMode = mode === 'youtube-membership';
+    const isMembershipMode = activeLicenseMode === 'youtube-membership';
     const usageLabel = formatUsageLabel(state, translate);
     const handleLicenseSubmit = async (submittedLicenseKey) => {
         if (onLicenseSubmit) {
@@ -2057,8 +2070,14 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
         setLicenseKeyDraft(value);
         setLicenseKeyInput(value);
     };
-    return (React.createElement("div", { className: `designbase-figma-page-license designbase-figma-page-license--${mode} ${className || ''}`, "data-license-mode": mode },
+    return (React.createElement("div", { className: `designbase-figma-page-license designbase-figma-page-license--${activeLicenseMode} ${className || ''}`, "data-license-mode": activeLicenseMode },
         React.createElement("div", { className: "designbase-figma-page-license__content" },
+            showYoutubeMembershipTab && (React.createElement("div", { className: "designbase-figma-page-license__source-tabs", role: "tablist", "aria-label": resolveText(translate, { key: 'license.source_tabs_label' }, 'License type') },
+                React.createElement("button", { type: "button", role: "tab", "aria-selected": !isMembershipMode, onClick: () => setActiveLicenseMode('pricing') }, resolveText(translate, { key: 'license.source_lemon_squeezy' }, 'Lemon Squeezy license')),
+                React.createElement("button", { type: "button", role: "tab", "aria-selected": isMembershipMode, onClick: () => setActiveLicenseMode('youtube-membership') }, resolveText(translate, { key: 'license.source_youtube_membership' }, 'YouTube membership')))),
+            showYoutubeMembershipTab && (React.createElement("p", { className: "designbase-figma-page-license__source-hint" }, isMembershipMode
+                ? resolveText(translate, { key: 'license.source_youtube_hint' }, 'Enter the key provided to YouTube channel members.')
+                : resolveText(translate, { key: 'license.source_lemon_hint' }, 'Enter the license key from your Lemon Squeezy purchase.'))),
             React.createElement("div", { className: "designbase-figma-page-license__header" },
                 React.createElement("div", { className: "designbase-figma-page-license__title" },
                     React.createElement("h2", null, isPaid