@designcrowd/fe-shared-lib 1.6.3 → 1.6.4-ast-dbc-1

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/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-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/experiences/components/SideNavigationPanel/SideNavigationPanel.vue

@@ -2,7 +2,16 @@
   <!-- Side Navigation Component following these figma designs: https://www.figma.com/design/UUZ56EQZbb1Ua9NBMm6Rt5/DCOM---My-Account-Left-Nav -->
   <div class="sidebar">
     <div class="menu tw-mb-4">
-      <MenuCta class="tw-mt-2 tw-mb-4" label="Create New Design" variant="primary" icon="plus" icon-size="xs" />
+      <MenuCta
+        v-if="createNewDesignCta"
+        class="tw-mt-2 tw-mb-4"
+        :label="createNewDesignCta.label"
+        :url="createNewDesignCta.url"
+        :action="createNewDesignCta.action"
+        variant="primary"
+        icon="plus"
+        icon-size="xs"
+      />
       <div class="menuitemcontainer">
         <MenuItem
           v-for="item in menuItems"
@@ -15,8 +24,21 @@
       </div>
     </div>
     <div class="ctas tw-flex tw-flex-col tw-gap-2">
-      <MenuCta label="Upgrade" variant="secondary" icon="crown" icon-size="sm" />
-      <MenuCta label="Rate Design.com" variant="empty" />
+      <MenuCta
+        v-if="upgradeCta"
+        :label="upgradeCta.label"
+        :url="upgradeCta.url"
+        :action="upgradeCta.action"
+        variant="secondary"
+        icon="crown"
+        icon-size="sm"
+      />
+      <MenuCta
+        v-if="rateCta"
+        :label="rateCta.label"
+        :action="rateCta.action"
+        variant="empty"
+      />
     </div>
   </div>
 </template>
@@ -25,15 +47,29 @@ import MenuCta from './MenuCta.vue';
 import MenuItem from './MenuItem.vue';
 import type { IMenuItem } from './types';
 
+interface CtaConfig {
+  label: string;
+  url?: string;
+  action?: () => void;
+}
+
 defineProps({
   menuItems: {
     type: Array<IMenuItem>,
     required: true,
   },
   createNewDesignCta: {
-    type: Object,
+    type: Object as () => CtaConfig,
     required: true,
   },
+  upgradeCta: {
+    type: Object as () => CtaConfig | undefined,
+    default: undefined,
+  },
+  rateCta: {
+    type: Object as () => CtaConfig | undefined,
+    default: undefined,
+  },
 });
 </script>
 <style scoped>