@designbasekorea/figma-ui 0.1.87 → 0.1.89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +22 -17
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +17 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +17 -8
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -623,21 +623,28 @@ const defaultFeatures = [
|
|
|
623
623
|
const defaultPricing = {
|
|
624
624
|
monthly: 2,
|
|
625
625
|
yearly: 21.6,
|
|
626
|
+
lifetime: 50,
|
|
626
627
|
};
|
|
627
|
-
const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricing, t = (key) => key, className, }) => {
|
|
628
|
+
const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricing, paymentType = 'subscription', t = (key) => key, className, }) => {
|
|
628
629
|
const [isYearly, setIsYearly] = React.useState(false);
|
|
629
630
|
const getPrice = () => {
|
|
631
|
+
if (paymentType === 'lifetime') {
|
|
632
|
+
return `$${pricing.lifetime?.toLocaleString()} - ${t('lifetimeAccess') || '평생 이용'}`;
|
|
633
|
+
}
|
|
630
634
|
const price = isYearly ? pricing.yearly : pricing.monthly;
|
|
631
|
-
return `$${price
|
|
635
|
+
return `$${price?.toLocaleString()} / ${isYearly ? t('perYear') : t('perMonth')}`;
|
|
632
636
|
};
|
|
633
637
|
const getDiscountPercentage = () => {
|
|
634
|
-
|
|
635
|
-
|
|
638
|
+
if (paymentType === 'lifetime') {
|
|
639
|
+
return null;
|
|
640
|
+
}
|
|
641
|
+
const monthlyPrice = (pricing.monthly || 0) * 12;
|
|
642
|
+
const yearlyPrice = pricing.yearly || 0;
|
|
636
643
|
const discount = Math.round(((monthlyPrice - yearlyPrice) / monthlyPrice) * 100);
|
|
637
644
|
return discount;
|
|
638
645
|
};
|
|
639
646
|
return (React.createElement("div", { className: `designbase-figma-pricing-comparison ${className || ''}` },
|
|
640
|
-
React.createElement("div", { className: "designbase-figma-pricing-comparison__billing-toggle" },
|
|
647
|
+
paymentType === 'subscription' && (React.createElement("div", { className: "designbase-figma-pricing-comparison__billing-toggle" },
|
|
641
648
|
React.createElement(ui.SegmentControl, { value: isYearly ? 'yearly' : 'monthly', onChange: (value) => setIsYearly(value === 'yearly'), options: [
|
|
642
649
|
{
|
|
643
650
|
value: 'monthly',
|
|
@@ -651,7 +658,9 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
|
|
|
651
658
|
getDiscountPercentage(),
|
|
652
659
|
"% \uC808\uC57D"))),
|
|
653
660
|
},
|
|
654
|
-
], size: "s" })),
|
|
661
|
+
], size: "s" }))),
|
|
662
|
+
paymentType === 'lifetime' && (React.createElement("div", { className: "designbase-figma-pricing-comparison__lifetime-info" },
|
|
663
|
+
React.createElement("p", { className: "designbase-figma-pricing-comparison__lifetime-text" }, t('oneTimePaymentLifetime') || 'One-time payment for lifetime access!'))),
|
|
655
664
|
React.createElement("table", { className: "designbase-figma-pricing-comparison__table" },
|
|
656
665
|
React.createElement("thead", null,
|
|
657
666
|
React.createElement("tr", null,
|
|
@@ -675,7 +684,7 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
|
|
|
675
684
|
};
|
|
676
685
|
PricingComparison.displayName = 'PricingComparison';
|
|
677
686
|
|
|
678
|
-
const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, t, className, }) => {
|
|
687
|
+
const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, pricingFeatures, pricing, paymentType = 'subscription', t, className, }) => {
|
|
679
688
|
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
|
680
689
|
const [isDeactivating, setIsDeactivating] = React.useState(false);
|
|
681
690
|
const [licenseKey, setLicenseKey] = React.useState(initialLicenseKey);
|
|
@@ -760,7 +769,7 @@ const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageC
|
|
|
760
769
|
React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
|
|
761
770
|
? resolveText(t, { key: 'license.all_features_available' }, '모든 기능을 사용할 수 있습니다.')
|
|
762
771
|
: resolveText(t, { key: 'license.purchase_for_unlimited' }, '라이선스 구매 후 무제한 접근이 가능합니다.'))),
|
|
763
|
-
React.createElement(PricingComparison, { t: t }),
|
|
772
|
+
React.createElement(PricingComparison, { features: pricingFeatures, pricing: pricing, paymentType: paymentType, t: t }),
|
|
764
773
|
isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
|
|
765
774
|
React.createElement("div", { className: "designbase-figma-page-license__section-header" },
|
|
766
775
|
React.createElement("h3", null, resolveText(t, { key: 'license.activated' }, '라이선스 활성화됨')),
|