@designbasekorea/figma-ui 0.8.0 → 0.8.1

package/dist/index.esm.js

@@ -98,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': '라이선스 키',
@@ -256,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',
@@ -414,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': 'ライセンスキー',
@@ -2058,6 +2061,7 @@ const PageLicense = ({ status: initialStatus, onClose, licenseKey: initialLicens
     const [activeLicenseMode, setActiveLicenseMode] = useState(mode);
     const isPaid = state.isLicenseRegistered && state.paymentStatus === 'PAID';
     const isMembershipMode = activeLicenseMode === 'youtube-membership';
+    const hasSourceTabs = showYoutubeMembershipTab && !isPaid;
     const usageLabel = formatUsageLabel(state, translate);
     const handleLicenseSubmit = async (submittedLicenseKey) => {
         if (onLicenseSubmit) {
@@ -2070,36 +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--${activeLicenseMode} ${className || ''}`, "data-license-mode": activeLicenseMode },
+    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" },
-            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
                         ? 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)),
@@ -2132,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" },
@@ -2163,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: {
@@ -2186,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 }))));