@designcrowd/fe-shared-lib 1.6.4-ast-website-rename-1 → 1.6.4-ast-dbc-2

package/index.js

@@ -23,7 +23,6 @@ export { WEBSITE_UPGRADE_CONTEXT_TYPES } from './src/experiences/models/websiteC
 
 export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
 
-export { default as BrandNameEditor } from './src/atoms/components/BrandNameEditor/BrandNameEditor.vue';
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
 export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.6.4-ast-website-rename-1",
+  "version": "1.6.4-ast-dbc-2",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/bundles/bundled-translations.json

@@ -34,7 +34,8 @@
     "websiteFriendlyName": "Website",
     "digitalBusinessCardFriendlyName": "Digital Business Card",
     "alreadyHaveADomainLabel": "Already have a domain?",
-    "useExistingDomainLabel": "Use my existing domain"
+    "useExistingDomainLabel": "Use my existing domain",
+    "createTeamCardsLabel": "Create Team Cards"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Free Domain",

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.de-DE.json

@@ -1,11 +1,11 @@
 {
-  "sharedPaymentConfig": {
-    "onboardingIncomplete": "Das Onboarding wurde noch nicht abgeschlossen.",
-    "pendingVerification": "Ausstehende Verifizierung",
-    "connected": "Verbunden",
-    "inactive": "Inaktiv",
-    "addPaymentProvider": "Zahlungsanbieter hinzufügen",
-    "deletePaymentMethod": "Zahlungsmethode löschen",
-    "currencyLabel": "Währung"
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Das Onboarding wurde noch nicht abgeschlossen.",
+    "pendingVerification" : "Ausstehende Verifizierung",
+    "connected" : "Verbunden",
+    "inactive" : "Inaktiv",
+    "addPaymentProvider" : "Zahlungsanbieter hinzufügen",
+    "deletePaymentMethod" : "Zahlungsmethode löschen",
+    "currencyLabel" : "Währung"
   }
 }

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.es-ES.json

@@ -1,11 +1,11 @@
 {
-  "sharedPaymentConfig": {
-    "onboardingIncomplete": "Incorporación incompleta",
-    "pendingVerification": "Pendiente de verificación",
-    "connected": "Conectado",
-    "inactive": "Inactivo",
-    "addPaymentProvider": "Añadir proveedor de pago",
-    "deletePaymentMethod": "Eliminar método de pago",
-    "currencyLabel": "Moneda"
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Incorporación incompleta",
+    "pendingVerification" : "Pendiente de verificación",
+    "connected" : "Conectado",
+    "inactive" : "Inactivo",
+    "addPaymentProvider" : "Añadir proveedor de pago",
+    "deletePaymentMethod" : "Eliminar método de pago",
+    "currencyLabel" : "Moneda"
   }
 }

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.fr-CA.json

@@ -1,11 +1,11 @@
 {
-  "sharedPaymentConfig": {
-    "onboardingIncomplete": "Inscription incomplète",
-    "pendingVerification": "Vérification en attente",
-    "connected": "Connecté",
-    "inactive": "Inactif",
-    "addPaymentProvider": "Ajouter un fournisseur de paiement",
-    "deletePaymentMethod": "Supprimer le mode de paiement",
-    "currencyLabel": "Devise"
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Inscription incomplète",
+    "pendingVerification" : "Vérification en attente",
+    "connected" : "Connecté",
+    "inactive" : "Inactif",
+    "addPaymentProvider" : "Ajouter un fournisseur de paiement",
+    "deletePaymentMethod" : "Supprimer le mode de paiement",
+    "currencyLabel" : "Devise"
   }
 }

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.fr-FR.json

@@ -1,11 +1,11 @@
 {
-  "sharedPaymentConfig": {
-    "onboardingIncomplete": "Inscription incomplète",
-    "pendingVerification": "Vérification en attente",
-    "connected": "Connecté",
-    "inactive": "Inactif",
-    "addPaymentProvider": "Ajouter un fournisseur de paiement",
-    "deletePaymentMethod": "Supprimer le mode de paiement",
-    "currencyLabel": "Devise"
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Inscription incomplète",
+    "pendingVerification" : "Vérification en attente",
+    "connected" : "Connecté",
+    "inactive" : "Inactif",
+    "addPaymentProvider" : "Ajouter un fournisseur de paiement",
+    "deletePaymentMethod" : "Supprimer le mode de paiement",
+    "currencyLabel" : "Devise"
   }
 }

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.pt-BR.json

@@ -1,11 +1,11 @@
 {
-  "sharedPaymentConfig": {
-    "onboardingIncomplete": "Integração incompleta",
-    "pendingVerification": "Verificação Pendente",
-    "connected": "Conectado",
-    "inactive": "Inativo",
-    "addPaymentProvider": "Adicionar fornecedor de pagamentos",
-    "deletePaymentMethod": "Excluir método de pagamento",
-    "currencyLabel": "Moeda"
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Integração incompleta",
+    "pendingVerification" : "Verificação Pendente",
+    "connected" : "Conectado",
+    "inactive" : "Inativo",
+    "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
+    "deletePaymentMethod" : "Excluir método de pagamento",
+    "currencyLabel" : "Moeda"
   }
 }

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.pt-PT.json

@@ -1,11 +1,11 @@
 {
-  "sharedPaymentConfig": {
-    "onboardingIncomplete": "Integração incompleta",
-    "pendingVerification": "Verificação Pendente",
-    "connected": "Ligado",
-    "inactive": "Inativo",
-    "addPaymentProvider": "Adicionar fornecedor de pagamentos",
-    "deletePaymentMethod": "Eliminar método de pagamento",
-    "currencyLabel": "Moeda"
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Integração incompleta",
+    "pendingVerification" : "Verificação Pendente",
+    "connected" : "Ligado",
+    "inactive" : "Inativo",
+    "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
+    "deletePaymentMethod" : "Eliminar método de pagamento",
+    "currencyLabel" : "Moeda"
   }
 }

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

@@ -92,11 +92,13 @@
           :has-purchased-domain="hasPurchasedDomains"
           :show-upsell-rotation-container="showUpsellRotationContainer"
           :user-currency="userCurrency"
+          :brand-page-type="brandPageType"
           @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"
+          @on-create-team-cards-click="onCreateTeamCardsClick"
         >
           <template #upsellContainer>
             <slot name="upsellContainer" />
@@ -289,6 +291,7 @@ export default {
     'on-slug-changed',
     'on-show-domain-modal',
     'on-use-existing-domain',
+    'on-create-team-cards-click',
   ],
   setup() {
     return {
@@ -407,6 +410,9 @@ export default {
     onBrandPageUrlClick(newVal) {
       this.$emit('on-brand-page-url-click', newVal);
     },
+    onCreateTeamCardsClick() {
+      this.$emit('on-create-team-cards-click');
+    },
     onBuyNow(newVal) {
       this.$emit('on-buy-now-clicked', newVal);
     },

package/src/experiences/components/PublishBrandPageModal/i18n/publish-brand-page-modal.json

@@ -21,6 +21,7 @@
     "websiteFriendlyName": "Website",
     "digitalBusinessCardFriendlyName": "Digital Business Card",
     "alreadyHaveADomainLabel": "Already have a domain?",
-    "useExistingDomainLabel": "Use my existing domain"
+    "useExistingDomainLabel": "Use my existing domain",
+    "createTeamCardsLabel": "Create Team Cards"
   }
 }

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

@@ -24,19 +24,28 @@
         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 class="tw-flex tw-flex-col sm:tw-flex-row tw-items-center tw-justify-center tw-gap-4 tw-my-4">
+        <Button
+          v-if="brandPageType === 'brandContact'"
+          :label="createTeamCardsLabel"
+          variant="outline"
+          :size="isDesignCom ? 'medium' : 'large'"
+          :full-width="isMobile"
+          @on-click="onCreateTeamCardsClick"
+        />
+        <Button
+          :label="viewMyWebsiteLabel"
+          :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
+          icon="chevron-right-wide"
+          size="medium"
+          icon-view-box="0 0 24 24"
+          target="_blank"
+          rel="noopener noreferrer"
+          :url="brandPageUrl"
+          :full-width="isMobile"
+          @on-click="onBrandPageUrlClick"
+        />
+      </div>
     </div>
     <div v-if="showUpsellRotationContainer" class="tw-border-t tw-border-solid tw-border-grayscale-500 tw-p-5">
       <slot name="upsellContainer" />
@@ -105,6 +114,11 @@ export default {
       required: true,
       default: undefined,
     },
+    brandPageType: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   emits: [
     'copy-url-clicked',
@@ -112,6 +126,7 @@ export default {
     'on-view-more-domains',
     'on-buy-now-clicked',
     'on-search-text-changed',
+    'on-create-team-cards-click',
   ],
   setup() {
     return {
@@ -119,6 +134,7 @@ export default {
       publishBrandPageModalTr,
       copyLabel: publishBrandPageModalTr('copyLabel'),
       copySuccessLabel: publishBrandPageModalTr('copySuccessLabel'),
+      createTeamCardsLabel: publishBrandPageModalTr('createTeamCardsLabel'),
     };
   },
   computed: {
@@ -144,6 +160,9 @@ export default {
     onBuyNowClick() {
       this.$emit('on-buy-now-clicked');
     },
+    onCreateTeamCardsClick() {
+      this.$emit('on-create-team-cards-click');
+    },
   },
 };
 </script>

package/src/atoms/components/BrandNameEditor/BrandNameEditor.stories.js

@@ -1,75 +0,0 @@
-import BrandNameEditor from './BrandNameEditor.vue';
-
-export default {
-  title: 'Components/Brand Name Editor',
-  component: BrandNameEditor,
-};
-
-const data = {
-  components: {
-    BrandNameEditor,
-  },
-  data() {
-    return {
-      value: 'My Website',
-    };
-  },
-};
-
-export const Default = () => {
-  return {
-    ...data,
-    template: `
-      <div class="tw-bg-gray-800 tw-p-4">
-        <BrandNameEditor v-model="value" />
-      </div>
-    `,
-  };
-};
-
-export const DarkMode = () => {
-  return {
-    ...data,
-    template: `
-      <div class="tw-bg-gray-800 tw-p-4">
-        <BrandNameEditor v-model="value" :dark-mode="true" />
-      </div>
-    `,
-  };
-};
-
-export const WithPlaceholder = () => {
-  return {
-    components: {
-      BrandNameEditor,
-    },
-    data() {
-      return {
-        value: '',
-      };
-    },
-    template: `
-      <div class="tw-bg-gray-800 tw-p-4">
-        <BrandNameEditor v-model="value" :dark-mode="true" placeholder="Enter website name..." />
-      </div>
-    `,
-  };
-};
-
-export const Empty = () => {
-  return {
-    components: {
-      BrandNameEditor,
-    },
-    data() {
-      return {
-        value: '',
-      };
-    },
-    template: `
-      <div class="tw-bg-gray-800 tw-p-4">
-        <BrandNameEditor v-model="value" />
-      </div>
-    `,
-  };
-};

package/src/atoms/components/BrandNameEditor/BrandNameEditor.vue

@@ -1,150 +0,0 @@
-<template>
-  <div
-    data-component="brand-name-editor"
-    class="tw-relative tw-flex tw-flex-grow tw-items-center tw-gap-2"
-    :class="{
-      'tw-text-white': darkMode,
-      'tw-text-black': !darkMode,
-      'tw-uppercase': uppercase,
-    }"
-  >
-    <div
-      v-if="displayMode"
-      class="dynamic-width-input tw-cursor-pointer tw-font-bold"
-      :class="{ 'tw-normal-case': uppercase && !!modelValue?.trim() }"
-      @click="onEditClick"
-    >
-      {{ modelValue?.trim() || templateTypeName || placeholder }}
-    </div>
-    <input
-      v-if="!displayMode"
-      ref="brandNameInput"
-      :value="modelValue"
-      type="text"
-      :maxlength="maxLength"
-      class="dynamic-width-input tw-px-2 tw-border-white"
-      :class="{
-        'focus:tw-shadow-md': darkMode,
-        'tw-normal-case': uppercase,
-      }"
-      :placeholder="placeholder"
-      @input="onInput"
-      @blur="save"
-      @focus="focus"
-      @keyup.enter="($event.target as HTMLInputElement).blur()"
-      @keyup.esc="revert"
-    />
-    <span
-      ref="textWidthSpan"
-      class="tw-absolute tw-invisible tw-max-w-full -tw-z-50 tw-top-4 tw-left-4 tw-whitespace-nowrap tw-pointer-events-none dynamic-width-input"
-    >
-      {{ modelValue.replace(/ /g, '&nbsp;') }}
-    </span>
-    <Button
-      class="tw-flex tw-items-center"
-      icon="Edit"
-      variant="no-border"
-      :white="darkMode"
-      icon-size="sm"
-      @on-click="onPencilIconClick"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted } from 'vue';
-import Button from '../Button/Button.vue';
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: string;
-    darkMode?: boolean;
-    placeholder?: string;
-    maxLength?: number;
-    templateTypeName?: string;
-    uppercase?: boolean;
-  }>(),
-  {
-    darkMode: false,
-    placeholder: '',
-    maxLength: 100,
-    templateTypeName: '',
-    uppercase: false,
-  },
-);
-
-const emit = defineEmits<{
-  'update:model-value': [value: string];
-  save: [];
-}>();
-
-const brandNameInput = ref<HTMLInputElement | null>(null);
-const textWidthSpan = ref<HTMLSpanElement | null>(null);
-const displayMode = ref(true);
-const revertValue = ref(props.modelValue);
-const inputOffsetPx = 22;
-
-function resizeInput() {
-  nextTick(() => {
-    if (props.modelValue && brandNameInput.value && textWidthSpan.value) {
-      brandNameInput.value.style.width = `${textWidthSpan.value.offsetWidth + inputOffsetPx}px`;
-    } else if (brandNameInput.value) {
-      brandNameInput.value.style.width = 'auto';
-    }
-  });
-}
-
-watch(() => displayMode.value, resizeInput);
-watch(() => props.modelValue, resizeInput);
-
-onMounted(() => {
-  nextTick(() => {
-    revertValue.value = props.modelValue;
-    resizeInput();
-  });
-});
-
-function focus() {
-  displayMode.value = false;
-}
-
-function save() {
-  displayMode.value = true;
-  if (props.modelValue.trim() === '' || props.modelValue !== revertValue.value) {
-    emit('save');
-    revertValue.value = props.modelValue;
-  }
-}
-
-function revert() {
-  emit('update:model-value', revertValue.value);
-  brandNameInput.value?.blur();
-}
-
-function onInput(event: Event) {
-  emit('update:model-value', (event.target as HTMLInputElement).value);
-}
-
-function onEditClick() {
-  displayMode.value = !displayMode.value;
-  if (!displayMode.value) {
-    nextTick(() => {
-      brandNameInput.value?.focus();
-    });
-  }
-}
-
-function onPencilIconClick() {
-  onEditClick();
-}
-</script>
-<style scoped>
-.dynamic-width-input {
-  @apply tw-border tw-bg-transparent tw-outline-none tw-truncate tw-rounded tw-w-auto tw-my-auto tw-text-base tw-text-white tw-max-w-xs;
-}
-
-input.dynamic-width-input:focus {
-  -webkit-box-shadow: 0 0 5px #d1d1d1;
-  box-shadow: 0 0 5px #d1d1d1;
-}
-</style>