@designcrowd/fe-shared-lib 1.5.9 → 1.5.10-kp-2
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/.storybook-static/css/tailwind-brandCrowd.css +2472 -0
- package/.storybook-static/css/tailwind-brandPage.css +2156 -0
- package/.storybook-static/css/tailwind-crazyDomains.css +2472 -0
- package/.storybook-static/css/tailwind-designCom.css +2472 -0
- package/.storybook-static/css/tailwind-designCrowd.css +2472 -0
- package/.storybook-static/favicon.svg +1 -0
- package/.storybook-static/index.html +156 -0
- package/.storybook-static/index.json +1 -0
- package/.storybook-static/nunito-sans-bold-italic.woff2 +0 -0
- package/.storybook-static/nunito-sans-bold.woff2 +0 -0
- package/.storybook-static/nunito-sans-italic.woff2 +0 -0
- package/.storybook-static/nunito-sans-regular.woff2 +0 -0
- package/.storybook-static/project.json +1 -0
- package/.storybook-static/sb-addons/a11y-1/manager-bundle.js +5 -0
- package/.storybook-static/sb-addons/links-2/manager-bundle.js +3 -0
- package/.storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +188 -0
- package/.storybook-static/sb-addons/themes-3/manager-bundle.js +3 -0
- package/.storybook-static/sb-common-assets/favicon.svg +1 -0
- package/.storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/.storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/.storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/.storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/.storybook-static/sb-manager/globals-module-info.js +797 -0
- package/.storybook-static/sb-manager/globals-runtime.js +72062 -0
- package/.storybook-static/sb-manager/globals.js +34 -0
- package/.storybook-static/sb-manager/runtime.js +13002 -0
- package/dist/css/tailwind-brandCrowd.css +27 -0
- package/dist/css/tailwind-brandPage.css +27 -0
- package/dist/css/tailwind-crazyDomains.css +27 -0
- package/dist/css/tailwind-designCom.css +27 -0
- package/dist/css/tailwind-designCrowd.css +27 -0
- package/index.js +1 -0
- package/package.json +3 -1
- package/public/css/tailwind-brandCrowd.css +2494 -0
- package/public/css/tailwind-brandPage.css +2178 -0
- package/public/css/tailwind-crazyDomains.css +2494 -0
- package/public/css/tailwind-designCom.css +2494 -0
- package/public/css/tailwind-designCrowd.css +2494 -0
- package/src/atoms/components/Icon/Icon.stories.js +7 -0
- package/src/atoms/components/Icon/Icon.vue +13 -0
- package/src/atoms/components/Icon/icons/websites/upgrade-to-add-page.vue +50 -0
- package/src/atoms/components/Icon/icons/websites/upgrade-to-contact-form.vue +82 -0
- package/src/atoms/components/Icon/icons/websites/upgrade-to-maps.vue +40 -0
- package/src/atoms/components/Icon/icons/websites/upgrade-to-publish.vue +107 -0
- package/src/atoms/components/Icon/icons/websites/upgrade-to-remove-watermark.vue +74 -0
- package/src/atoms/components/Icon/icons/websites/upgrade-to-videos.vue +16 -0
- package/src/bundles/bundled-translations.de-DE.json +24 -0
- package/src/bundles/bundled-translations.es-ES.json +24 -0
- package/src/bundles/bundled-translations.fr-CA.json +24 -0
- package/src/bundles/bundled-translations.fr-FR.json +24 -0
- package/src/bundles/bundled-translations.json +24 -0
- package/src/bundles/bundled-translations.pt-BR.json +24 -0
- package/src/bundles/bundled-translations.pt-PT.json +24 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.stories.js +157 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue +133 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/i18n/website-contextual-upgrade-modal.de-DE.json +26 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/i18n/website-contextual-upgrade-modal.es-ES.json +26 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/i18n/website-contextual-upgrade-modal.fr-CA.json +26 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/i18n/website-contextual-upgrade-modal.fr-FR.json +26 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/i18n/website-contextual-upgrade-modal.json +26 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/i18n/website-contextual-upgrade-modal.pt-BR.json +26 -0
- package/src/experiences/components/WebsitesContextualUpgradeModal/i18n/website-contextual-upgrade-modal.pt-PT.json +26 -0
- package/src/useSharedLibTranslate.js +4 -0
|
@@ -101,5 +101,29 @@
|
|
|
101
101
|
"replaceLogo": "Substituir logotipo",
|
|
102
102
|
"delete": "Excluir",
|
|
103
103
|
"deleteLogo": "Excluir logotipo"
|
|
104
|
+
},
|
|
105
|
+
"websiteContextualUpgradeModal": {
|
|
106
|
+
"upgradeButtonText": "Upgrade Now",
|
|
107
|
+
"closeButtonText": "No Thanks",
|
|
108
|
+
"upgradeToAddPageTitle": "Upgrade to add more pages",
|
|
109
|
+
"upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
|
|
110
|
+
"upgradeToContactFormTitle": "Upgrade to unlock contact form",
|
|
111
|
+
"upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
|
|
112
|
+
"upgradeToMapsTitle": "Upgrade to unlock maps",
|
|
113
|
+
"upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
|
|
114
|
+
"upgradeToVideosTitle": "Upgrade to unlock videos",
|
|
115
|
+
"upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
|
|
116
|
+
"upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
|
|
117
|
+
"upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
|
|
118
|
+
"upgradeToPublishTitle": "Upgrade to publish your site",
|
|
119
|
+
"upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
|
|
120
|
+
"featureCustomerCare": "24/7 customer care",
|
|
121
|
+
"featureCustomDomain": "Connect a custom domain",
|
|
122
|
+
"featureNoWatermark": "No {{websiteName}} watermark",
|
|
123
|
+
"featureUnlimitedPages": "Unlimited pages",
|
|
124
|
+
"featurePremiumContent": "Contact forms, videos and maps",
|
|
125
|
+
"featureStore": "Basic online store",
|
|
126
|
+
"featureCancelAnytime": "Cancel anytime",
|
|
127
|
+
"premiumUpgradeNote": "With Premium, you'll get:"
|
|
104
128
|
}
|
|
105
129
|
}
|
|
@@ -101,5 +101,29 @@
|
|
|
101
101
|
"replaceLogo": "Substituir logótipo",
|
|
102
102
|
"delete": "Eliminar",
|
|
103
103
|
"deleteLogo": "Eliminar Logótipo"
|
|
104
|
+
},
|
|
105
|
+
"websiteContextualUpgradeModal": {
|
|
106
|
+
"upgradeButtonText": "Upgrade Now",
|
|
107
|
+
"closeButtonText": "No Thanks",
|
|
108
|
+
"upgradeToAddPageTitle": "Upgrade to add more pages",
|
|
109
|
+
"upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
|
|
110
|
+
"upgradeToContactFormTitle": "Upgrade to unlock contact form",
|
|
111
|
+
"upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
|
|
112
|
+
"upgradeToMapsTitle": "Upgrade to unlock maps",
|
|
113
|
+
"upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
|
|
114
|
+
"upgradeToVideosTitle": "Upgrade to unlock videos",
|
|
115
|
+
"upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
|
|
116
|
+
"upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
|
|
117
|
+
"upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
|
|
118
|
+
"upgradeToPublishTitle": "Upgrade to publish your site",
|
|
119
|
+
"upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
|
|
120
|
+
"featureCustomerCare": "24/7 customer care",
|
|
121
|
+
"featureCustomDomain": "Connect a custom domain",
|
|
122
|
+
"featureNoWatermark": "No {{websiteName}} watermark",
|
|
123
|
+
"featureUnlimitedPages": "Unlimited pages",
|
|
124
|
+
"featurePremiumContent": "Contact forms, videos and maps",
|
|
125
|
+
"featureStore": "Basic online store",
|
|
126
|
+
"featureCancelAnytime": "Cancel anytime",
|
|
127
|
+
"premiumUpgradeNote": "With Premium, you'll get:"
|
|
104
128
|
}
|
|
105
129
|
}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import WebsiteContextualUpgradeModal from './WebsiteContextualUpgradeModal.vue';
|
|
2
|
+
import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Components/WebsitesContextualUpgradeModal',
|
|
6
|
+
component: WebsiteContextualUpgradeModal,
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const locale = 'en-US';
|
|
10
|
+
|
|
11
|
+
const loadTranslationAsync = async () => {
|
|
12
|
+
await setSharedLibLocaleAsync(locale);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const UpgradeToAddPage = () => ({
|
|
16
|
+
components: { WebsiteContextualUpgradeModal },
|
|
17
|
+
data() {
|
|
18
|
+
return {
|
|
19
|
+
isUpgradeModalVisible: true,
|
|
20
|
+
isDesignCom: true,
|
|
21
|
+
upgradeUrl: 'https://brand.site/upgrade/add-page',
|
|
22
|
+
brandPageType: 'brandContact',
|
|
23
|
+
contentType: 'AddPage',
|
|
24
|
+
};
|
|
25
|
+
},
|
|
26
|
+
template: `
|
|
27
|
+
<WebsiteContextualUpgradeModal
|
|
28
|
+
:is-upgrade-modal-visible="isUpgradeModalVisible"
|
|
29
|
+
:is-design-com="isDesignCom"
|
|
30
|
+
:upgrade-url="upgradeUrl"
|
|
31
|
+
:brand-page-type="brandPageType"
|
|
32
|
+
:content-type="contentType"
|
|
33
|
+
/>
|
|
34
|
+
`,
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
UpgradeToAddPage.loaders = [loadTranslationAsync];
|
|
38
|
+
|
|
39
|
+
export const UpgradeToContactForm = () => ({
|
|
40
|
+
components: { WebsiteContextualUpgradeModal },
|
|
41
|
+
data() {
|
|
42
|
+
return {
|
|
43
|
+
isUpgradeModalVisible: true,
|
|
44
|
+
isDesignCom: true,
|
|
45
|
+
upgradeUrl: 'https://brand.site/upgrade/contact-form',
|
|
46
|
+
brandPageType: 'brandContact',
|
|
47
|
+
contentType: 'ContactForm',
|
|
48
|
+
};
|
|
49
|
+
},
|
|
50
|
+
template: `
|
|
51
|
+
<WebsiteContextualUpgradeModal
|
|
52
|
+
:is-upgrade-modal-visible="isUpgradeModalVisible"
|
|
53
|
+
:is-design-com="isDesignCom"
|
|
54
|
+
:upgrade-url="upgradeUrl"
|
|
55
|
+
:brand-page-type="brandPageType"
|
|
56
|
+
:content-type="contentType"
|
|
57
|
+
/>
|
|
58
|
+
`,
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
UpgradeToContactForm.loaders = [loadTranslationAsync];
|
|
62
|
+
|
|
63
|
+
export const UpgradeToMaps = () => ({
|
|
64
|
+
components: { WebsiteContextualUpgradeModal },
|
|
65
|
+
data() {
|
|
66
|
+
return {
|
|
67
|
+
isUpgradeModalVisible: true,
|
|
68
|
+
isDesignCom: true,
|
|
69
|
+
upgradeUrl: 'https://brand.site/upgrade/maps',
|
|
70
|
+
brandPageType: 'brandContact',
|
|
71
|
+
contentType: 'Maps',
|
|
72
|
+
};
|
|
73
|
+
},
|
|
74
|
+
template: `
|
|
75
|
+
<WebsiteContextualUpgradeModal
|
|
76
|
+
:is-upgrade-modal-visible="isUpgradeModalVisible"
|
|
77
|
+
:is-design-com="isDesignCom"
|
|
78
|
+
:upgrade-url="upgradeUrl"
|
|
79
|
+
:brand-page-type="brandPageType"
|
|
80
|
+
:content-type="contentType"
|
|
81
|
+
/>
|
|
82
|
+
`,
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
UpgradeToMaps.loaders = [loadTranslationAsync];
|
|
86
|
+
|
|
87
|
+
export const UpgradeToVideos = () => ({
|
|
88
|
+
components: { WebsiteContextualUpgradeModal },
|
|
89
|
+
data() {
|
|
90
|
+
return {
|
|
91
|
+
isUpgradeModalVisible: true,
|
|
92
|
+
isDesignCom: true,
|
|
93
|
+
upgradeUrl: 'https://brand.site/upgrade/videos',
|
|
94
|
+
brandPageType: 'brandContact',
|
|
95
|
+
contentType: 'Videos',
|
|
96
|
+
};
|
|
97
|
+
},
|
|
98
|
+
template: `
|
|
99
|
+
<WebsiteContextualUpgradeModal
|
|
100
|
+
:is-upgrade-modal-visible="isUpgradeModalVisible"
|
|
101
|
+
:is-design-com="isDesignCom"
|
|
102
|
+
:upgrade-url="upgradeUrl"
|
|
103
|
+
:brand-page-type="brandPageType"
|
|
104
|
+
:content-type="contentType"
|
|
105
|
+
/>
|
|
106
|
+
`,
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
UpgradeToVideos.loaders = [loadTranslationAsync];
|
|
110
|
+
|
|
111
|
+
export const UpgradeToRemoveWatermark = () => ({
|
|
112
|
+
components: { WebsiteContextualUpgradeModal },
|
|
113
|
+
data() {
|
|
114
|
+
return {
|
|
115
|
+
isUpgradeModalVisible: true,
|
|
116
|
+
isDesignCom: true,
|
|
117
|
+
upgradeUrl: 'https://brand.site/upgrade/remove-watermark',
|
|
118
|
+
brandPageType: 'brandContact',
|
|
119
|
+
contentType: 'RemoveWatermark',
|
|
120
|
+
};
|
|
121
|
+
},
|
|
122
|
+
template: `
|
|
123
|
+
<WebsiteContextualUpgradeModal
|
|
124
|
+
:is-upgrade-modal-visible="isUpgradeModalVisible"
|
|
125
|
+
:is-design-com="isDesignCom"
|
|
126
|
+
:upgrade-url="upgradeUrl"
|
|
127
|
+
:brand-page-type="brandPageType"
|
|
128
|
+
:content-type="contentType"
|
|
129
|
+
/>
|
|
130
|
+
`,
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
UpgradeToRemoveWatermark.loaders = [loadTranslationAsync];
|
|
134
|
+
|
|
135
|
+
export const UpgradeToPublish = () => ({
|
|
136
|
+
components: { WebsiteContextualUpgradeModal },
|
|
137
|
+
data() {
|
|
138
|
+
return {
|
|
139
|
+
isUpgradeModalVisible: true,
|
|
140
|
+
isDesignCom: true,
|
|
141
|
+
upgradeUrl: 'https://brand.site/upgrade/publish',
|
|
142
|
+
brandPageType: 'brandContact',
|
|
143
|
+
contentType: 'Publish',
|
|
144
|
+
};
|
|
145
|
+
},
|
|
146
|
+
template: `
|
|
147
|
+
<WebsiteContextualUpgradeModal
|
|
148
|
+
:is-upgrade-modal-visible="isUpgradeModalVisible"
|
|
149
|
+
:is-design-com="isDesignCom"
|
|
150
|
+
:upgrade-url="upgradeUrl"
|
|
151
|
+
:brand-page-type="brandPageType"
|
|
152
|
+
:content-type="contentType"
|
|
153
|
+
/>
|
|
154
|
+
`,
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
UpgradeToPublish.loaders = [loadTranslationAsync];
|
package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Modal
|
|
3
|
+
:visible="props.isUpgradeModalVisible"
|
|
4
|
+
full-screen-breakpoint="sm"
|
|
5
|
+
:show-modal-background-image="!isDesignCom"
|
|
6
|
+
classes="tw-max-w-3xl tw-p-8"
|
|
7
|
+
@close-modal="closeUpgradeModal"
|
|
8
|
+
>
|
|
9
|
+
<div class="tw-flex tw-flex-col tw-text-black">
|
|
10
|
+
<div class="tw-flex tw-flex-col tw-pb-16 md:tw-pb-0">
|
|
11
|
+
<Icon
|
|
12
|
+
v-if="iconName"
|
|
13
|
+
:name="iconName"
|
|
14
|
+
:view-box="'0 0 100 100'"
|
|
15
|
+
size="5xl"
|
|
16
|
+
:class="{
|
|
17
|
+
'tw-text-primary-500': isDesignCom,
|
|
18
|
+
'tw-text-white': !isDesignCom,
|
|
19
|
+
}"
|
|
20
|
+
class="tw-mb-4"
|
|
21
|
+
/>
|
|
22
|
+
<h2 v-if="titleText" class="tw-font-bold tw-text-3xl tw-mb-2">
|
|
23
|
+
{{ titleText }}
|
|
24
|
+
</h2>
|
|
25
|
+
<span class="tw-text-grayscale-600 tw-mb-2" v-html="descriptionText" />
|
|
26
|
+
<br />
|
|
27
|
+
<p class="tw-font-bold">{{ websiteContextualUpgradeModalTr('premiumUpgradeNote') }}</p>
|
|
28
|
+
<div class="tw-flex tw-flex-col md:tw-flex-row tw-mt-2">
|
|
29
|
+
<div
|
|
30
|
+
class="tw-order-last md:tw-order-first tw-w-full md:tw-w-3/4 tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4"
|
|
31
|
+
>
|
|
32
|
+
<div v-for="(feature, i) in features" :key="i" class="tw-flex tw-items-center tw-text-sm tw-rounded-md">
|
|
33
|
+
<Icon class="tw-text-success-500" name="check" size="sm" />
|
|
34
|
+
<span class="tw-ml-2 tw-text-grayscale-600" v-html="feature" />
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="bottom-bar tw-mt-2 tw-bg-grayscale-200">
|
|
40
|
+
<div class="bottom-bar tw-mt-6 tw-flex tw-flex-col md:tw-flex-row md:tw-items-center md:tw-gap-2">
|
|
41
|
+
<div class="button-size md:tw-flex-1">
|
|
42
|
+
<Button
|
|
43
|
+
data-test-upgrade-button
|
|
44
|
+
:label="upgradeButtonText"
|
|
45
|
+
size="medium"
|
|
46
|
+
:variant="'primary'"
|
|
47
|
+
icon="chevron-right-wide"
|
|
48
|
+
:url="upgradeUrl"
|
|
49
|
+
classes="tw-w-full"
|
|
50
|
+
@on-click="onUpgradeClick"
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="md:tw-flex-1 md:tw-max-w-40 tw-mt-3 md:tw-mt-0">
|
|
54
|
+
<Button
|
|
55
|
+
data-test-upgrade-button
|
|
56
|
+
:label="websiteContextualUpgradeModalTr('closeButtonText')"
|
|
57
|
+
size="medium"
|
|
58
|
+
:variant="'no-border'"
|
|
59
|
+
classes="tw-w-full"
|
|
60
|
+
@on-click="closeUpgradeModal"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</Modal>
|
|
67
|
+
</template>
|
|
68
|
+
<script setup lang="ts">
|
|
69
|
+
import { Ref, ref } from 'vue';
|
|
70
|
+
import Modal from '../../../atoms/components/Modal/Modal.vue';
|
|
71
|
+
import Button from '../../../atoms/components/Button/Button.vue';
|
|
72
|
+
import Icon from '../../../atoms/components/Icon/Icon.vue';
|
|
73
|
+
import { websiteContextualUpgradeModalTr } from '../../../useSharedLibTranslate';
|
|
74
|
+
|
|
75
|
+
const titleText: Ref<string> = ref('');
|
|
76
|
+
const descriptionText: Ref<string> = ref('');
|
|
77
|
+
const iconName: Ref<string> = ref('');
|
|
78
|
+
const upgradeButtonText: Ref<string> = ref('');
|
|
79
|
+
const features: Ref<string[]> = ref([]);
|
|
80
|
+
|
|
81
|
+
const props = defineProps<{
|
|
82
|
+
isUpgradeModalVisible: boolean;
|
|
83
|
+
isDesignCom: boolean;
|
|
84
|
+
upgradeUrl: string;
|
|
85
|
+
brandPageType: string;
|
|
86
|
+
contentType: string | 'ContactForm' | 'Videos' | 'Maps' | 'AddPage' | 'Publish' | 'RemoveWatermark';
|
|
87
|
+
}>();
|
|
88
|
+
const toKebabCase = (value: string) =>
|
|
89
|
+
value
|
|
90
|
+
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
|
|
91
|
+
.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
|
|
92
|
+
.toLowerCase();
|
|
93
|
+
|
|
94
|
+
const initModalContent = (websiteName: string) => {
|
|
95
|
+
const titleForIcon = `upgradeTo${props.contentType}`;
|
|
96
|
+
iconName.value = `websites-${toKebabCase(titleForIcon)}`;
|
|
97
|
+
|
|
98
|
+
titleText.value = websiteContextualUpgradeModalTr(`${titleForIcon}Title`);
|
|
99
|
+
descriptionText.value = websiteContextualUpgradeModalTr(`upgradeTo${props.contentType}Description`);
|
|
100
|
+
upgradeButtonText.value = websiteContextualUpgradeModalTr('upgradeButtonText');
|
|
101
|
+
|
|
102
|
+
features.value = [
|
|
103
|
+
websiteContextualUpgradeModalTr('featureCustomerCare'),
|
|
104
|
+
websiteContextualUpgradeModalTr('featureCustomDomain'),
|
|
105
|
+
websiteContextualUpgradeModalTr('featureNoWatermark', { websiteName }),
|
|
106
|
+
websiteContextualUpgradeModalTr('featureUnlimitedPages'),
|
|
107
|
+
websiteContextualUpgradeModalTr('featurePremiumContent'),
|
|
108
|
+
`<div class="tw-text-success-500"><strong>${websiteContextualUpgradeModalTr('featureCancelAnytime')}</strong></div>`,
|
|
109
|
+
websiteContextualUpgradeModalTr('featureStore'),
|
|
110
|
+
];
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const websiteName = props.isDesignCom ? 'Design.com' : 'BrandCrowd';
|
|
114
|
+
initModalContent(websiteName);
|
|
115
|
+
|
|
116
|
+
const emit = defineEmits<{
|
|
117
|
+
'on-close-upgrade-modal': [];
|
|
118
|
+
'on-upgrade-button-clicked': [];
|
|
119
|
+
}>();
|
|
120
|
+
|
|
121
|
+
const closeUpgradeModal = () => {
|
|
122
|
+
emit('on-close-upgrade-modal');
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
const onUpgradeClick = () => {
|
|
126
|
+
emit('on-upgrade-button-clicked');
|
|
127
|
+
};
|
|
128
|
+
</script>
|
|
129
|
+
<style scoped>
|
|
130
|
+
.button-size {
|
|
131
|
+
@apply tw-w-full md:tw-max-w-40;
|
|
132
|
+
}
|
|
133
|
+
</style>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"websiteContextualUpgradeModal": {
|
|
3
|
+
"upgradeButtonText": "Upgrade Now",
|
|
4
|
+
"closeButtonText": "No Thanks",
|
|
5
|
+
"upgradeToAddPageTitle": "Upgrade to add more pages",
|
|
6
|
+
"upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
|
|
7
|
+
"upgradeToContactFormTitle": "Upgrade to unlock contact form",
|
|
8
|
+
"upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
|
|
9
|
+
"upgradeToMapsTitle": "Upgrade to unlock maps",
|
|
10
|
+
"upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
|
|
11
|
+
"upgradeToVideosTitle": "Upgrade to unlock videos",
|
|
12
|
+
"upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
|
|
13
|
+
"upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
|
|
14
|
+
"upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
|
|
15
|
+
"upgradeToPublishTitle": "Upgrade to publish your site",
|
|
16
|
+
"upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
|
|
17
|
+
"featureCustomerCare": "24/7 customer care",
|
|
18
|
+
"featureCustomDomain": "Connect a custom domain",
|
|
19
|
+
"featureNoWatermark": "No {{websiteName}} watermark",
|
|
20
|
+
"featureUnlimitedPages": "Unlimited pages",
|
|
21
|
+
"featurePremiumContent": "Contact forms, videos and maps",
|
|
22
|
+
"featureStore": "Basic online store",
|
|
23
|
+
"featureCancelAnytime": "Cancel anytime",
|
|
24
|
+
"premiumUpgradeNote": "With Premium, you'll get:"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"websiteContextualUpgradeModal": {
|
|
3
|
+
"upgradeButtonText": "Upgrade Now",
|
|
4
|
+
"closeButtonText": "No Thanks",
|
|
5
|
+
"upgradeToAddPageTitle": "Upgrade to add more pages",
|
|
6
|
+
"upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
|
|
7
|
+
"upgradeToContactFormTitle": "Upgrade to unlock contact form",
|
|
8
|
+
"upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
|
|
9
|
+
"upgradeToMapsTitle": "Upgrade to unlock maps",
|
|
10
|
+
"upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
|
|
11
|
+
"upgradeToVideosTitle": "Upgrade to unlock videos",
|
|
12
|
+
"upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
|
|
13
|
+
"upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
|
|
14
|
+
"upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
|
|
15
|
+
"upgradeToPublishTitle": "Upgrade to publish your site",
|
|
16
|
+
"upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
|
|
17
|
+
"featureCustomerCare": "24/7 customer care",
|
|
18
|
+
"featureCustomDomain": "Connect a custom domain",
|
|
19
|
+
"featureNoWatermark": "No {{websiteName}} watermark",
|
|
20
|
+
"featureUnlimitedPages": "Unlimited pages",
|
|
21
|
+
"featurePremiumContent": "Contact forms, videos and maps",
|
|
22
|
+
"featureStore": "Basic online store",
|
|
23
|
+
"featureCancelAnytime": "Cancel anytime",
|
|
24
|
+
"premiumUpgradeNote": "With Premium, you'll get:"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"websiteContextualUpgradeModal": {
|
|
3
|
+
"upgradeButtonText": "Upgrade Now",
|
|
4
|
+
"closeButtonText": "No Thanks",
|
|
5
|
+
"upgradeToAddPageTitle": "Upgrade to add more pages",
|
|
6
|
+
"upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
|
|
7
|
+
"upgradeToContactFormTitle": "Upgrade to unlock contact form",
|
|
8
|
+
"upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
|
|
9
|
+
"upgradeToMapsTitle": "Upgrade to unlock maps",
|
|
10
|
+
"upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
|
|
11
|
+
"upgradeToVideosTitle": "Upgrade to unlock videos",
|
|
12
|
+
"upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
|
|
13
|
+
"upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
|
|
14
|
+
"upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
|
|
15
|
+
"upgradeToPublishTitle": "Upgrade to publish your site",
|
|
16
|
+
"upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
|
|
17
|
+
"featureCustomerCare": "24/7 customer care",
|
|
18
|
+
"featureCustomDomain": "Connect a custom domain",
|
|
19
|
+
"featureNoWatermark": "No {{websiteName}} watermark",
|
|
20
|
+
"featureUnlimitedPages": "Unlimited pages",
|
|
21
|
+
"featurePremiumContent": "Contact forms, videos and maps",
|
|
22
|
+
"featureStore": "Basic online store",
|
|
23
|
+
"featureCancelAnytime": "Cancel anytime",
|
|
24
|
+
"premiumUpgradeNote": "With Premium, you'll get:"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"websiteContextualUpgradeModal": {
|
|
3
|
+
"upgradeButtonText": "Upgrade Now",
|
|
4
|
+
"closeButtonText": "No Thanks",
|
|
5
|
+
"upgradeToAddPageTitle": "Upgrade to add more pages",
|
|
6
|
+
"upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
|
|
7
|
+
"upgradeToContactFormTitle": "Upgrade to unlock contact form",
|
|
8
|
+
"upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
|
|
9
|
+
"upgradeToMapsTitle": "Upgrade to unlock maps",
|
|
10
|
+
"upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
|
|
11
|
+
"upgradeToVideosTitle": "Upgrade to unlock videos",
|
|
12
|
+
"upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
|
|
13
|
+
"upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
|
|
14
|
+
"upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
|
|
15
|
+
"upgradeToPublishTitle": "Upgrade to publish your site",
|
|
16
|
+
"upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
|
|
17
|
+
"featureCustomerCare": "24/7 customer care",
|
|
18
|
+
"featureCustomDomain": "Connect a custom domain",
|
|
19
|
+
"featureNoWatermark": "No {{websiteName}} watermark",
|
|
20
|
+
"featureUnlimitedPages": "Unlimited pages",
|
|
21
|
+
"featurePremiumContent": "Contact forms, videos and maps",
|
|
22
|
+
"featureStore": "Basic online store",
|
|
23
|
+
"featureCancelAnytime": "Cancel anytime",
|
|
24
|
+
"premiumUpgradeNote": "With Premium, you'll get:"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"websiteContextualUpgradeModal": {
|
|
3
|
+
"upgradeButtonText": "Upgrade Now",
|
|
4
|
+
"closeButtonText": "No Thanks",
|
|
5
|
+
"upgradeToAddPageTitle": "Upgrade to add more pages",
|
|
6
|
+
"upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
|
|
7
|
+
"upgradeToContactFormTitle": "Upgrade to unlock contact form",
|
|
8
|
+
"upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
|
|
9
|
+
"upgradeToMapsTitle": "Upgrade to unlock maps",
|
|
10
|
+
"upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
|
|
11
|
+
"upgradeToVideosTitle": "Upgrade to unlock videos",
|
|
12
|
+
"upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
|
|
13
|
+
"upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
|
|
14
|
+
"upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
|
|
15
|
+
"upgradeToPublishTitle": "Upgrade to publish your site",
|
|
16
|
+
"upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
|
|
17
|
+
"featureCustomerCare": "24/7 customer care",
|
|
18
|
+
"featureCustomDomain": "Connect a custom domain",
|
|
19
|
+
"featureNoWatermark": "No {{websiteName}} watermark",
|
|
20
|
+
"featureUnlimitedPages": "Unlimited pages",
|
|
21
|
+
"featurePremiumContent": "Contact forms, videos and maps",
|
|
22
|
+
"featureStore": "Basic online store",
|
|
23
|
+
"featureCancelAnytime": "Cancel anytime",
|
|
24
|
+
"premiumUpgradeNote": "With Premium, you'll get:"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"websiteContextualUpgradeModal": {
|
|
3
|
+
"upgradeButtonText": "Upgrade Now",
|
|
4
|
+
"closeButtonText": "No Thanks",
|
|
5
|
+
"upgradeToAddPageTitle": "Upgrade to add more pages",
|
|
6
|
+
"upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
|
|
7
|
+
"upgradeToContactFormTitle": "Upgrade to unlock contact form",
|
|
8
|
+
"upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
|
|
9
|
+
"upgradeToMapsTitle": "Upgrade to unlock maps",
|
|
10
|
+
"upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
|
|
11
|
+
"upgradeToVideosTitle": "Upgrade to unlock videos",
|
|
12
|
+
"upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
|
|
13
|
+
"upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
|
|
14
|
+
"upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
|
|
15
|
+
"upgradeToPublishTitle": "Upgrade to publish your site",
|
|
16
|
+
"upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
|
|
17
|
+
"featureCustomerCare": "24/7 customer care",
|
|
18
|
+
"featureCustomDomain": "Connect a custom domain",
|
|
19
|
+
"featureNoWatermark": "No {{websiteName}} watermark",
|
|
20
|
+
"featureUnlimitedPages": "Unlimited pages",
|
|
21
|
+
"featurePremiumContent": "Contact forms, videos and maps",
|
|
22
|
+
"featureStore": "Basic online store",
|
|
23
|
+
"featureCancelAnytime": "Cancel anytime",
|
|
24
|
+
"premiumUpgradeNote": "With Premium, you'll get:"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"websiteContextualUpgradeModal": {
|
|
3
|
+
"upgradeButtonText": "Upgrade Now",
|
|
4
|
+
"closeButtonText": "No Thanks",
|
|
5
|
+
"upgradeToAddPageTitle": "Upgrade to add more pages",
|
|
6
|
+
"upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
|
|
7
|
+
"upgradeToContactFormTitle": "Upgrade to unlock contact form",
|
|
8
|
+
"upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
|
|
9
|
+
"upgradeToMapsTitle": "Upgrade to unlock maps",
|
|
10
|
+
"upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
|
|
11
|
+
"upgradeToVideosTitle": "Upgrade to unlock videos",
|
|
12
|
+
"upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
|
|
13
|
+
"upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
|
|
14
|
+
"upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
|
|
15
|
+
"upgradeToPublishTitle": "Upgrade to publish your site",
|
|
16
|
+
"upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
|
|
17
|
+
"featureCustomerCare": "24/7 customer care",
|
|
18
|
+
"featureCustomDomain": "Connect a custom domain",
|
|
19
|
+
"featureNoWatermark": "No {{websiteName}} watermark",
|
|
20
|
+
"featureUnlimitedPages": "Unlimited pages",
|
|
21
|
+
"featurePremiumContent": "Contact forms, videos and maps",
|
|
22
|
+
"featureStore": "Basic online store",
|
|
23
|
+
"featureCancelAnytime": "Cancel anytime",
|
|
24
|
+
"premiumUpgradeNote": "With Premium, you'll get:"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -68,6 +68,9 @@ const priceTr = (key, valuesToInterpolate = {}) => tr(`price.${key}`, valuesToIn
|
|
|
68
68
|
const uploadLogoSearchResultCardTr = (key, valuesToInterpolate = {}) =>
|
|
69
69
|
tr(`uploadLogoSearchResultCard.${key}`, valuesToInterpolate);
|
|
70
70
|
|
|
71
|
+
const websiteContextualUpgradeModalTr = (key, valuesToInterpolate = {}) =>
|
|
72
|
+
tr(`websiteContextualUpgradeModal.${key}`, valuesToInterpolate);
|
|
73
|
+
|
|
71
74
|
const getCurrentLocale = () => {
|
|
72
75
|
return i18next.language || 'en-US';
|
|
73
76
|
};
|
|
@@ -124,4 +127,5 @@ export {
|
|
|
124
127
|
priceTr,
|
|
125
128
|
uploadLogoSearchResultCardTr,
|
|
126
129
|
formatCurrency,
|
|
130
|
+
websiteContextualUpgradeModalTr,
|
|
127
131
|
};
|