@designcrowd/fe-shared-lib 1.0.1-6.eng2594 → 1.0.1-jj1

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

@@ -1,203 +1,240 @@
-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>
-    `,
-  };
-};
+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>
+    `,
+  };
+};

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

@@ -24,7 +24,7 @@
         </div>
       </template>
       <template #default>
-        <div v-if="isNotPublished || isSlugEditMode" :class="{ 'tw-mb-8': !hasPurchasedDomains }">
+        <div v-if="isNotPublished || isSlugEditMode">
           <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 && hasPurchasedDomains"
+              v-if="!isPublished"
               for="domain-type"
               class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
             >
@@ -48,66 +48,19 @@
             </label>
           </div>
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
-            <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="isPublishingDisabled"
-                    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>
+            <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 }}
             </div>
           </div>
           <div v-if="isNotPublished || !isSlugEditMode" class="tw-mt-4">
@@ -161,7 +114,6 @@
             <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;' : ''"
           >
@@ -169,7 +121,7 @@
               :label="isSlugEditMode ? 'Set URL' : 'Publish'"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
-              :disabled="isPublishingDisabled"
+              :disabled="!allowPublish || isPublishing"
               class="tw-my-4"
               :full-width="isMobile"
               data-test-brand-page-publish-button
@@ -245,7 +197,6 @@
 </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';
@@ -265,9 +216,6 @@ 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,
@@ -278,7 +226,6 @@ export default {
     TextCopyField,
     SellDomainNameSearchWithResults,
     SellDomainNameListModal,
-    PublishBrandPageCard,
   },
   mixins: [mediaQueryMixin],
   props: {
@@ -395,11 +342,6 @@ export default {
       required: false,
       default: undefined,
     },
-    brandPageType: {
-      type: String,
-      required: true,
-      default: false,
-    },
   },
   emits: [
     'close-modal',
@@ -446,18 +388,6 @@ 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',
+  },
 ];