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

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

@@ -0,0 +1,323 @@
+<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>

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

@@ -0,0 +1,271 @@
+<template>
+  <div :class="{ 'tw-mb-8': !hasPurchasedDomains }">
+    <div class="tw-flex tw-items-center tw-mr-2 tw-mb-1" @click="onDomainTypeRadioButtonClick(DOMAIN_TYPES.slug)">
+      <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.slug"
+        :value="domainTypeValue === DOMAIN_TYPES.slug"
+      />
+      <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">{{ freeDomainLabel }}</span>
+      </label>
+    </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-mt-4">
+      <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
+          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 class="tw-font-sans tw-text-center" :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''">
+      <Button
+        :label="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',
+};
+
+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,
+    },
+    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', 'radio-button-changed', 'internal-publish-brand-page', 'on-select-domain', 'on-slug-changed'],
+  setup() {
+    return {
+      publishBrandPageModalTr,
+      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
+      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
+      freeDomainLabel: publishBrandPageModalTr('freeDomainLabel'),
+      purchasedDomainLabel: publishBrandPageModalTr('purchasedDomainLabel'),
+      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;
+    },
+    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>