@designcrowd/fe-shared-lib 1.5.0-jj-4 → 1.5.0

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

@@ -1,7 +1,7 @@
 <template>
   <div class="publish-bp--container">
     <Modal
-      classes="publish-bp--modal tw-p-4"
+      classes="publish-bp--modal tw-pt-4"
       close-on-esc
       :visible="visible"
       :hide-scrollbar="false"
@@ -30,77 +30,211 @@
         </div>
       </template>
       <template #default>
-        <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>
+        <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">
             <slot name="upsellContainer" />
-          </template>
-        </PublishedView>
+          </div>
+        </div>
       </template>
     </Modal>
     <SellDomainNameListModal
@@ -119,32 +253,41 @@
 </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,
-    PublishedView,
-    SetUrlView,
-    PublishWhenNoDomainsView,
-    PublishWhenHasDomainsView,
+    PublishBrandPageCard,
   },
   mixins: [mediaQueryMixin],
   props: {
@@ -280,19 +423,31 @@ export default {
   emits: [
     'close-modal',
     'radio-button-changed',
-    'copy-url-clicked',
+    'copy-url-click',
     '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() {
@@ -311,6 +466,9 @@ export default {
     };
   },
   computed: {
+    brandPageBaseUrlWithoutHttps() {
+      return this.brandPageBaseUrl.replace('https://', '');
+    },
     firstTimePublishHeaderLabel() {
       const translatedBrandPageName = this.getLanguageAwareBrandPageDisplayName(this.brandPageDisplayName);
       return this.publishBrandPageModalTr('firstTimePublishHeaderLabel', {
@@ -322,15 +480,43 @@ 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;
@@ -367,10 +553,28 @@ 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) {
@@ -381,29 +585,22 @@ export default {
       this.searchText = val;
       this.$emit('on-change-search', val);
     },
-    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) {
+    onSelectPurchasedDomain(newVal) {
+      this.selectedCustomDomain = newVal;
       this.$emit('on-select-domain', newVal);
+      this.closePurchasedDomainDropdown();
     },
-    onCopyUrlClick(newVal) {
-      this.$emit('copy-url-clicked', newVal);
+
+    closePurchasedDomainDropdown() {
+      if (this.$refs.dropdown?.hideMenu) {
+        this.$refs.dropdown.hideMenu();
+      }
     },
-    onBrandPageUrlClick(newVal) {
-      this.$emit('on-brand-page-url-click', newVal);
+    onSellDomainNameListCloseModal() {
+      this.$emit('on-hide-domain-modal');
     },
-    onBuyNow(newVal) {
-      this.$emit('on-buy-now-clicked', newVal);
+    onBuyNowClick() {
+      this.$emit('on-buy-now-clicked');
     },
     async searchDomainName(isUserTriggered) {
       this.isLoading = true;

package/.storybook-static/assets/Auth-CV5AmoX8.css

@@ -1 +0,0 @@
-.email-input[data-v-bb7289b6]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.password-input[data-v-bb7289b6]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-bb7289b6]{padding-left:2.5rem!important}.email-input[data-v-965d0268]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-965d0268]{padding-left:2.5rem!important}.password-input[data-v-da12bb42]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-da12bb42]{padding-left:2.5rem!important}