@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.stories.js

@@ -1,240 +1,203 @@
-import PublishBrandPageModal from './PublishBrandPageModal.vue';
-import { domains } from './__fixtures__/data';
-
-export default {
-  title: 'Components/PublishBrandPageModal',
-  component: PublishBrandPageModal,
-};
-
-export const NotPublishedWithPurchasedDomains = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains,
-      };
-    },
-    methods: {},
-    template: `
-      <PublishBrandPageModal
-        visible
-        :is-published="false"
-        :is-search-domain-list-modal-visible="false"
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site/" 
-        radio-value="slug"
-        :show-radio-buttons="domains.length > 0"
-      />
-    `,
-  };
-};
-
-export const PublishWithSelectedDomain = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains,
-        domainType: 'purchased',
-        customDomain: {
-          domainName: 'doggers.info',
-          created: '2024-07-26T01:44:22.257',
-          updated: null,
-          isAutoRenewEnabled: true,
-          isRegistrationComplete: false,
-          status: 'Active',
-        },
-      };
-    },
-    methods: {
-      onRadioButtonChanged(val) {
-        this.domainType = val;
-      },
-    },
-    template: `
-      <PublishBrandPageModal
-        visible
-        :is-published="false"
-        should-publish
-        :domains="domains"
-        :custom-domain="customDomain"
-        brand-page-display-name='Website'
-        brand-page-base-url="https://brand.site/"
-        radio-value="purchased"
-        :show-radio-buttons="domains.length > 0"
-        @radio-button-changed="onRadioButtonChanged"
-      />
-    `,
-  };
-};
-
-export const SetSlug = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains,
-      };
-    },
-    methods: {},
-    template: `
-      <PublishBrandPageModal
-        visible
-        is-brand-page-slug-edit-mode
-        is-published
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website'
-        brand-page-base-url="https://brand.site/"
-        brand-page-slug='test-slug' 
-        :show-radio-buttons="domains.length > 0"
-      />
-    `,
-  };
-};
-export const Published = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains,
-      };
-    },
-    methods: {},
-    template: `
-      <PublishBrandPageModal
-        visible
-        is-published
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site/" 
-        radio-value="slug"
-        brand-page-url="https://brand.site/brandname"
-      />
-    `,
-  };
-};
-export const PublishedNoDomains = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains: [],
-      };
-    },
-    methods: {},
-    template: `
-      <PublishBrandPageModal
-        visible
-        is-design-com
-        is-published
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website' 
-        brand-page-slug='test-slug' 
-        brand-page-base-url="https://brand.site/" 
-        radio-value="slug"
-        brand-page-url="https://brand.site/test-slug"
-      />
-  `,
-  };
-};
-export const Free = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains: [],
-        isSearchDomainListModalVisible: false,
-        isDesignCom: false,
-      };
-    },
-    methods: {
-      onHideDomainListModal() {
-        this.isSearchDomainListModalVisible = false;
-      },
-      onShowDomainListModal() {
-        this.isSearchDomainListModalVisible = true;
-      },
-    },
-    template: `
-      <PublishBrandPageModal
-        visible
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site/" 
-        radio-value="slug"
-        brand-page-url="https://brand.site/brandname"
-        :show-radio-buttons="domains.length > 0"
-        :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
-        @on-hide-domain-modal="onHideDomainListModal"
-      >
-        <template #recommended>
-          <div
-            class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4"
-          >
-            <div class="tw-flex tw-flex-col md:tw-flex-row tw-items-center">
-              <!-- Product image -->
-              <div
-                class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2"
-              >
-                <img
-                  src="https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg"
-                  alt="icon"
-                  class="md:tw-max-w-full"
-                />
-              </div>
-              <div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
-                <div
-                  class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center"
-                >
-                  <!-- Product title/description -->
-                  <div
-                    class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-center md:tw-text-left"
-                  >
-                    <div>
-                      <h6
-                        class="tw-font-bold"
-                        :class="{ 'tw-text-grayscale-800': isDesignCom }"
-                      >
-                        Purchase a domain
-                      </h6>
-                      <p class="tw-text-grayscale-600">
-                        Find the perfect domain name for your brand for
-                      </p>
-                    </div>
-                  </div>
-                  <!-- CTA -->
-                  <div class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4">
-                    <button
-                      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"
-                      @click="onShowDomainListModal"
-                    >
-                      Search
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-      </PublishBrandPageModal>
-    `,
-  };
-};
+import Card from './PublishBrandPageCard.vue';
+import PublishBrandPageModal from './PublishBrandPageModal.vue';
+import { domains } from './__fixtures__/data';
+
+export default {
+  title: 'Components/PublishBrandPageModal',
+  component: PublishBrandPageModal,
+};
+
+export const NotPublishedWithPurchasedDomains = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains,
+      };
+    },
+    methods: {},
+    template: `
+      <PublishBrandPageModal
+        visible
+        :is-published="false"
+        :is-search-domain-list-modal-visible="false"
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        :show-radio-buttons="domains.length > 0"
+      />
+    `,
+  };
+};
+
+export const PublishWithSelectedDomain = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains,
+        domainType: 'purchased',
+        customDomain: {
+          domainName: 'doggers.info',
+          created: '2024-07-26T01:44:22.257',
+          updated: null,
+          isAutoRenewEnabled: true,
+          isRegistrationComplete: false,
+          status: 'Active',
+        },
+      };
+    },
+    methods: {
+      onRadioButtonChanged(val) {
+        this.domainType = val;
+      },
+    },
+    template: `
+      <PublishBrandPageModal
+        visible
+        :is-published="false"
+        should-publish
+        :domains="domains"
+        :custom-domain="customDomain"
+        brand-page-display-name='Website'
+        brand-page-base-url="https://brand.site/"
+        radio-value="purchased"
+        :show-radio-buttons="domains.length > 0"
+        @radio-button-changed="onRadioButtonChanged"
+      />
+    `,
+  };
+};
+
+export const SetSlug = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains,
+      };
+    },
+    methods: {},
+    template: `
+      <PublishBrandPageModal
+        visible
+        is-brand-page-slug-edit-mode
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website'
+        brand-page-base-url="https://brand.site/"
+        brand-page-slug='test-slug' 
+        :show-radio-buttons="domains.length > 0"
+      />
+    `,
+  };
+};
+export const Published = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains,
+      };
+    },
+    methods: {},
+    template: `
+      <PublishBrandPageModal
+        visible
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/brandname"
+      />
+    `,
+  };
+};
+export const PublishedNoDomains = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains: [],
+      };
+    },
+    methods: {},
+    template: `
+      <PublishBrandPageModal
+        visible
+        is-design-com
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-slug='test-slug' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/test-slug"
+      />
+  `,
+  };
+};
+export const Free = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+      Card,
+    },
+    data() {
+      return {
+        domains: [],
+        isSearchDomainListModalVisible: false,
+        isDesignCom: false,
+      };
+    },
+    methods: {
+      onHideDomainListModal() {
+        this.isSearchDomainListModalVisible = false;
+      },
+      onShowDomainListModal() {
+        this.isSearchDomainListModalVisible = true;
+      },
+    },
+    template: `
+      <PublishBrandPageModal
+        visible
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/brandname"
+        :show-radio-buttons="domains.length > 0"
+        :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
+        @on-hide-domain-modal="onHideDomainListModal"
+      >
+        <template #recommended>
+            <Card
+              :imgUrl="'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg'"
+              title="Custom Domain"
+              description="Make it easy for customers to find you with a domain that matches your business"
+              :is-design-com="isDesignCom"
+              :has-search-button="true"
+              :show-label="true"
+            />
+        </template>
+      </PublishBrandPageModal>
+    `,
+  };
+};

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -24,7 +24,7 @@
         </div>
       </template>
       <template #default>
-        <div v-if="isNotPublished || isSlugEditMode">
+        <div v-if="isNotPublished || isSlugEditMode" :class="{ 'tw-mb-8': !hasPurchasedDomains }">
           <div
             v-if="!isSlugEditMode"
             class="tw-flex tw-items-center tw-mr-2 tw-mb-1"
@@ -40,7 +40,7 @@
               :value="domainTypeValue === DOMAIN_TYPES.slug"
             />
             <label
-              v-if="!isPublished"
+              v-if="!isPublished && hasPurchasedDomains"
               for="domain-type"
               class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
             >
@@ -48,19 +48,66 @@
             </label>
           </div>
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
-            <TextInput
-              v-model="internalSlug"
-              element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
-              :prefix-text="`${brandPageBaseUrl}/`"
-              :error="!!slugValidationError"
-              :disabled="isPublishing || domainTypeValue === DOMAIN_TYPES.purchased"
-              placeholder="your-brand-name"
-              data-test-brand-page-slug-input
-              :attrs="{ 'data-test-set-url-text-field': '' }"
-              @input="onSlugChanged"
-            />
-            <div v-if="slugErrorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
-              {{ slugErrorMessage }}
+            <PublishBrandPageCard
+              v-if="!hasPurchasedDomains"
+              :imgUrl="iconUrl"
+              title="Free Address"
+              description="Choose a free address to publish now. You can always edit the URL later"
+              :is-design-com="isDesignCom"
+              :has-search-button="false"
+            >
+              <template #slug>
+                <div class="tw-flex tw-flex-col md:tw-flex-row tw-justify-between">
+                  <div>
+                    <TextInput
+                      v-model="internalSlug"
+                      element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md tw-w-1/3"
+                      :prefix-text="`${brandPageBaseUrl}/`"
+                      :error="!!slugValidationError"
+                      :disabled="isInputEnabled"
+                      :placeholder="getPlaceHolder"
+                      data-test-brand-page-slug-input
+                      :attrs="{ 'data-test-set-url-text-field': '' }"
+                      @input="onSlugChanged"
+                    />
+                    <div
+                      v-if="slugErrorMessage"
+                      class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal"
+                    >
+                      {{ slugErrorMessage }}
+                    </div>
+                  </div>
+                  <Button
+                    label="Publish"
+                    :disabled="isPublishAllowed"
+                    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"
+                    data-test-brand-page-publish-button
+                    variant="primary"
+                    size="small-medium"
+                    @on-click="onPublish"
+                    :full-width="isMobile"
+                    :class="{
+                      'tw-uppercase': !isDesignCom,
+                    }"
+                  />
+                </div>
+              </template>
+            </PublishBrandPageCard>
+            <div v-else>
+              <TextInput
+                v-model="internalSlug"
+                element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
+                :prefix-text="`${brandPageBaseUrl}/`"
+                :error="!!slugValidationError"
+                :disabled="isInputEnabled"
+                :placeholder="getPlaceHolder"
+                data-test-brand-page-slug-input
+                :attrs="{ 'data-test-set-url-text-field': '' }"
+                @input="onSlugChanged"
+              />
+              <div v-if="slugErrorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
+                {{ slugErrorMessage }}
+              </div>
             </div>
           </div>
           <div v-if="isNotPublished || !isSlugEditMode" class="tw-mt-4">
@@ -114,6 +161,7 @@
             <slot v-if="!hasPurchasedDomains" name="recommended" />
           </div>
           <div
+            v-if="hasPurchasedDomains"
             class="tw-font-sans tw-text-center"
             :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
           >
@@ -121,7 +169,7 @@
               :label="isSlugEditMode ? 'Set URL' : 'Publish'"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
-              :disabled="!allowPublish || isPublishing"
+              :disabled="isPublishAllowed"
               class="tw-my-4"
               :full-width="isMobile"
               data-test-brand-page-publish-button
@@ -197,6 +245,7 @@
 </template>
 <script>
 import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import PublishBrandPageCard from './PublishBrandPageCard.vue';
 import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
 import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
 import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
@@ -216,6 +265,9 @@ const DOMAIN_TYPES = {
   purchased: 'purchased',
 };
 
+const DCOM_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg';
+const BC_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/bc-free-url.svg';
+
 export default {
   components: {
     Modal,
@@ -226,6 +278,7 @@ export default {
     TextCopyField,
     SellDomainNameSearchWithResults,
     SellDomainNameListModal,
+    PublishBrandPageCard,
   },
   mixins: [mediaQueryMixin],
   props: {
@@ -342,6 +395,11 @@ export default {
       required: false,
       default: undefined,
     },
+    brandPageType: {
+      type: String,
+      required: true,
+      default: false,
+    },
   },
   emits: [
     'close-modal',
@@ -388,6 +446,18 @@ export default {
     isSlugEditMode() {
       return this.isPublished && this.shouldPublish && this.isBrandPageSlugEditMode;
     },
+    iconUrl() {
+      return this.isDesignCom ? DCOM_IMG_FREE : BC_IMG_FREE;
+    },
+    isInputEnabled() {
+      return this.isPublishing || this.domainTypeValue === DOMAIN_TYPES.purchased;
+    },
+    isPublishingDisabled() {
+      return !this.allowPublish || this.isPublishing;
+    },
+    getPlaceHolder() {
+      return this.brandPageType === 'brandContact' ? 'your-name' : 'your-business-name';
+    },
   },
   watch: {
     brandPageSlug(slug) {

package/src/experiences/components/PublishBrandPageModal/__fixtures__/data.js

@@ -1,26 +1,26 @@
-export const domains = [
-  {
-    domainName: 'brandcrowdqa.co',
-    created: '2024-07-26T01:42:17.477',
-    updated: null,
-    isAutoRenewEnabled: true,
-    isRegistrationComplete: false,
-    status: 'Inactive',
-  },
-  {
-    domainName: 'doggers.info',
-    created: '2024-07-26T01:44:22.257',
-    updated: null,
-    isAutoRenewEnabled: true,
-    isRegistrationComplete: false,
-    status: 'Active',
-  },
-  {
-    domainName: 'yourstories.live',
-    created: '2024-08-20T00:39:25.193',
-    updated: null,
-    isAutoRenewEnabled: true,
-    isRegistrationComplete: false,
-    status: 'Registration Started',
-  },
+export const domains = [
+  {
+    domainName: 'brandcrowdqa.co',
+    created: '2024-07-26T01:42:17.477',
+    updated: null,
+    isAutoRenewEnabled: true,
+    isRegistrationComplete: false,
+    status: 'Inactive',
+  },
+  {
+    domainName: 'doggers.info',
+    created: '2024-07-26T01:44:22.257',
+    updated: null,
+    isAutoRenewEnabled: true,
+    isRegistrationComplete: false,
+    status: 'Active',
+  },
+  {
+    domainName: 'yourstories.live',
+    created: '2024-08-20T00:39:25.193',
+    updated: null,
+    isAutoRenewEnabled: true,
+    isRegistrationComplete: false,
+    status: 'Registration Started',
+  },
 ];