@designcrowd/fe-shared-lib 1.6.0 → 1.6.1

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

@@ -1,9 +1,7 @@
-import Price from './Price.vue';
+import { defineComponent } from 'vue';
+import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
 import { currencies, locales } from './Price.fixtures';
-import { setSharedLibLocaleAsync } from "../../../useSharedLibTranslate";
-import { defineComponent } from "vue";
-
-await setSharedLibLocaleAsync();
+import Price from './Price.vue';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -11,7 +9,7 @@ export default {
   component: Price,
   args: {
     currencyName: currencies[0].name,
-    locale: locales[0]
+    locale: locales[0],
   },
   argTypes: {
     amount: {
@@ -44,6 +42,9 @@ export const Sample = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price 
@@ -76,6 +77,9 @@ export const WithFraction = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -109,6 +113,9 @@ export const AlwaysShowFractionOn = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -140,6 +147,9 @@ export const AlwaysShowFractionOff = {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -174,6 +184,9 @@ export const WithSuffix = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -210,6 +223,9 @@ export const WithLocale = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -235,12 +251,17 @@ export const AllLocalesAndCurrencies = (args, { argTypes }) => {
     data() {
       const combos = new Array(locales.length).fill(0);
       combos.forEach((item, index) => {
-        combos[index] = new Array(currencies.length).fill(0).map((item2, index2) => ({"locale": locales[index], "currency": currencies[index2]}));
-      })
+        combos[index] = new Array(currencies.length)
+          .fill(0)
+          .map((item2, index2) => ({ locale: locales[index], currency: currencies[index2] }));
+      });
       return {
         variants: combos,
       };
     },
+    async mounted() {
+      await setSharedLibLocaleAsync();
+    },
     template: `
       <StorybookPriceComponent
           :variants="variants"/>
@@ -253,20 +274,20 @@ export const AllLocalesAndCurrencies = (args, { argTypes }) => {
 };
 
 const StorybookPriceComponent = defineComponent({
-    components: {
-      Price,
+  components: {
+    Price,
+  },
+  props: {
+    variants: {
+      type: Array,
+      required: true,
     },
-    props: {
-      variants: {
-        type: Array,
-        required: true,
-      },
-      showAbbreviation: {
-        type: Boolean,
-        default: false,
-      },
+    showAbbreviation: {
+      type: Boolean,
+      default: false,
     },
-    template: `
+  },
+  template: `
     <table class="tw-w-full">
       <thead>
         <tr>
@@ -289,4 +310,4 @@ const StorybookPriceComponent = defineComponent({
       </tbody>
     </table>
   `,
-});
+});

package/src/experiences/components/AuthFlow/SignIn.vue

@@ -52,9 +52,12 @@
           >
             {{ title }}
           </h2>
-          <p v-if="description" class="tw-text-center tw-mb-6 tw-text-grayscale-600 tw-mt-0">
+          <p v-if="description && !resetPasswordDescription" class="tw-text-center tw-mb-6 tw-text-grayscale-600 tw-mt-0">
             {{ description }}
           </p>
+          <p v-if="resetPasswordDescription" class="tw-text-center tw-mb-6 tw-font-semibold tw-text-info-500 tw-mt-0">
+            {{ resetPasswordDescription }}
+          </p>
           <div class="tw-flex tw-flex-col">
             <div>
               <form id="signin" :action="getSignInAction" method="post" @submit="validate">
@@ -92,12 +95,13 @@
                 <p v-if="capturePassword && !!passwordError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
                   {{ passwordError }}
                 </p>
-                <p v-if="capturePassword" class="tw-w-full tw-text-left tw-mb-4">
+                <p v-if="capturePassword || resetPasswordDescription" class="tw-w-full tw-text-left tw-mb-4">
                   <a class="tw-text-info-500 tw-cursor-pointer hover:tw-underline" @click="forgotPasswordClick()">
                     {{ forgotPasswordLabel }}
                   </a>
                 </p>
                 <SubmissionButton
+                  v-if="!resetPasswordDescription"
                   data-test-login-button
                   variant="primary"
                   size="medium"
@@ -254,9 +258,12 @@ export default {
     },
     capturePassword: {
       type: Boolean,
-      required: false,
       default: true,
     },
+    resetPasswordDescription: {
+      type: String,
+      default: undefined,
+    },
     emailLoading: {
       type: Boolean,
       required: false,

package/src/experiences/components/AuthFlow/SignUp.vue

@@ -228,7 +228,7 @@ export default {
       }
 
       const url = new URL(`https://${window.location.host}${this.recommendedActionLink}`);
-      if (this.aUserName) {
+      if (this.aUserName && !url.searchParams.has('email')) {
         url.searchParams.append('email', this.aUserName);
       }
       return url?.toString();

package/src/experiences/components/SideNavigationPanel/MenuCta.vue

@@ -0,0 +1,62 @@
+<template>
+  <component :is="componentTag" class="menu-item" :class="variantClasses" v-bind="componentAttrs" @click="handleClick">
+    <Icon v-if="icon" :name="icon" :size="iconSize" />
+    <span>{{ label }}</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+
+type MenuCtaVariant = 'primary' | 'secondary' | 'empty';
+
+interface MenuCtaProps {
+  label: string;
+  variant?: MenuCtaVariant;
+  icon?: string;
+  iconSize?: 'sm' | 'md' | 'lg';
+  url?: string;
+  action?: () => void;
+}
+
+const props = withDefaults(defineProps<MenuCtaProps>(), {
+  variant: 'primary',
+  iconSize: 'sm',
+});
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+const componentTag = computed(() => (props.action ? 'button' : 'a'));
+
+const componentAttrs = computed(() => (props.action ? {} : { href: props.url }));
+
+const variantClasses = computed(() => {
+  switch (props.variant) {
+    case 'primary':
+      return 'tw-bg-primary-500 tw-text-white hover:tw-bg-primary-700';
+    case 'secondary':
+      return 'tw-justify-center tw-bg-secondary-500 tw-text-white hover:tw-bg-secondary-700';
+    case 'empty':
+      return 'tw-justify-center tw-text-grayscale-700 hover:tw-bg-gray-600 tw-text-center';
+    default:
+      return '';
+  }
+});
+
+const handleClick = (event: MouseEvent) => {
+  if (props.action) {
+    props.action();
+  }
+  emit('click', event);
+};
+</script>
+
+<style scoped>
+.menu-item {
+  @apply tw-p-2 tw-flex tw-gap-2 tw-items-center tw-rounded-lg tw-font-normal tw-cursor-pointer;
+  height: 36px;
+}
+</style>

package/src/experiences/components/SideNavigationPanel/MenuItem.vue

@@ -0,0 +1,40 @@
+<template>
+  <component
+    :is="componentTag"
+    class="menu-item"
+    :class="{ 'tw-bg-grayscale-400': isActive, 'hover:tw-bg-grayscale-300': !isActive }"
+    v-bind="componentAttrs"
+    @click="handleClick"
+  >
+    <Icon class="icon" :name="icon" size="sm" />
+    <span class="tw-text-md tw-font-medium tw-text-grayscale-700">{{ label }}</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+import type { IMenuItem } from './types';
+
+const props = defineProps<IMenuItem>();
+
+const componentTag = computed(() => (props.action ? 'button' : 'a'));
+
+const componentAttrs = computed(() => (props.action ? {} : { href: props.url }));
+
+const handleClick = () => {
+  if (props.action) {
+    props.action();
+  }
+};
+</script>
+
+<style scoped>
+.menu-item {
+  @apply tw-p-2 tw-mb-1 tw-flex tw-gap-2 tw-items-center tw-rounded-lg tw-cursor-pointer;
+  height: 36px;
+}
+.icon svg {
+  color: var(--text-secondary, rgba(61, 61, 61, 1));
+}
+</style>

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

@@ -0,0 +1,219 @@
+import SideNavigationPanel from './SideNavigationPanel.vue';
+
+export default {
+  title: 'Experiences/SideNavigationPanel',
+  component: SideNavigationPanel,
+  argTypes: {
+    menuItems: {
+      control: 'object',
+      description: 'Array of menu items with label, url, icon, and isActive properties',
+    },
+    createNewDesignCta: {
+      control: 'object',
+      description: 'CTA object for "Create New Design" button with url property',
+    },
+    upgradeCta: {
+      control: 'object',
+      description: 'CTA object for "Upgrade" button with url property',
+    },
+    rateCta: {
+      control: 'object',
+      description: 'CTA object for "Rate Design.com" button with action property',
+    },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+// Default menu items representing a typical navigation structure
+const defaultMenuItems = [
+  { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: true, action: undefined },
+  { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
+  { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
+  { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
+  { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
+  { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
+];
+
+const defaultCreateNewDesignCta = {
+  url: '#create-new-design',
+};
+
+const defaultUpgradeCta = {
+  url: '#upgrade',
+};
+
+const defaultRateCta = {
+  action: () => console.log('Rate Design.com clicked'),
+};
+
+const Template = (args) => ({
+  components: { SideNavigationPanel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="width: 100vw; height: 100vh; display: flex;">
+      <SideNavigationPanel v-bind="args" />
+      <div style="flex: 1; padding: 2rem; background: white;">
+        <h1 style="font-size: 2rem; margin-bottom: 1rem;">Content Area</h1>
+        <p>This is where your main content would appear. The side navigation panel is on the left.</p>
+        <p style="margin-top: 1rem;">Click on the menu items to see the active state change (in a real app).</p>
+      </div>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  menuItems: defaultMenuItems,
+  createNewDesignCta: defaultCreateNewDesignCta,
+  upgradeCta: defaultUpgradeCta,
+  rateCta: defaultRateCta,
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default side navigation panel with all CTAs and the first menu item active.',
+    },
+  },
+};
+
+export const DesignsActive = Template.bind({});
+DesignsActive.args = {
+  menuItems: [
+    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: false, action: undefined },
+    { label: 'Designs', icon: 'designs', url: '#designs', isActive: true, action: undefined },
+    { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
+    { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
+    { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
+    { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
+  ],
+  createNewDesignCta: defaultCreateNewDesignCta,
+  upgradeCta: defaultUpgradeCta,
+  rateCta: defaultRateCta,
+};
+DesignsActive.parameters = {
+  docs: {
+    description: {
+      story: 'Side navigation panel with the "Designs" menu item active.',
+    },
+  },
+};
+
+export const SettingsActive = Template.bind({});
+SettingsActive.args = {
+  menuItems: [
+    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: false, action: undefined },
+    { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
+    { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
+    { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
+    { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
+    { label: 'Settings', icon: 'settings', url: '#settings', isActive: true, action: undefined },
+  ],
+  createNewDesignCta: defaultCreateNewDesignCta,
+  upgradeCta: defaultUpgradeCta,
+  rateCta: defaultRateCta,
+};
+SettingsActive.parameters = {
+  docs: {
+    description: {
+      story: 'Side navigation panel with the "Settings" menu item active.',
+    },
+  },
+};
+
+export const NoActiveItem = Template.bind({});
+NoActiveItem.args = {
+  menuItems: [
+    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: false, action: undefined },
+    { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
+    { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
+    { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
+    { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
+    { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
+  ],
+  createNewDesignCta: defaultCreateNewDesignCta,
+  upgradeCta: defaultUpgradeCta,
+  rateCta: defaultRateCta,
+};
+NoActiveItem.parameters = {
+  docs: {
+    description: {
+      story: 'Side navigation panel with no active menu item.',
+    },
+  },
+};
+
+export const WithActionBasedMenuItems = Template.bind({});
+WithActionBasedMenuItems.args = {
+  menuItems: [
+    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: true, action: undefined },
+    { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
+    {
+      label: 'Export Data',
+      icon: 'download',
+      url: undefined,
+      isActive: false,
+      action: () => console.log('Export data action triggered'),
+    },
+    { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
+    { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
+  ],
+  createNewDesignCta: defaultCreateNewDesignCta,
+  upgradeCta: defaultUpgradeCta,
+  rateCta: defaultRateCta,
+};
+WithActionBasedMenuItems.parameters = {
+  docs: {
+    description: {
+      story:
+        'Side navigation panel with an action-based menu item (Export Data) that triggers a function instead of navigation. Check console for action output.',
+    },
+  },
+};
+
+export const MinimalMenuItems = Template.bind({});
+MinimalMenuItems.args = {
+  menuItems: [
+    { label: 'Dashboard', icon: 'star-hollow', url: '#dashboard', isActive: true, action: undefined },
+    { label: 'Projects', icon: 'designs', url: '#projects', isActive: false, action: undefined },
+    { label: 'Help', icon: 'help', url: '#help', isActive: false, action: undefined },
+  ],
+  createNewDesignCta: defaultCreateNewDesignCta,
+  upgradeCta: defaultUpgradeCta,
+  rateCta: defaultRateCta,
+};
+MinimalMenuItems.parameters = {
+  docs: {
+    description: {
+      story: 'Side navigation panel with a minimal set of menu items.',
+    },
+  },
+};
+
+export const ExtendedMenuItems = Template.bind({});
+ExtendedMenuItems.args = {
+  menuItems: [
+    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: false, action: undefined },
+    { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
+    { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
+    { label: 'Websites', icon: 'website', url: '#websites', isActive: true, action: undefined },
+    { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
+    { label: 'Marketing', icon: 'megaphone', url: '#marketing', isActive: false, action: undefined },
+    { label: 'Analytics', icon: 'chart', url: '#analytics', isActive: false, action: undefined },
+    { label: 'Billing', icon: 'creditcard', url: '#billing', isActive: false, action: undefined },
+    { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
+  ],
+  createNewDesignCta: defaultCreateNewDesignCta,
+  upgradeCta: defaultUpgradeCta,
+  rateCta: defaultRateCta,
+};
+ExtendedMenuItems.parameters = {
+  docs: {
+    description: {
+      story: 'Side navigation panel with an extended list of menu items to test scrolling behavior.',
+    },
+  },
+};

package/src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue

@@ -0,0 +1,48 @@
+<template>
+  <!-- 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" />
+      <div class="menuitemcontainer">
+        <MenuItem
+          v-for="item in menuItems"
+          :key="item.label"
+          :label="item.label"
+          :url="item.action ? '' : item.url"
+          :icon="item.icon"
+          :is-active="item.isActive"
+        />
+      </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" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import MenuCta from './MenuCta.vue';
+import MenuItem from './MenuItem.vue';
+import type { IMenuItem } from './types';
+
+defineProps({
+  menuItems: {
+    type: Array<IMenuItem>,
+    required: true,
+  },
+  createNewDesignCta: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<style scoped>
+.sidebar {
+  @apply tw-p-2 tw-flex tw-flex-col tw-h-full tw-justify-between tw-w-[14rem];
+  background-color: rgba(245, 245, 245, 1);
+  border-right: 1px rgba(227, 227, 227, 1) solid;
+}
+.ctas {
+  text-align: center;
+}
+</style>

package/src/experiences/components/SideNavigationPanel/types.ts

@@ -0,0 +1,7 @@
+export type IMenuItem = {
+  label: string;
+  url?: string;
+  action?: () => void;
+  icon: string;
+  isActive: boolean;
+};

package/src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue

@@ -6,6 +6,7 @@
       :custom-upload-data="customUploadData"
       :use-dropzone="useDropzone"
       :is-post-purchase-user-upload="isPostPurchaseUserUpload"
+      :is-ai-powered="isAiPowered"
       @on-exit="onExit"
       @on-upload-error="onUploadError"
       @on-file-change="onFileChange"
@@ -29,19 +30,20 @@ export default {
   props: {
     useDropzone: {
       type: Boolean,
-      required: false,
       default: false,
     },
     isPostPurchaseUserUpload: {
       type: Boolean,
-      required: false,
       default: false,
     },
     customUploadData: {
       type: Object,
-      required: false,
       default: null,
     },
+    isAiPowered: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploader.vue

@@ -1,5 +1,8 @@
 <template>
-  <LogoUploadingLoader :loading-text="uploadYourLogoTr('uploadingAndConverting')" />
+  <LogoUploadingLoader
+    :loading-text="uploadYourLogoTr('uploadingAndConverting')"
+    :is-ai-powered="isAiPowered"
+  />
 </template>
 <script>
 import brandCrowdClient from '../../clients/brand-crowd-api.client';
@@ -28,6 +31,10 @@ export default {
       type: String,
       required: true,
     },
+    isAiPowered: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     return {

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadingLoader.vue

@@ -1,22 +1,39 @@
 <template>
   <div class="tw-pt-12 tw-pb-16 tw-flex tw-flex-col tw-items-center tw-justify-center">
+    <!-- AI-powered sparkle animation -->
+    <div v-if="isAiPowered" class="tw-mb-8">
+      <AiPoweredLoader alt="AI-powered loading" />
+    </div>
+
+    <!-- Traditional GIF loader -->
     <img
+      v-else
       src="https://dcstatic.com/images/brandcrowd/on-boarding/loading/preloader-1-d1cc0b885f.gif"
       alt="Loading"
       class="tw-block tw-mb-8"
     />
+
     <p class="tw-text-black tw-text-2xl tw-font-bold tw-text-center">
       {{ loadingText }}
     </p>
   </div>
 </template>
 <script>
+import AiPoweredLoader from '../../../atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
+
 export default {
+  components: {
+    AiPoweredLoader,
+  },
   props: {
     loadingText: {
       type: String,
       required: true,
     },
+    isAiPowered: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>