@designcrowd/fe-shared-lib 1.4.3 → 1.4.4-promocardv0

package/src/atoms/components/PromoCard/PromoCard.stories.ts

@@ -0,0 +1,265 @@
+import PromoCard from './PromoCard.vue';
+
+export default {
+  title: 'Components/PromoCard',
+  component: PromoCard,
+};
+
+export const Standard = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Special Offer',
+    description: 'Get 20% off your next purchase. Limited time offer!',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Promotional image',
+    buttonLabel: 'Learn More',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const HorizontalLayout = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Premium Package',
+    description: 'Upgrade to premium and unlock exclusive features today.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Premium package image',
+    buttonLabel: 'Upgrade Now',
+    horizontalLayout: true,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const ImageOnTop = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Mobile Friendly',
+    description: 'This layout works great on mobile devices with the image displayed on top.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Mobile friendly layout',
+    buttonLabel: 'Try It',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: true,
+  },
+};
+
+export const ScaledDownImage = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Logo Showcase',
+    description: 'Display your logo with proper spacing and scaling.',
+    imageUrl: 'https://via.placeholder.com/120x120',
+    altText: 'Logo showcase',
+    buttonLabel: 'View More',
+    horizontalLayout: false,
+    scaleImageDown: true,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const FullWidthImage = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Full Width Banner',
+    description: 'Images that stretch to fill the available space.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Full width banner',
+    buttonLabel: 'Explore',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: true,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const AllOptions = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <div class="tw-space-y-4">
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Standard Layout</h3>
+            <PromoCard
+              title="Standard Promo"
+              description="This is the default vertical layout with image on the left."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Standard layout"
+              buttonLabel="Click Me"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+          
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Horizontal Layout</h3>
+            <PromoCard
+              title="Horizontal Promo"
+              description="This layout is better for desktop with content side by side."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Horizontal layout"
+              buttonLabel="Click Me"
+              :horizontal-layout="true"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+          
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Image On Top</h3>
+            <PromoCard
+              title="Mobile Optimized"
+              description="Perfect for mobile views with image stacked on top."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Image on top"
+              buttonLabel="Click Me"
+              :should-show-image-on-top="true"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+        </div>
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {},
+};
+
+Standard.story = {
+  name: 'PromoCard - Standard',
+};
+
+HorizontalLayout.story = {
+  name: 'PromoCard - Horizontal Layout',
+};
+
+ImageOnTop.story = {
+  name: 'PromoCard - Image On Top',
+};
+
+ScaledDownImage.story = {
+  name: 'PromoCard - Scaled Down Image',
+};
+
+FullWidthImage.story = {
+  name: 'PromoCard - Full Width Image',
+};
+
+AllOptions.story = {
+  name: 'PromoCard - All Variants',
+};

package/src/atoms/components/PromoCard/PromoCard.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="tw-flex" :class="shouldShowImageOnTop ? 'tw-flex-col' : 'tw-flex-row'">
+    <div
+      class="tw-flex tw-justify-center tw-items-center tw-bg-grayscale-400 tw-w-60 tw-p-1 dcom-rounded-tl dcom-rounded-bl"
+      :class="{
+        'tw-w-full tw-px-8 md:tw-px-12 lg:tw-px-20 tw-py-4': shouldShowImageOnTop,
+        'tw-px-4': !shouldShowImageOnTop,
+      }"
+    >
+      <img :src="imageUrl" :alt="altText" />
+    </div>
+    <div
+      class="tw-flex tw-bg-white tw-w-full tw-p-4 tw-grow dcom-rounded-tr dcom-rounded-br tw-flex-col tw-justify-between"
+      :class="{
+        'lg:tw-flex-row lg:tw-items-center lg:tw-justify-normal': horizontalLayout,
+      }"
+    >
+      <div class="tw-text-left tw-overflow-hidden tw-text-ellipsis" :class="lineClampStyle">
+        <div class="tw-font-bold tw-text-black tw-mb-0.5">
+          {{ title }}
+        </div>
+        <p>
+          {{ description }}
+        </p>
+      </div>
+      <Button
+        variant="primary"
+        size="small"
+        :full-width="!horizontalLayout"
+        class="tw-text-left tw-mt-4"
+        :class="horizontalLayout ? 'tw-w-full tw-mr-2 md:tw-mt-0 md:tw-w-auto' : ''"
+        :label="buttonLabel"
+        @on-click="buttonClicked"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../Button/Button.vue';
+
+export default {
+  components: { Button },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    imageUrl: { type: String, required: true },
+    altText: { type: String, default: '' },
+    buttonLabel: {
+      type: String,
+      required: true,
+    },
+    horizontalLayout: {
+      type: Boolean,
+      default: false,
+    },
+    shouldShowImageOnTop: {
+      type: Boolean,
+      default: false,
+    },
+    textLineClamp: {
+      type: Number,
+      default: 0, // 0 is infinite
+    },
+  },
+  computed: {
+    shouldUseHorizontalLayout() {
+      // when in desktop view, display horizontal mode
+      return this.horizontalLayout;
+    },
+    lineClampStyle() {
+      if (this.textLineClamp > 0) {
+        return `tw-line-clamp-${this.textLineClamp}`;
+      }
+      return 'tw-line-clamp-none';
+    },
+  },
+  methods: {
+    buttonClicked() {
+      this.$emit('button-clicked');
+    },
+  },
+};
+</script>

package/src/experiences/clients/brand-crowd-api.client.js

@@ -12,10 +12,21 @@ const getAxios = () => {
   return internalAxios || axios;
 };
 
-const uploadLogoAndGetDetails = async (logoFile) => {
+/**
+ * @param {File} logoFile
+ * @param {Object} data
+ * @returns Promise<{ success: boolean, response: any, error: any }>
+ */
+const uploadLogoAndGetDetails = async (logoFile, data) => {
   const formData = new FormData();
   formData.append('logoImage', logoFile && logoFile.file);
 
+  if (data && Object.keys(data).length > 0) {
+    Object.keys(data).forEach((key) => {
+      formData.append(key, data[key]);
+    });
+  }
+
   try {
     const response = await getAxios()({
       method: 'post',

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

@@ -3,6 +3,7 @@
     <UploadYourLogoOnBoarding
       v-if="active"
       :logo-file="logoData.logoFile"
+      :custom-upload-data="customUploadData"
       :use-dropzone="useDropzone"
       :is-post-purchase-user-upload="isPostPurchaseUserUpload"
       @on-exit="onExit"
@@ -36,6 +37,11 @@ export default {
       required: false,
       default: false,
     },
+    customUploadData: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {

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

@@ -19,6 +19,11 @@ export default {
       required: true,
       default: undefined,
     },
+    customUploadData: {
+      type: Object,
+      required: false,
+      default: null,
+    },
     eventCategory: {
       type: String,
       required: true,
@@ -50,7 +55,7 @@ export default {
         duration = Date.now() - start;
       }, 1);
 
-      const result = await brandCrowdClient.uploadLogoAndGetDetails(this.logoFile);
+      const result = await brandCrowdClient.uploadLogoAndGetDetails(this.logoFile, this.customUploadData);
 
       clearInterval(intervalTimer);
       this.isRunning = false;

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

@@ -20,6 +20,7 @@
         <LogoUploader
           v-if="logoFile && !isAttemptingToExit && !hasError && currentStep === 1"
           :logo-file="logoFile"
+          :custom-upload-data="customUploadData"
           :event-category="eventCategory"
           @on-upload-success="onUploadSuccess"
           @on-upload-error="onUploadError"
@@ -127,6 +128,11 @@ export default {
       required: false,
       default: false,
     },
+    customUploadData: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
   },
   setup() {
     return {

package/tailwind.config.js

@@ -1,9 +1,9 @@
-const bcTheme = require("./src/themes/bc");
-const bpTheme = require("./src/themes/bp");
-const dcTheme = require("./src/themes/dc");
-const cdTheme = require("./src/themes/cd");
-const dcomTheme = require("./src/themes/dcom");
-const viewports = require("./src/viewports");
+const bcTheme = require('./src/themes/bc');
+const bpTheme = require('./src/themes/bp');
+const dcTheme = require('./src/themes/dc');
+const cdTheme = require('./src/themes/cd');
+const dcomTheme = require('./src/themes/dcom');
+const viewports = require('./src/viewports');
 
 const designSystemConfig = {
   themes: {
@@ -20,7 +20,7 @@ const theme = designSystemConfig.themes[process.env.tailwindTheme]; // use the e
 module.exports = {
   prefix: 'tw-',
   content: ['./src/**/components/**/*.vue'],
-  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }],
+  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }, { pattern: /^tw-line-clamp-/ }],
   theme: {
     ...theme,
     extend: {
@@ -34,4 +34,3 @@ module.exports = {
     preflight: true,
   },
 };
-