@designcrowd/fe-shared-lib 1.5.1 → 1.5.3-CarouselUpdatev0

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

@@ -1,7 +1,7 @@
 <template>
   <div class="publish-bp--container">
     <Modal
-      classes="publish-bp--modal tw-pt-4"
+      classes="publish-bp--modal tw-p-4"
       close-on-esc
       :visible="visible"
       :hide-scrollbar="false"
@@ -30,211 +30,77 @@
         </div>
       </template>
       <template #default>
-        <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"
-            @click="onDomainTypeRadioButtonClick(DOMAIN_TYPES.slug)"
-          >
-            <input
-              v-if="showRadioButtons"
-              type="radio"
-              class="tw-w-6 tw-h-8 tw-cursor-pointer tw-mb-0"
-              :style="{ 'accent-color': 'rgb(242 27 63)' }"
-              name="domainTypeValue"
-              :checked="domainTypeValue === DOMAIN_TYPES.slug"
-              :value="domainTypeValue === DOMAIN_TYPES.slug"
-            />
-            <label
-              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"
-            >
-              <span class="tw-inline-block tw-rounded-full">{{ freeDomainLabel }}</span>
-            </label>
-          </div>
-          <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
-            <PublishBrandPageCard
-              v-if="!hasPurchasedDomains"
-              :img-url="iconUrl"
-              :title="freePublishCardTitleLabel"
-              :description="freePublishCardDescriptionLabel"
-              :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 class="tw-grow md:tw-mr-2">
-                    <TextInput
-                      v-model="internalSlug"
-                      element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md"
-                      :prefix-text="`${brandPageBaseUrlWithoutHttps}/`"
-                      :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="publishLabel"
-                    :disabled="isPublishingDisabled"
-                    class="tw-flex tw-items-center tw-justify-center tw-mt-2 md:tw-mt-0 tw-font-bold tw-transition-colors tw-duration-300"
-                    data-test-brand-page-publish-button
-                    variant="primary"
-                    size="small-medium"
-                    :full-width="isMobile"
-                    :class="{
-                      'tw-uppercase': !isDesignCom,
-                    }"
-                    @on-click="onPublish"
-                  />
-                </div>
-              </template>
-            </PublishBrandPageCard>
-            <div v-else>
-              <TextInput
-                v-model="internalSlug"
-                element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
-                :prefix-text="`${brandPageBaseUrlWithoutHttps}/`"
-                :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">
-            <div v-if="showRadioButtons">
-              <div
-                class="tw-flex tw-items-center tw-mr-2 tw-mb-1"
-                @click="onDomainTypeRadioButtonClick(DOMAIN_TYPES.purchased)"
-              >
-                <input
-                  type="radio"
-                  class="tw-w-6 tw-h-8 tw-cursor-pointer tw-mb-0"
-                  :style="{ 'accent-color': 'rgb(242 27 63)' }"
-                  name="domainTypeValue"
-                  :checked="domainTypeValue === DOMAIN_TYPES.purchased"
-                  :value="domainTypeValue === DOMAIN_TYPES.purchased"
-                />
-                <label
-                  for="domain-type"
-                  class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
-                >
-                  <span class="tw-inline-block tw-rounded-full">{{ purchasedDomainLabel }}</span>
-                </label>
-              </div>
-              <div class="tw-mt-4 domain-dropdown">
-                <Dropdown
-                  v-if="domains"
-                  ref="dropdown"
-                  :element-classes="{
-                    'tw-h-12': true,
-                  }"
-                  menu-element-classes="tw-w-full"
-                  :disabled="domainTypeValue === DOMAIN_TYPES.slug"
-                  :class="{
-                    'tw-text-grayscale-600 tw-font-normal': !selectedCustomDomain,
-                  }"
-                  :title="(selectedCustomDomain && selectedCustomDomain.domainName) || selectDomainDropdownPlaceholder"
-                >
-                  <DropdownItem
-                    v-for="purchasedDomain of domains"
-                    :key="purchasedDomain.domainName"
-                    class="tw-font-bold tw-break-all tw-flex tw-gap-2 tw-text-black"
-                    @click="onSelectPurchasedDomain(purchasedDomain)"
-                  >
-                    {{ purchasedDomain.domainName }}
-                  </DropdownItem>
-                </Dropdown>
-              </div>
-              <div v-if="errorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
-                {{ errorMessage }}
-              </div>
-            </div>
-            <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;' : ''"
-          >
-            <Button
-              :label="isSlugEditMode ? setUrlLabel : publishLabel"
-              :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
-              icon="chevron-right-wide"
-              :disabled="isPublishingDisabled"
-              class="tw-my-4"
-              :full-width="isMobile"
-              data-test-brand-page-publish-button
-              @on-click="onPublish"
-            />
-            <Button
-              :label="hasAlreadyPurchasedDomainCloseButtonLabel"
-              variant="no-border"
-              size="large"
-              class="tw-my-4"
-              :full-width="isMobile"
-              @on-click="onCloseModal"
-            />
-          </div>
-        </div>
-        <div v-else class="tw-font-sans">
-          <div v-if="!showUpsellRotationContainer" class="tw-mb-6 tw-text-left">
-            <div class="tw-mb-6">
-              <SellDomainNameSearchWithResults
-                :is-design-com="isDesignCom"
-                :initial-search-term="searchText"
-                :currency="userCurrency"
-                :display-result-limit="4"
-                :domain-search-location="sitePublishedModal"
-                show-view-more-button
-                @on-change-search="onSearchTextChanged"
-                @on-buy-now-click="onBuyNowClick"
-                @on-view-more="onViewMore"
-              />
-            </div>
-          </div>
-          <div class="tw-px-4 tw-text-center" :class="{ 'lg:tw-px-20': hasPurchasedDomains }">
-            <TextCopyField
-              button-variant="secondary"
-              :text="brandPageUrl"
-              :default-copy-button-text="copyLabel"
-              :copied-button-text="copySuccessLabel"
-              data-test-brand-page-copy-input
-              @on-click="onCopyUrlClick"
-            />
-            <Button
-              :label="viewMyWebsiteLabel"
-              :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
-              icon="chevron-right-wide"
-              size="medium"
-              icon-view-box="0 0 24 24"
-              class="tw-my-4"
-              target="_blank"
-              rel="noopener noreferrer"
-              :url="brandPageUrl"
-              :full-width="isMobile"
-              @on-click="onBrandPageUrlClick"
-            />
-          </div>
-          <div v-if="showUpsellRotationContainer" class="tw-border-t tw-border-solid tw-border-grayscale-500 tw-p-5">
+        <PublishWhenNoDomainsView
+          v-if="isNotPublished && !hasPurchasedDomains"
+          :brand-page-base-url="brandPageBaseUrl"
+          :brand-page-slug="brandPageSlug"
+          :slug-validation-error="slugValidationError"
+          :error-message="errorMessage"
+          :publish-error-message="publishErrorMessage"
+          :is-publishing="isPublishing"
+          :is-design-com="isDesignCom"
+          :brand-page-type="brandPageType"
+          @on-slug-changed="onSlugChanged"
+          @internal-publish-brand-page="onInternalPublishBrandPage"
+        >
+          <template #recommended>
+            <slot name="recommended" />
+          </template>
+        </PublishWhenNoDomainsView>
+        <PublishWhenHasDomainsView
+          v-if="isNotPublished && showRadioButtons && hasPurchasedDomains"
+          :radio-value="radioValue"
+          :domains="domains"
+          :brand-page-base-url="brandPageBaseUrl"
+          :brand-page-slug="brandPageSlug"
+          :custom-domain="customDomain"
+          :slug-validation-error="slugValidationError"
+          :error-message="errorMessage"
+          :publish-error-message="publishErrorMessage"
+          :is-publishing="isPublishing"
+          :is-design-com="isDesignCom"
+          :brand-page-type="brandPageType"
+          @close-modal="onCloseModal"
+          @on-slug-changed="onSlugChanged"
+          @radio-button-changed="onRadioButtonChanged"
+          @on-select-domain="onSelectDomain"
+          @internal-publish-brand-page="onInternalPublishBrandPage"
+        />
+        <SetUrlView
+          v-if="isSlugEditMode"
+          :brand-page-base-url="brandPageBaseUrl"
+          :brand-page-slug="brandPageSlug"
+          :slug-validation-error="slugValidationError"
+          :error-message="errorMessage"
+          :publish-error-message="publishErrorMessage"
+          :is-publishing="isPublishing"
+          :is-design-com="isDesignCom"
+          :brand-page-type="brandPageType"
+          @close-modal="onCloseModal"
+          @on-slug-changed="onSlugChanged"
+          @internal-publish-brand-page="onInternalPublishBrandPage"
+        />
+        <PublishedView
+          v-if="!isNotPublished && !isSlugEditMode"
+          :brand-page-url="brandPageUrl"
+          :is-design-com="isDesignCom"
+          :show-upsell-rotation="showUpsellRotation"
+          :is-subsequent-publish="isSubsequentPublish"
+          :search-text="searchText"
+          :brand-page-display-name="brandPageDisplayName"
+          :has-purchased-domain="hasPurchasedDomains"
+          :show-upsell-rotation-container="showUpsellRotationContainer"
+          :user-currency="userCurrency"
+          @copy-url-clicked="onCopyUrlClick"
+          @on-brand-page-url-click="onBrandPageUrlClick"
+          @on-view-more-domains="onViewMore"
+          @on-buy-now-clicked="onBuyNowClick"
+          @on-search-text-changed="onSearchTextChanged"
+        >
+          <template #upsellContainer>
             <slot name="upsellContainer" />
-          </div>
-        </div>
+          </template>
+        </PublishedView>
       </template>
     </Modal>
     <SellDomainNameListModal
@@ -253,41 +119,32 @@
 </template>
 <script>
 import Modal from '../../../atoms/components/Modal/Modal.vue';
-import PublishBrandPageCard from './PublishBrandPageCard.vue';
-import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
-import Dropdown from '../../../atoms/components/Dropdown/Dropdown.vue';
-import DropdownItem from '../../../atoms/components/Dropdown/DropdownItem.vue';
-import Button from '../../../atoms/components/Button/Button.vue';
-import TextCopyField from '../../../atoms/components/TextCopyField/TextCopyField.vue';
-
-import SellDomainNameSearchWithResults from '../SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue';
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import Events, { sitePublishedModal } from '../../constants/event-constants';
 import mediaQueryMixin from '../../mixins/mediaQueryMixin';
 import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
+import PublishedView from './views/PublishedView.vue';
+import SetUrlView from './views/SetUrlView.vue';
+import PublishWhenNoDomainsView from './views/PublishWhenNoDomainsView.vue';
+import PublishWhenHasDomainsView from './views/PublishWhenHasDomainsView.vue';
 
 const DOMAIN_TYPES = {
   slug: 'slug',
   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';
 const WEBSITE_FRIENDLY_NAME = 'Website';
 export const DIGITAL_BUSINESS_CARD = 'Digital Business Card';
 
 export default {
   components: {
     Modal,
-    TextInput,
-    Dropdown,
-    DropdownItem,
-    Button,
-    TextCopyField,
-    SellDomainNameSearchWithResults,
     SellDomainNameListModal,
-    PublishBrandPageCard,
+    PublishedView,
+    SetUrlView,
+    PublishWhenNoDomainsView,
+    PublishWhenHasDomainsView,
   },
   mixins: [mediaQueryMixin],
   props: {
@@ -423,31 +280,19 @@ export default {
   emits: [
     'close-modal',
     'radio-button-changed',
-    'copy-url-click',
+    'copy-url-clicked',
     'internal-publish-brand-page',
     'on-select-domain',
     'on-brand-page-url-click',
     'on-view-more-domains',
     'on-slug-changed',
+    'on-show-domain-modal',
   ],
   setup() {
     return {
       publishBrandPageModalTr,
       sitePublishedLabel: publishBrandPageModalTr('sitePublishedLabel'),
-      freePublishCardTitleLabel: publishBrandPageModalTr('freePublishCardTitleLabel'),
-      freePublishCardDescriptionLabel: publishBrandPageModalTr('freePublishCardDescriptionLabel'),
-      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
-      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
-      freeDomainLabel: publishBrandPageModalTr('freeDomainLabel'),
-      purchasedDomainLabel: publishBrandPageModalTr('purchasedDomainLabel'),
-      setUrlLabel: publishBrandPageModalTr('setUrlLabel'),
-      publishLabel: publishBrandPageModalTr('publishLabel'),
-      viewMoreDomainLabel: publishBrandPageModalTr('viewMoreDomainLabel'),
-      copyLabel: publishBrandPageModalTr('copyLabel'),
-      copySuccessLabel: publishBrandPageModalTr('copySuccessLabel'),
-      hasAlreadyPurchasedDomainCloseButtonLabel: publishBrandPageModalTr('hasAlreadyPurchasedDomainCloseButtonLabel'),
       publishedSuccessDescriptionLabel: publishBrandPageModalTr('publishedSuccessDescriptionLabel'),
-      selectDomainDropdownPlaceholder: publishBrandPageModalTr('selectDomainDropdownPlaceholder'),
     };
   },
   data() {
@@ -466,9 +311,6 @@ export default {
     };
   },
   computed: {
-    brandPageBaseUrlWithoutHttps() {
-      return this.brandPageBaseUrl.replace('https://', '');
-    },
     firstTimePublishHeaderLabel() {
       const translatedBrandPageName = this.getLanguageAwareBrandPageDisplayName(this.brandPageDisplayName);
       return this.publishBrandPageModalTr('firstTimePublishHeaderLabel', {
@@ -480,43 +322,15 @@ export default {
         brandPageDisplayName: this.brandPageDisplayName,
       });
     },
-    viewMyWebsiteLabel() {
-      return this.publishBrandPageModalTr('viewMyWebsiteLabel', {
-        brandPageDisplayName: this.brandPageDisplayName,
-      });
-    },
-    allowPublish() {
-      if (this.domainTypeValue === DOMAIN_TYPES.slug) {
-        return this.internalSlug && !this.slugValidationError;
-      }
-      return this.selectedCustomDomain;
-    },
     hasPurchasedDomains() {
       return this.domains && this.domains.length > 0;
     },
-    slugErrorMessage() {
-      return this.slugValidationError ? this.slugValidationError : this.publishErrorMessage;
-    },
     isNotPublished() {
       return !this.isPublished || !this.shouldPublish;
     },
     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'
-        ? this.slugInputPlaceholderYourNameLabel
-        : this.slugInputPlaceholderYourBusinessNameLabel;
-    },
     showUpsellRotationContainer() {
       if (!this.isSubsequentPublish) {
         return false;
@@ -553,28 +367,10 @@ export default {
           return brandPageName;
       }
     },
-    onDomainTypeRadioButtonClick(domain) {
-      this.domainTypeValue = domain;
-      this.closePurchasedDomainDropdown();
-      this.$emit('radio-button-changed', domain);
-    },
     onCloseModal() {
       this.$emit('close-modal');
       this.$emit('on-hide-domain-modal');
     },
-    onCopyUrlClick() {
-      this.$emit('copy-url-clicked');
-    },
-    onSlugChanged(e) {
-      this.searchText = e;
-      this.$emit('on-slug-changed', e);
-    },
-    onPublish() {
-      this.$emit('internal-publish-brand-page', this.internalSlug, this.selectedCustomDomain);
-    },
-    onBrandPageUrlClick() {
-      this.$emit('on-brand-page-url-click');
-    },
     onViewMore() {
       this.$emit('on-show-domain-modal');
       if (this.searchText) {
@@ -585,22 +381,29 @@ export default {
       this.searchText = val;
       this.$emit('on-change-search', val);
     },
-    onSelectPurchasedDomain(newVal) {
-      this.selectedCustomDomain = newVal;
+    onSellDomainNameListCloseModal() {
+      this.$emit('on-hide-domain-modal');
+    },
+    onSlugChanged(e) {
+      this.$emit('on-slug-changed', e);
+    },
+    onInternalPublishBrandPage(slug, customdomain) {
+      this.$emit('internal-publish-brand-page', slug, customdomain);
+    },
+    onRadioButtonChanged(domain) {
+      this.$emit('radio-button-changed', domain);
+    },
+    onSelectDomain(newVal) {
       this.$emit('on-select-domain', newVal);
-      this.closePurchasedDomainDropdown();
     },
-
-    closePurchasedDomainDropdown() {
-      if (this.$refs.dropdown?.hideMenu) {
-        this.$refs.dropdown.hideMenu();
-      }
+    onCopyUrlClick(newVal) {
+      this.$emit('copy-url-clicked', newVal);
     },
-    onSellDomainNameListCloseModal() {
-      this.$emit('on-hide-domain-modal');
+    onBrandPageUrlClick(newVal) {
+      this.$emit('on-brand-page-url-click', newVal);
     },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-clicked');
+    onBuyNow(newVal) {
+      this.$emit('on-buy-now-clicked', newVal);
     },
     async searchDomainName(isUserTriggered) {
       this.isLoading = true;