@designcrowd/fe-shared-lib 1.0.10-ml-317 → 1.0.11
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/index.js +1 -0
- package/package.json +1 -1
- package/src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue +115 -0
- package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.stories.js +10 -47
- package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue +86 -16
package/index.js
CHANGED
|
@@ -17,6 +17,7 @@ export { default as SellDomainNameListModal } from './src/experiences/components
|
|
|
17
17
|
export { default as SellDomainNameList } from './src/experiences/components/SellDomainNameList/SellDomainNameList.vue';
|
|
18
18
|
export { default as SellDomainNameWidget } from './src/experiences/components/SellDomainNameWidget/SellDomainNameWidget.vue';
|
|
19
19
|
export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
|
|
20
|
+
export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
|
|
20
21
|
|
|
21
22
|
export { default as Button } from './src/atoms/components/Button/Button.vue';
|
|
22
23
|
export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
|
package/package.json
CHANGED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4">
|
|
3
|
+
<div class="tw-flex tw-flex-row tw-items-center">
|
|
4
|
+
<div class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2">
|
|
5
|
+
<img :src="imgUrl" alt="icon" class="md:tw-max-w-full" />
|
|
6
|
+
</div>
|
|
7
|
+
<div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
|
|
8
|
+
<div class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center">
|
|
9
|
+
<div class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-left">
|
|
10
|
+
<div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-2">
|
|
11
|
+
<p class="tw-font-bold tw-text-sm" :class="{ 'tw-text-grayscale-800': isDesignCom }">
|
|
12
|
+
{{ title }}
|
|
13
|
+
</p>
|
|
14
|
+
<span
|
|
15
|
+
v-if="showLabel"
|
|
16
|
+
class="tw-text-xs tw-h-4 tw-w-fit tw-text-primary-500 tw-border tw-border-solid tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"
|
|
17
|
+
>
|
|
18
|
+
Recommended
|
|
19
|
+
</span>
|
|
20
|
+
</div>
|
|
21
|
+
<p class="tw-mt-2 md:tw-mt-0 tw-text-grayscale-600 tw-text-sm">
|
|
22
|
+
{{ description }}
|
|
23
|
+
</p>
|
|
24
|
+
<div class="desktop-cta tw-mt-2">
|
|
25
|
+
<slot name="slug" />
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
<div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 desktop-cta">
|
|
29
|
+
<Button
|
|
30
|
+
label="Search"
|
|
31
|
+
class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
|
|
32
|
+
data-test-brand-page-search-button
|
|
33
|
+
variant="primary"
|
|
34
|
+
size="small-medium"
|
|
35
|
+
@on-click="onClick"
|
|
36
|
+
:class="{
|
|
37
|
+
'tw-uppercase': !isDesignCom,
|
|
38
|
+
}"
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="tw-mt-2 tw-px-2 tw-flex tw-flex-col tw-w-full">
|
|
45
|
+
<div class="mobile-cta">
|
|
46
|
+
<slot name="slug" />
|
|
47
|
+
</div>
|
|
48
|
+
<div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 mobile-cta tw-mt-2">
|
|
49
|
+
<Button
|
|
50
|
+
label="Search"
|
|
51
|
+
class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
|
|
52
|
+
data-test-brand-page-search-button
|
|
53
|
+
variant="primary"
|
|
54
|
+
size="small-medium"
|
|
55
|
+
:full-width="true"
|
|
56
|
+
@on-click="onClick"
|
|
57
|
+
:class="{
|
|
58
|
+
'tw-uppercase': !isDesignCom,
|
|
59
|
+
}"
|
|
60
|
+
/>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</template>
|
|
65
|
+
<script setup lang="ts">
|
|
66
|
+
import Button from '../../../../src/atoms/components/Button/Button.vue';
|
|
67
|
+
|
|
68
|
+
const props = defineProps({
|
|
69
|
+
title: {
|
|
70
|
+
type: String,
|
|
71
|
+
default: '',
|
|
72
|
+
},
|
|
73
|
+
description: {
|
|
74
|
+
type: String,
|
|
75
|
+
default: '',
|
|
76
|
+
},
|
|
77
|
+
imgUrl: {
|
|
78
|
+
type: Boolean,
|
|
79
|
+
default: true,
|
|
80
|
+
},
|
|
81
|
+
isDesignCom: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
default: false,
|
|
84
|
+
},
|
|
85
|
+
hasSearchButton: {
|
|
86
|
+
type: Boolean,
|
|
87
|
+
default: true,
|
|
88
|
+
},
|
|
89
|
+
showLabel: {
|
|
90
|
+
type: Boolean,
|
|
91
|
+
default: false,
|
|
92
|
+
},
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
const emit = defineEmits(['on-show-domain-list-modal']);
|
|
96
|
+
const onClick = () => {
|
|
97
|
+
emit('on-show-domain-list-modal');
|
|
98
|
+
};
|
|
99
|
+
</script>
|
|
100
|
+
|
|
101
|
+
<style scoped>
|
|
102
|
+
@media (max-width: 640px) {
|
|
103
|
+
.desktop-cta {
|
|
104
|
+
display: none;
|
|
105
|
+
width: 100%;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@media (min-width: 640px) {
|
|
110
|
+
.mobile-cta {
|
|
111
|
+
display: none;
|
|
112
|
+
width: 100%;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
</style>
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import Card from './PublishBrandPageCard.vue';
|
|
1
2
|
import PublishBrandPageModal from './PublishBrandPageModal.vue';
|
|
2
3
|
import { domains } from './__fixtures__/data';
|
|
3
4
|
|
|
@@ -156,6 +157,7 @@ export const Free = () => {
|
|
|
156
157
|
return {
|
|
157
158
|
components: {
|
|
158
159
|
PublishBrandPageModal,
|
|
160
|
+
Card,
|
|
159
161
|
},
|
|
160
162
|
data() {
|
|
161
163
|
return {
|
|
@@ -186,53 +188,14 @@ export const Free = () => {
|
|
|
186
188
|
@on-hide-domain-modal="onHideDomainListModal"
|
|
187
189
|
>
|
|
188
190
|
<template #recommended>
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
<img
|
|
198
|
-
src="https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg"
|
|
199
|
-
alt="icon"
|
|
200
|
-
class="md:tw-max-w-full"
|
|
201
|
-
/>
|
|
202
|
-
</div>
|
|
203
|
-
<div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
|
|
204
|
-
<div
|
|
205
|
-
class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center"
|
|
206
|
-
>
|
|
207
|
-
<!-- Product title/description -->
|
|
208
|
-
<div
|
|
209
|
-
class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-center md:tw-text-left"
|
|
210
|
-
>
|
|
211
|
-
<div>
|
|
212
|
-
<h6
|
|
213
|
-
class="tw-font-bold"
|
|
214
|
-
:class="{ 'tw-text-grayscale-800': isDesignCom }"
|
|
215
|
-
>
|
|
216
|
-
Purchase a domain
|
|
217
|
-
</h6>
|
|
218
|
-
<p class="tw-text-grayscale-600">
|
|
219
|
-
Find the perfect domain name for your brand for
|
|
220
|
-
</p>
|
|
221
|
-
</div>
|
|
222
|
-
</div>
|
|
223
|
-
<!-- CTA -->
|
|
224
|
-
<div class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4">
|
|
225
|
-
<button
|
|
226
|
-
class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-text-success-500 tw-uppercase tw-transition-colors tw-duration-300 tw-text-sm tw-py-3 tw-px-4 tw-w-full tw-rounded tw-cursor-pointer tw-border-success-500 tw-bg-white hover:tw-bg-success-100 tw-text-success-500 tw-w-full md:tw-w-24"
|
|
227
|
-
@click="onShowDomainListModal"
|
|
228
|
-
>
|
|
229
|
-
Search
|
|
230
|
-
</button>
|
|
231
|
-
</div>
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
</div>
|
|
235
|
-
</div>
|
|
191
|
+
<Card
|
|
192
|
+
:imgUrl="'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg'"
|
|
193
|
+
title="Custom Domain"
|
|
194
|
+
description="Make it easy for customers to find you with a domain that matches your business"
|
|
195
|
+
:is-design-com="isDesignCom"
|
|
196
|
+
:has-search-button="true"
|
|
197
|
+
:show-label="true"
|
|
198
|
+
/>
|
|
236
199
|
</template>
|
|
237
200
|
</PublishBrandPageModal>
|
|
238
201
|
`,
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
</div>
|
|
25
25
|
</template>
|
|
26
26
|
<template #default>
|
|
27
|
-
<div v-if="isNotPublished || isSlugEditMode">
|
|
27
|
+
<div v-if="isNotPublished || isSlugEditMode" :class="{ 'tw-mb-8': !hasPurchasedDomains }">
|
|
28
28
|
<div
|
|
29
29
|
v-if="!isSlugEditMode"
|
|
30
30
|
class="tw-flex tw-items-center tw-mr-2 tw-mb-1"
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
:value="domainTypeValue === DOMAIN_TYPES.slug"
|
|
41
41
|
/>
|
|
42
42
|
<label
|
|
43
|
-
v-if="!isPublished"
|
|
43
|
+
v-if="!isPublished && hasPurchasedDomains"
|
|
44
44
|
for="domain-type"
|
|
45
45
|
class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
|
|
46
46
|
>
|
|
@@ -48,19 +48,66 @@
|
|
|
48
48
|
</label>
|
|
49
49
|
</div>
|
|
50
50
|
<div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
|
|
51
|
-
<
|
|
52
|
-
v-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
:
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
51
|
+
<PublishBrandPageCard
|
|
52
|
+
v-if="!hasPurchasedDomains"
|
|
53
|
+
:imgUrl="iconUrl"
|
|
54
|
+
title="Free Address"
|
|
55
|
+
description="Choose a free address to publish now. You can always edit the URL later"
|
|
56
|
+
:is-design-com="isDesignCom"
|
|
57
|
+
:has-search-button="false"
|
|
58
|
+
>
|
|
59
|
+
<template #slug>
|
|
60
|
+
<div class="tw-flex tw-flex-col md:tw-flex-row tw-justify-between">
|
|
61
|
+
<div>
|
|
62
|
+
<TextInput
|
|
63
|
+
v-model="internalSlug"
|
|
64
|
+
element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md tw-w-1/3"
|
|
65
|
+
:prefix-text="`${brandPageBaseUrl}/`"
|
|
66
|
+
:error="!!slugValidationError"
|
|
67
|
+
:disabled="isInputEnabled"
|
|
68
|
+
:placeholder="getPlaceHolder"
|
|
69
|
+
data-test-brand-page-slug-input
|
|
70
|
+
:attrs="{ 'data-test-set-url-text-field': '' }"
|
|
71
|
+
@input="onSlugChanged"
|
|
72
|
+
/>
|
|
73
|
+
<div
|
|
74
|
+
v-if="slugErrorMessage"
|
|
75
|
+
class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal"
|
|
76
|
+
>
|
|
77
|
+
{{ slugErrorMessage }}
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
<Button
|
|
81
|
+
label="Publish"
|
|
82
|
+
:disabled="isPublishAllowed"
|
|
83
|
+
class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
|
|
84
|
+
data-test-brand-page-publish-button
|
|
85
|
+
variant="primary"
|
|
86
|
+
size="small-medium"
|
|
87
|
+
@on-click="onPublish"
|
|
88
|
+
:full-width="isMobile"
|
|
89
|
+
:class="{
|
|
90
|
+
'tw-uppercase': !isDesignCom,
|
|
91
|
+
}"
|
|
92
|
+
/>
|
|
93
|
+
</div>
|
|
94
|
+
</template>
|
|
95
|
+
</PublishBrandPageCard>
|
|
96
|
+
<div v-else>
|
|
97
|
+
<TextInput
|
|
98
|
+
v-model="internalSlug"
|
|
99
|
+
element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
|
|
100
|
+
:prefix-text="`${brandPageBaseUrl}/`"
|
|
101
|
+
:error="!!slugValidationError"
|
|
102
|
+
:disabled="isInputEnabled"
|
|
103
|
+
:placeholder="getPlaceHolder"
|
|
104
|
+
data-test-brand-page-slug-input
|
|
105
|
+
:attrs="{ 'data-test-set-url-text-field': '' }"
|
|
106
|
+
@input="onSlugChanged"
|
|
107
|
+
/>
|
|
108
|
+
<div v-if="slugErrorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
|
|
109
|
+
{{ slugErrorMessage }}
|
|
110
|
+
</div>
|
|
64
111
|
</div>
|
|
65
112
|
</div>
|
|
66
113
|
<div v-if="isNotPublished || !isSlugEditMode" class="tw-mt-4">
|
|
@@ -114,6 +161,7 @@
|
|
|
114
161
|
<slot v-if="!hasPurchasedDomains" name="recommended" />
|
|
115
162
|
</div>
|
|
116
163
|
<div
|
|
164
|
+
v-if="hasPurchasedDomains"
|
|
117
165
|
class="tw-font-sans tw-text-center"
|
|
118
166
|
:style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
|
|
119
167
|
>
|
|
@@ -121,7 +169,7 @@
|
|
|
121
169
|
:label="isSlugEditMode ? 'Set URL' : 'Publish'"
|
|
122
170
|
:variant="isDesignCom ? 'primary' : 'primary-with-icon'"
|
|
123
171
|
icon="chevron-right-wide"
|
|
124
|
-
:disabled="
|
|
172
|
+
:disabled="isPublishAllowed"
|
|
125
173
|
class="tw-my-4"
|
|
126
174
|
:full-width="isMobile"
|
|
127
175
|
data-test-brand-page-publish-button
|
|
@@ -197,6 +245,7 @@
|
|
|
197
245
|
</template>
|
|
198
246
|
<script>
|
|
199
247
|
import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
|
|
248
|
+
import PublishBrandPageCard from './PublishBrandPageCard.vue';
|
|
200
249
|
import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
|
|
201
250
|
import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
|
|
202
251
|
import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
|
|
@@ -216,6 +265,9 @@ const DOMAIN_TYPES = {
|
|
|
216
265
|
purchased: 'purchased',
|
|
217
266
|
};
|
|
218
267
|
|
|
268
|
+
const DCOM_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg';
|
|
269
|
+
const BC_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/bc-free-url.svg';
|
|
270
|
+
|
|
219
271
|
export default {
|
|
220
272
|
components: {
|
|
221
273
|
Modal,
|
|
@@ -226,6 +278,7 @@ export default {
|
|
|
226
278
|
TextCopyField,
|
|
227
279
|
SellDomainNameSearchWithResults,
|
|
228
280
|
SellDomainNameListModal,
|
|
281
|
+
PublishBrandPageCard,
|
|
229
282
|
},
|
|
230
283
|
mixins: [mediaQueryMixin],
|
|
231
284
|
props: {
|
|
@@ -342,6 +395,11 @@ export default {
|
|
|
342
395
|
required: false,
|
|
343
396
|
default: undefined,
|
|
344
397
|
},
|
|
398
|
+
brandPageType: {
|
|
399
|
+
type: String,
|
|
400
|
+
required: true,
|
|
401
|
+
default: false,
|
|
402
|
+
},
|
|
345
403
|
},
|
|
346
404
|
emits: [
|
|
347
405
|
'close-modal',
|
|
@@ -388,6 +446,18 @@ export default {
|
|
|
388
446
|
isSlugEditMode() {
|
|
389
447
|
return this.isPublished && this.shouldPublish && this.isBrandPageSlugEditMode;
|
|
390
448
|
},
|
|
449
|
+
iconUrl() {
|
|
450
|
+
return this.isDesignCom ? DCOM_IMG_FREE : BC_IMG_FREE;
|
|
451
|
+
},
|
|
452
|
+
isInputEnabled() {
|
|
453
|
+
return this.isPublishing || this.domainTypeValue === DOMAIN_TYPES.purchased;
|
|
454
|
+
},
|
|
455
|
+
isPublishingDisabled() {
|
|
456
|
+
return !this.allowPublish || this.isPublishing;
|
|
457
|
+
},
|
|
458
|
+
getPlaceHolder() {
|
|
459
|
+
return this.brandPageType === 'brandContact' ? 'your-name' : 'your-business-name';
|
|
460
|
+
},
|
|
391
461
|
},
|
|
392
462
|
watch: {
|
|
393
463
|
brandPageSlug(slug) {
|