@designbasekorea/figma-ui 0.7.3 → 0.8.1

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': '프로로 업그레이드',
@@ -94,6 +98,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.authenticating': '인증 중...',
         'license.login_with_designbase': '디자인베이스로 로그인',
         'license.purchase_membership': '멤버십 안내',
+        'license.purchase_license': '라이선스 구매하기',
         'license.manage_account': '계정·멤버십 관리',
         'license.enter_key': '라이선스 키 입력',
         'license.key': '라이선스 키',
@@ -109,7 +114,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 +230,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',
@@ -248,6 +257,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.authenticating': 'Authenticating...',
         'license.login_with_designbase': 'Sign in with Designbase',
         'license.purchase_membership': 'Membership details',
+        'license.purchase_license': 'Buy a license',
         'license.manage_account': 'Manage account · membership',
         'license.enter_key': 'Enter license key',
         'license.key': 'License key',
@@ -263,7 +273,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 +389,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にアップグレード',
@@ -402,6 +416,7 @@ const FIGMA_UI_TRANSLATIONS = {
         'license.authenticating': '認証中...',
         'license.login_with_designbase': 'Designbaseでサインイン',
         'license.purchase_membership': 'メンバーシップの詳細',
+        'license.purchase_license': 'ライセンスを購入',
         'license.manage_account': 'アカウント・メンバーシップを管理',
         'license.enter_key': 'ライセンスキーを入力',
         'license.key': 'ライセンスキー',
@@ -417,7 +432,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 +2029,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 +2058,10 @@ 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 hasSourceTabs = showYoutubeMembershipTab && !isPaid;
     const usageLabel = formatUsageLabel(state, translate);
     const handleLicenseSubmit = async (submittedLicenseKey) => {
         if (onLicenseSubmit) {
@@ -2057,30 +2074,33 @@ 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} ${hasSourceTabs ? 'designbase-figma-page-license--source-switching' : ''} ${className || ''}`, "data-license-mode": activeLicenseMode },
         React.createElement("div", { className: "designbase-figma-page-license__content" },
             React.createElement("div", { className: "designbase-figma-page-license__header" },
                 React.createElement("div", { className: "designbase-figma-page-license__title" },
                     React.createElement("h2", null, isPaid
                         ? resolveText(translate, { key: 'license.pro_account' }, '프로 계정')
-                        : isMembershipMode
-                            ? resolveText(translate, { key: 'license.unlock_unlimited' }, '무제한 사용 활성화')
+                        : showYoutubeMembershipTab
+                            ? resolveText(translate, { key: 'license.unlock_unlimited' }, 'Unlock Unlimited Access')
                             : resolveText(translate, { key: 'license.upgrade_to_pro' }, '프로로 업그레이드')),
                     isPaid && (React.createElement("span", { className: "designbase-figma-page-license__tier" }, resolveText(translate, { key: 'license.pro_plan' }, '프로 플랜')))),
                 React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
                     ? resolveText(translate, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
-                    : isMembershipMode
+                    : showYoutubeMembershipTab
                         ? resolveText(translate, {
                             key: 'license.unlock_unlimited_description',
-                        }, '라이선스 키를 등록하면 모든 Designbase 플러그인의 프로 기능과 무제한 사용을 이용할 수 있습니다.')
+                        }, 'Add a license key to unlock Pro features and unlimited use across Designbase plugins.')
                         : resolveText(translate, { key: 'license.purchase_for_unlimited' }, '디자인베이스 멤버십 또는 라이선스로 무제한 이용이 가능합니다.')),
-                !isPaid && !isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel))),
-            !isPaid && isMembershipMode && (React.createElement("div", { className: "designbase-figma-page-license__benefit" },
+                !isPaid && !showYoutubeMembershipTab && !isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__usage" }, usageLabel))),
+            !isPaid && showYoutubeMembershipTab && (React.createElement("div", { className: "designbase-figma-page-license__benefit" },
                 React.createElement("span", { className: "designbase-figma-page-license__benefit-icon", "aria-hidden": "true" }, "\u221E"),
                 React.createElement("div", null,
                     React.createElement("strong", null, resolveText(translate, { key: 'license.unlimited_benefit_title' }, '모든 플러그인 무제한 사용')),
                     React.createElement("p", null, resolveText(translate, { key: 'license.unlimited_benefit_description' }, '사용 횟수 제한 없이 프로 기능과 프리미엄 콘텐츠를 이용할 수 있습니다.'))))),
-            !isMembershipMode && (React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: translate })),
+            hasSourceTabs && (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')))),
+            !isMembershipMode && !showYoutubeMembershipTab && (React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: translate })),
             state.lastMessage &&
                 state.lastErrorCode &&
                 !state.deactivateMessage && (React.createElement("p", { className: `designbase-figma-page-license__feedback ${state.lastErrorCode ? 'designbase-figma-page-license__feedback--error' : ''}`, "aria-live": "polite" }, state.lastMessage)),
@@ -2113,8 +2133,8 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                         state.deactivateErrorCode && (React.createElement("p", { className: `designbase-figma-page-license__action-feedback designbase-figma-page-license__action-feedback--${resolvePaymentFeedbackVariant(state.deactivateErrorCode)}`, role: "alert", "aria-live": "polite" }, state.deactivateMessage)),
                     React.createElement("p", { className: "designbase-figma-page-license__deactivate-hint" }, resolveText(translate, { key: 'license.deactivate_hint' }, '이 기기에서 라이선스 연결을 해제합니다.'))))),
             !isPaid && (React.createElement(React.Fragment, null,
-                isMembershipMode && (React.createElement(LicenseOffer, { joinUrl: links.membershipUrl || links.purchaseUrl, guideUrl: links.helpUrl || links.purchaseUrl, t: translate })),
-                !isMembershipMode &&
+                isMembershipMode && !showYoutubeMembershipTab && (React.createElement(LicenseOffer, { joinUrl: links.membershipUrl || links.purchaseUrl, guideUrl: links.helpUrl || links.purchaseUrl, t: translate })),
+                !isMembershipMode && !showYoutubeMembershipTab &&
                     (enableAccountAuth ||
                         links.purchaseUrl ||
                         links.accountUrl) && (React.createElement("div", { className: "designbase-figma-page-license__section" },
@@ -2144,20 +2164,23 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                                 key: 'license.manage_account',
                             }, '계정·멤버십 관리')),
                             React.createElement(ExternalLinkIcon, { size: 16 })))))),
-                showLicenseKeyInput && (React.createElement("div", { className: isMembershipMode
-                        ? 'designbase-figma-page-license__key-form'
-                        : 'designbase-figma-page-license__section' },
+                showYoutubeMembershipTab && (React.createElement("div", { "aria-live": "polite" }, isMembershipMode ? (React.createElement(LicenseOffer, { joinUrl: links.membershipUrl || links.purchaseUrl, guideUrl: links.helpUrl || links.purchaseUrl, t: translate })) : (React.createElement(React.Fragment, null,
+                    React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: translate }),
+                    links.purchaseUrl && (React.createElement(Button, { onPress: () => openExternalUrl(links.purchaseUrl), variant: "primary", size: "m", fullWidth: true },
+                        React.createElement("span", null, resolveText(translate, { key: 'license.purchase_license' }, 'Buy a license')),
+                        React.createElement(ExternalLinkIcon, { size: 16, "aria-hidden": "true" }))))))),
+                showLicenseKeyInput && (React.createElement("div", { className: isMembershipMode && !showYoutubeMembershipTab ? 'designbase-figma-page-license__key-form' : 'designbase-figma-page-license__section' },
                     React.createElement("div", { className: "designbase-figma-page-license__section-header" },
-                        React.createElement("h3", null, isMembershipMode
+                        React.createElement("h3", null, isMembershipMode || showYoutubeMembershipTab
                             ? resolveText(translate, {
                                 key: 'license.activate_key_title',
                             }, '라이선스 키 등록')
                             : resolveText(translate, { key: 'license.enter_key' }, '라이선스 키 입력'))),
-                    isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__hint" }, resolveText(translate, {
+                    (isMembershipMode || showYoutubeMembershipTab) && (React.createElement("p", { className: "designbase-figma-page-license__hint" }, resolveText(translate, {
                         key: 'license.activate_key_description',
                     }, '이미 키가 있다면 아래에 붙여 넣어 프로 기능을 활성화하세요.'))),
                     React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isVerifying, value: licenseKeyDraft, onValueChange: handleLicenseKeyChange, label: { key: 'license.key' }, submitText: {
-                            key: isMembershipMode
+                            key: isMembershipMode || showYoutubeMembershipTab
                                 ? 'license.unlock_pro_features'
                                 : 'license.submit',
                         }, submittingText: {
@@ -2167,7 +2190,7 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
                                 ? 'license.enter_from_youtube'
                                 : 'license.enter_from_email',
                         }, t: translate }))))),
-            links.helpUrl && !isMembershipMode && (React.createElement("p", { className: "designbase-figma-page-license__disclaimer" },
+            links.helpUrl && (!isMembershipMode || showYoutubeMembershipTab) && (React.createElement("p", { className: "designbase-figma-page-license__disclaimer" },
                 React.createElement("button", { type: "button", className: "designbase-figma-page-license__link", onClick: () => openExternalUrl(links.helpUrl) }, resolveText(translate, { key: 'license.help_link' }, '라이선스·결제 도움말'))))),
         React.createElement(Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", iconOnly: true, "aria-label": translate('close') },
             React.createElement(CloseIcon, { size: 16 }))));