@designcrowd/fe-shared-lib 1.4.7-jj-1 → 1.4.7-jj-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.4.7-jj-1",
+  "version": "1.4.7-jj-3",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

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

@@ -87,6 +87,35 @@ export const PublishWithSelectedDomain = () => {
 
 PublishWithSelectedDomain.loaders = [loadTranslationAsync];
 
+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"
+      />
+    `,
+  };
+};
+
+SetSlug.loaders = [loadTranslationAsync];
+
 export const Published = () => {
   return {
     components: {

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

@@ -40,6 +40,8 @@
           :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" />
@@ -58,26 +60,26 @@
           :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"
         />
-        <!-- <InitialPublishView
-          v-if="isNotPublished || isSlugEditMode"
-          :radio-value="radioValue"
-          :domains="domains"
+        <SetUrlView
+          v-if="isSlugEditMode"
           :brand-page-base-url="brandPageBaseUrl"
           :brand-page-slug="brandPageSlug"
-          :custom-domain="customDomain"
           :slug-validation-error="slugValidationError"
-          :brand-page-display-name="brandPageDisplayName"
           :error-message="errorMessage"
           :publish-error-message="publishErrorMessage"
-          :is-published="isPublished"
           :is-publishing="isPublishing"
-          :should-publish="shouldPublish"
           :is-design-com="isDesignCom"
-          :show-radio-buttons="showRadioButtons"
-          :is-brand-page-slug-edit-mode="isBrandPageSlugEditMode"
           :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"
@@ -89,10 +91,10 @@
           :has-purchased-domain="hasPurchasedDomains"
           :show-upsell-rotation-container="showUpsellRotationContainer"
           :user-currency="userCurrency"
-          @copy-url-clicked="$emit('copy-url-clicked')"
-          @on-brand-page-url-click="$emit('on-brand-page-url-click')"
+          @copy-url-clicked="onCopyUrlClick"
+          @on-brand-page-url-click="onBrandPageUrlClick"
           @on-view-more-domains="onViewMore"
-          @on-buy-now-clicked="$emit('on-buy-now-clicked')"
+          @on-buy-now-clicked="onBuyNowClick"
           @on-search-text-changed="onSearchTextChanged"
         />
       </template>
@@ -119,7 +121,7 @@ import Events, { sitePublishedModal } from '../../constants/event-constants';
 import mediaQueryMixin from '../../mixins/mediaQueryMixin';
 import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
 import PublishedView from './views/PublishedView.vue';
-// import InitialPublishView from './views/InitialPublishView.vue';
+import SetUrlView from './views/SetUrlView.vue';
 import PublishWhenNoDomainsView from './views/PublishWhenNoDomainsView.vue';
 import PublishWhenHasDomainsView from './views/PublishWhenHasDomainsView.vue';
 
@@ -136,7 +138,7 @@ export default {
     Modal,
     SellDomainNameListModal,
     PublishedView,
-    // InitialPublishView,
+    SetUrlView,
     PublishWhenNoDomainsView,
     PublishWhenHasDomainsView,
   },
@@ -378,6 +380,27 @@ export default {
     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);
+    },
+    onCopyUrlClick(newVal) {
+      this.$emit('copy-url-clicked', newVal);
+    },
+    onBrandPageUrlClick(newVal) {
+      this.$emit('on-brand-page-url-click', newVal);
+    },
+    onBuyNow(newVal) {
+      this.$emit('on-buy-now-clicked', newVal);
+    },
     async searchDomainName(isUserTriggered) {
       this.isLoading = true;
       let searchSlug = '';

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'tw-mb-8': true }">
+  <div>
     <div class="tw-mt-4">
       <PublishBrandPageCard
         :img-url="iconUrl"
@@ -161,7 +161,7 @@ export default {
       this.$emit('on-slug-changed', e);
     },
     onPublish() {
-      this.$emit('internal-publish-brand-page', this.internalSlug, undefined);
+      this.$emit('internal-publish-brand-page', this.internalSlug);
     },
   },
 };

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

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div class="tw-mt-4">
+      <div>
+        <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 class="tw-font-sans tw-text-center" :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''">
+      <Button
+        :label="setUrlLabel"
+        :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>
+</template>
+<script>
+import TextInput from '../../../../atoms/components/TextInput/TextInput.vue';
+import Button from '../../../../atoms/components/Button/Button.vue';
+import mediaQueryMixin from '../../../mixins/mediaQueryMixin';
+import { publishBrandPageModalTr } from '../../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    TextInput,
+    Button,
+  },
+  mixins: [mediaQueryMixin],
+  props: {
+    brandPageBaseUrl: {
+      type: String,
+      required: true,
+      default: undefined,
+    },
+    brandPageSlug: {
+      type: String,
+      required: true,
+      default: undefined,
+    },
+    slugValidationError: {
+      type: String,
+      required: true,
+      default: undefined,
+    },
+    errorMessage: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    publishErrorMessage: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    isPublishing: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    brandPageType: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  emits: ['close-modal', 'internal-publish-brand-page', 'on-slug-changed'],
+  setup() {
+    return {
+      publishBrandPageModalTr,
+      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
+      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
+      setUrlLabel: publishBrandPageModalTr('setUrlLabel'),
+      hasAlreadyPurchasedDomainCloseButtonLabel: publishBrandPageModalTr('hasAlreadyPurchasedDomainCloseButtonLabel'),
+    };
+  },
+  data() {
+    return {
+      domainTypeValue: this.radioValue,
+      internalSlug: this.brandPageSlug,
+    };
+  },
+  computed: {
+    brandPageBaseUrlWithoutHttps() {
+      return this.brandPageBaseUrl.replace('https://', '');
+    },
+    allowPublish() {
+      return this.internalSlug && !this.slugValidationError;
+    },
+    slugErrorMessage() {
+      return this.slugValidationError ? this.slugValidationError : this.publishErrorMessage;
+    },
+    isInputEnabled() {
+      return this.isPublishing;
+    },
+    isPublishingDisabled() {
+      return !this.allowPublish || this.isPublishing;
+    },
+    getPlaceHolder() {
+      return this.brandPageType === 'brandContact'
+        ? this.slugInputPlaceholderYourNameLabel
+        : this.slugInputPlaceholderYourBusinessNameLabel;
+    },
+  },
+  watch: {
+    brandPageSlug(slug) {
+      this.internalSlug = slug;
+    },
+  },
+  mounted() {
+    this.internalSlug = this.brandPageSlug;
+  },
+  methods: {
+    onCloseModal() {
+      this.$emit('close-modal');
+    },
+    onSlugChanged(e) {
+      this.$emit('on-slug-changed', e);
+    },
+    onPublish() {
+      this.$emit('internal-publish-brand-page', this.internalSlug, undefined);
+    },
+  },
+};
+</script>

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

@@ -1,323 +0,0 @@
-<template>
-  <div :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">
-      <div v-if="hasPurchasedDomains">
-        <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>
-    </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>
-</template>
-<script>
-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 mediaQueryMixin from '../../../mixins/mediaQueryMixin';
-import { publishBrandPageModalTr } from '../../../../useSharedLibTranslate';
-
-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';
-
-export default {
-  components: {
-    TextInput,
-    Dropdown,
-    DropdownItem,
-    Button,
-  },
-  mixins: [mediaQueryMixin],
-  props: {
-    radioValue: {
-      type: String,
-      required: true,
-      default: DOMAIN_TYPES.slug,
-    },
-    domains: {
-      type: Array,
-      required: true,
-      default: undefined,
-    },
-    brandPageBaseUrl: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-    brandPageSlug: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-    customDomain: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    slugValidationError: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-    brandPageDisplayName: {
-      type: String,
-      required: true,
-      default: undefined,
-    },
-    errorMessage: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    publishErrorMessage: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    isPublished: {
-      type: Boolean,
-      required: true,
-    },
-    isPublishing: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    shouldPublish: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    isDesignCom: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    showRadioButtons: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    isBrandPageSlugEditMode: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    brandPageType: {
-      type: String,
-      required: true,
-      default: '',
-    },
-  },
-  emits: ['close-modal', 'radio-button-changed', 'internal-publish-brand-page', 'on-select-domain', 'on-slug-changed'],
-  setup() {
-    return {
-      publishBrandPageModalTr,
-      freePublishCardTitleLabel: publishBrandPageModalTr('freePublishCardTitleLabel'),
-      freePublishCardDescriptionLabel: publishBrandPageModalTr('freePublishCardDescriptionLabel'),
-      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
-      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
-      freeDomainLabel: publishBrandPageModalTr('freeDomainLabel'),
-      purchasedDomainLabel: publishBrandPageModalTr('purchasedDomainLabel'),
-      setUrlLabel: publishBrandPageModalTr('setUrlLabel'),
-      publishLabel: publishBrandPageModalTr('publishLabel'),
-      hasAlreadyPurchasedDomainCloseButtonLabel: publishBrandPageModalTr('hasAlreadyPurchasedDomainCloseButtonLabel'),
-      selectDomainDropdownPlaceholder: publishBrandPageModalTr('selectDomainDropdownPlaceholder'),
-    };
-  },
-  data() {
-    return {
-      DOMAIN_TYPES,
-      domainTypeValue: this.radioValue,
-      internalSlug: this.brandPageSlug,
-      selectedCustomDomain: this.customDomain,
-    };
-  },
-  computed: {
-    brandPageBaseUrlWithoutHttps() {
-      return this.brandPageBaseUrl.replace('https://', '');
-    },
-    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;
-    },
-  },
-  watch: {
-    brandPageSlug(slug) {
-      this.internalSlug = slug;
-    },
-    customDomain(val) {
-      this.selectedCustomDomain = val;
-    },
-  },
-  mounted() {
-    this.internalSlug = this.brandPageSlug;
-  },
-  methods: {
-    onDomainTypeRadioButtonClick(domain) {
-      this.domainTypeValue = domain;
-      this.closePurchasedDomainDropdown();
-      this.$emit('radio-button-changed', domain);
-    },
-    onCloseModal() {
-      this.$emit('close-modal');
-    },
-    onSlugChanged(e) {
-      this.$emit('on-slug-changed', e);
-    },
-    onPublish() {
-      this.$emit('internal-publish-brand-page', this.internalSlug, this.selectedCustomDomain);
-    },
-    onSelectPurchasedDomain(newVal) {
-      this.selectedCustomDomain = newVal;
-      this.$emit('on-select-domain', newVal);
-      this.closePurchasedDomainDropdown();
-    },
-    closePurchasedDomainDropdown() {
-      if (this.$refs.dropdown?.hideMenu) {
-        this.$refs.dropdown.hideMenu();
-      }
-    },
-  },
-};
-</script>