@designcrowd/fe-shared-lib 1.1.3 → 1.1.4-rte-1

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

@@ -143,6 +143,18 @@ export const SampleIconsTextStyle = () => {
           value: 'strikethrough',
           iconName: 'maker-strikethrough',
         },
+        {
+          value: 'spacing',
+          iconName: 'maker-spacing',
+        },
+        {
+          value: 'text color',
+          iconName: 'maker-text-color',
+        },
+        {
+          value: 'text background color',
+          iconName: 'maker-text-background-color',
+        },
       ],
     }),
     methods: {

package/src/atoms/components/Dropdown/Dropdown.vue

@@ -20,7 +20,7 @@
 
     <div
       v-show="isMenuVisible"
-      class="tw-origin-top-right tw-absolute tw-left-0 tw-mt-2 tw-w-full tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-20"
+      class="tw-origin-top-right tw-absolute tw-mt-2 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-20"
       :class="[
         menuElementClasses,
         {

package/src/atoms/components/Dropdown/DropdownItem.vue

@@ -1,12 +1,24 @@
 <template>
   <div>
-    <div class="tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer" @click="onClick">
+    <div
+      class="tw-flex tw-items-center tw-px-2 tw-py-2 tw-cursor-pointer"
+      @click="onClick"
+      :class="{
+        'dropdown-item-hover': backgroundHover,
+      }"
+    >
       <slot></slot>
     </div>
   </div>
 </template>
 <script>
 export default {
+  props: {
+    backgroundHover: {
+      type: Boolean,
+      default: true,
+    },
+  },
   methods: {
     onClick() {
       this.$emit('click');
@@ -15,7 +27,7 @@ export default {
 };
 </script>
 <style scoped>
-.drop-down-item:hover {
+.dropdown-item-hover:hover {
   background-color: #eee;
 }
 </style>

package/src/atoms/components/Icon/Icon.vue

@@ -355,6 +355,9 @@ import IconMakerItalic from './icons/maker/italic.vue';
 import IconMakerBold from './icons/maker/bold.vue';
 import IconMakerUnderline from './icons/maker/underline.vue';
 import IconMakerStrikethrough from './icons/maker/strikethrough.vue';
+import IconMakerSpacing from './icons/maker/spacing.vue';
+import IconMakerTextColor from './icons/maker/text-color.vue';
+import IconMakerTextBackgroundColor from './icons/maker/text-background-color.vue';
 import IconMakerPlay from './icons/maker/play.vue';
 import IconMakerPause from './icons/maker/pause.vue';
 import IconMakerEraser from './icons/maker/eraser.vue';
@@ -698,6 +701,9 @@ export default {
     IconMakerBold,
     IconMakerUnderline,
     IconMakerStrikethrough,
+    IconMakerSpacing,
+    IconMakerTextColor,
+    IconMakerTextBackgroundColor,
     IconMakerPlay,
     IconMakerPause,
     IconMakerEraser,

package/src/atoms/components/Icon/icons/maker/spacing.vue

@@ -0,0 +1,18 @@
+<template>
+  <path
+    d="M8.25 4.5H2.75C2.336 4.5 2 4.16475 2 3.75C2 3.33525 2.336 3 2.75 3H8.25C8.664 3 9 3.33525 9 3.75C9 4.16475 8.664 4.5 8.25 4.5Z"
+    fill="black"
+  />
+  <path
+    d="M8.25 9H2.75C2.336 9 2 8.66475 2 8.25C2 7.83525 2.336 7.5 2.75 7.5H8.25C8.664 7.5 9 7.83525 9 8.25C9 8.66475 8.664 9 8.25 9Z"
+    fill="black"
+  />
+  <path
+    d="M2.75 13.5H8.25C8.664 13.5 9 13.1648 9 12.75C9 12.3352 8.664 12 8.25 12H2.75C2.336 12 2 12.3352 2 12.75C2 13.1648 2.336 13.5 2.75 13.5Z"
+    fill="black"
+  />
+  <path
+    d="M10.1661 11.7138C9.94463 11.9247 9.94463 12.2658 10.1661 12.4767L11.5995 13.8418C11.821 14.0527 12.1791 14.0527 12.4006 13.8418L13.834 12.4767C13.9445 12.3715 14 12.2333 14 12.0953C14 11.9572 13.9445 11.819 13.834 11.7138C13.6125 11.5029 13.2544 11.5029 13.0329 11.7138L12.5666 12.1579L12.5666 3.84211L13.0329 4.2862C13.2544 4.49712 13.6125 4.49712 13.834 4.2862C13.9445 4.18102 14 4.04278 14 3.90474C14 3.7667 13.9445 3.62845 13.834 3.52328L12.4006 2.15819C12.1791 1.94727 11.821 1.94727 11.5995 2.15819L10.1661 3.52328C9.94463 3.73419 9.94463 4.07528 10.1661 4.2862C10.3876 4.49712 10.7457 4.49712 10.9672 4.2862L11.4335 3.84211V12.1579L10.9672 11.7138C10.7457 11.5029 10.3876 11.5029 10.1661 11.7138Z"
+    fill="black"
+  />
+</template>

package/src/atoms/components/Icon/icons/maker/text-background-color.vue

@@ -0,0 +1,12 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M0.5 13.75C0.5 13.0596 1.05964 12.5 1.75 12.5H14.25C14.9404 12.5 15.5 13.0596 15.5 13.75V13.75C15.5 14.4404 14.9404 15 14.25 15H1.75C1.05964 15 0.5 14.4404 0.5 13.75V13.75Z"
+    fill="black"
+  />
+  <path
+    d="M4.70659 11H1L3.6025 8.3975L3.05045 7.76659L6.67817 4.13887L9.83271 7.37228L6.67817 10.6845C6.52045 10.8423 6.20499 10.8423 6.04727 10.6845L5.57408 10.1325L4.70659 11ZM8.64976 5.08523L7.30908 3.66569L9.67499 1.37865C9.96068 1.13428 10.3243 1 10.7002 1C11.0762 1 11.4397 1.13428 11.7254 1.37865L12.8295 2.5616C13.3816 3.11365 13.3816 4.13887 12.8295 4.69092L10.5425 6.97796L9.12294 5.55842L8.72863 5.08523"
+    fill="black"
+  />
+</template>

package/src/atoms/components/Icon/icons/maker/text-color.vue

@@ -0,0 +1,14 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.00585 1C8.28092 1 8.51171 1.05167 8.69736 1.155C8.88216 1.25833 9.03204 1.39167 9.14531 1.55417C9.25857 1.7175 9.35395 1.89167 9.43315 2.07833C9.50979 2.265 9.61028 2.515 9.72951 2.8275L12.2894 9.06667C12.4904 9.54167 12.5909 9.8875 12.5909 10.1033C12.5909 10.3267 12.4955 10.5325 12.3073 10.7192C12.1174 10.9058 11.8883 11 11.6218 11C11.4651 11 11.3314 10.9717 11.2198 10.9175C11.1091 10.8617 11.0154 10.7875 10.9396 10.6933C10.8638 10.5983 10.7821 10.4533 10.6952 10.2583C10.6084 10.0617 10.5334 9.88917 10.4713 9.74L10.0037 8.52667H6.01991L5.55237 9.76667C5.36928 10.25 5.21343 10.5767 5.08399 10.7467C4.9554 10.915 4.7442 11 4.44954 11C4.19917 11 3.9786 10.91 3.78784 10.7292C3.59623 10.5483 3.5 10.345 3.5 10.1158C3.5 9.98417 3.52214 9.84833 3.56728 9.7075C3.61156 9.56667 3.6848 9.37 3.78784 9.12L6.29498 2.84C6.36481 2.66 6.45167 2.44333 6.55131 2.19C6.6518 1.9375 6.7591 1.7275 6.87237 1.56C6.98563 1.39333 7.13466 1.25833 7.32031 1.155C7.50511 1.05167 7.73249 1 8.00585 1ZM7.99138 3.06417L6.54109 7.055H9.46892L7.99138 3.06417Z"
+    fill="black"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M0.5 13.75C0.5 13.0596 1.05964 12.5 1.75 12.5H14.25C14.9404 12.5 15.5 13.0596 15.5 13.75V13.75C15.5 14.4404 14.9404 15 14.25 15H1.75C1.05964 15 0.5 14.4404 0.5 13.75V13.75Z"
+    fill="black"
+  />
+</template>

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

@@ -0,0 +1,26 @@
+import NumberInput from './NumberInput.vue';
+
+export default {
+  title: 'Components/Number Input',
+  component: NumberInput,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const NumberInputStory = () => {
+  return {
+    components: {
+      NumberInput,
+    },
+    template: `
+        <div>
+          <div>Min 12, Max 128</div>
+          <NumberInput :min="12" :max="128"  :model-value="16"/>
+          <div class="tw-mt-8">Min 0, max 100, Manually emptying the input box should fall back to 0 as min value</div>
+          <NumberInput :min="0" :max="100"  :model-value="16"/>
+        </div>
+        
+      `,
+  };
+};

package/src/atoms/components/NumberInput/NumberInput.vue

@@ -0,0 +1,119 @@
+<template>
+  <input
+    ref="numberInput"
+    :value="numberValue"
+    type="text"
+    class="tw-w-full"
+    :class="[
+      elementClasses,
+      {
+        'border-radius-none': !roundedCorners,
+      },
+    ]"
+    @input.stop="setInput"
+    @blur.stop="checkLimit"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    min: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      required: false,
+      default: 100,
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    elementClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    roundedCorners: {
+      type: Boolean,
+      default: true,
+    },
+    step: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      numberValue: this.modelValue,
+    };
+  },
+  watch: {
+    modelValue(v) {
+      this.numberValue = v;
+    },
+  },
+  methods: {
+    focus() {
+      this.$refs.numberInput.focus();
+    },
+    setInput(e) {
+      if (e.target.value === '' || e.target.value === '-') {
+        return;
+      }
+
+      const newVal = parseFloat(e.target.value);
+      let newNumber = 0;
+      if (newVal > this.max) {
+        newNumber = this.max;
+      } else if (Number.isNaN(newVal)) {
+        newNumber = this.min;
+      } else {
+        newNumber = newVal;
+      }
+      this.updateValue(newNumber, e);
+    },
+    checkLimit(e) {
+      let newNumber = 0;
+      if (e.target.value === '') {
+        newNumber = this.min;
+      } else if (Number.isNaN(this.numberValue)) {
+        newNumber = this.min;
+      } else if (this.numberValue <= this.min) {
+        newNumber = this.min;
+      } else if (this.numberValue > this.max) {
+        newNumber = this.max;
+      } else {
+        newNumber = this.numberValue;
+      }
+      this.updateValue(newNumber, e);
+    },
+    updateValue(value, e) {
+      this.numberValue = value;
+      e.target.value = value;
+      this.$emit('input', e, value);
+    },
+  },
+};
+</script>
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.border-radius-none {
+  border-radius: 0 !important;
+}
+</style>

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

@@ -23,8 +23,8 @@ export const Primary = () => {
     ...data,
     template: `
       <div>
-        <div>Full width min 18 max 25</div>
-        <NumberStepper v-model="numberValue" id="id1" :min="18" :max="25" :disabled="false" />
+        <div>Full width min 12 max 128</div>
+        <NumberStepper v-model="numberValue" id="id1" :min="12" :max="128" :disabled="false" />
         <div class="tw-mt-4 tw-w-64">
           <div>Fixed container width</div>
           <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
@@ -45,6 +45,10 @@ export const Primary = () => {
           <div>Bigger size</div>
           <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
         </div>
+        <div class="tw-h-8 tw-mt-4 tw-w-64">
+          <div> Outer size dependent</div>
+          <NumberStepper size="xs" :full-height="true" :input-classes="'tw-min-w-12'" v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
       </div>
     `,
   };

package/src/atoms/components/NumberStepper/NumberStepper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-flex tw-items-stretch">
+  <div class="tw-flex tw-items-stretch" :class="containerClass">
     <Button
       variant="flat"
       icon="minus"
@@ -8,6 +8,7 @@
       :classes="buttonStyle"
       :rounded="false"
       :rounded-left="true"
+      :full-height="fullHeight"
       :disabled="disabled"
       @mousedown.left="onMouseDown('down')"
       @mousedown.right="clearLongPressTimers"
@@ -19,11 +20,12 @@
       @touchcancel="clearLongPressTimers($event)"
     />
     <input
+      v-if="disableManualInput"
       :ref="numberStepperRef"
-      class="tw-w-full tw-text-center tw-border tw-border-solid tw-border-secondary-200"
+      class="tw-w-full tw-text-center tw-border tw-border-solid tw-border-grayscale-500 tw-border-l-0 tw-border-r-0 tw-rounded-none"
       :class="inputClasses"
       type="text"
-      :value="number"
+      :model-value="number"
       pattern="[0-9]"
       :disabled="disabled || disableManualInput"
       @wheel="onMouseWheel"
@@ -34,10 +36,27 @@
       @focus="$emit(FOCUSED_EVENT)"
       @blur="$emit(BLUR_EVENT)"
     />
+    <NumberInput
+      v-else
+      :min="min"
+      :max="max"
+      :model-value="number"
+      :element-classes="[
+        inputClasses,
+        'tw-w-full tw-text-center tw-border tw-border-solid tw-border-grayscale-500 tw-border-l-0 tw-border-r-0 tw-rounded-none',
+      ]"
+      :rounded-corners="false"
+      @wheel="onMouseWheel"
+      @input="onSetInput"
+      @keyup="clearLongPressTimers"
+      @keydown.up="onArrowDown('up')"
+      @keydown.down="onArrowDown('down')"
+    />
     <Button
       variant="flat"
       :rounded="false"
       :rounded-right="true"
+      :full-height="fullHeight"
       icon="plus"
       :icon-size="buttonIconSize"
       class="tw-rounded-l-none"
@@ -58,10 +77,12 @@
 <script>
 import { ref } from 'vue';
 import Button from '../Button/Button.vue';
+import NumberInput from '../NumberInput/NumberInput.vue';
 
 export default {
   components: {
     Button,
+    NumberInput,
   },
   props: {
     // The value returned when a variable is assigned to v-model
@@ -102,6 +123,14 @@ export default {
       type: String,
       default: undefined,
     },
+    containerClass: {
+      type: String,
+      default: undefined,
+    },
+    fullHeight: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const numberStepperRef = `js-number-stepper-${props.id}`;
@@ -293,6 +322,13 @@ export default {
         this.$emit('input', this.number);
       }
     },
+    onSetInput(e, val) {
+      const value = Math.round(parseFloat(e.target.value));
+      this.number = value;
+      e.target.value = value;
+      this.$emit('update:modelValue', this.number);
+      this.$emit('input', this.number);
+    },
   },
 };
 </script>

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

@@ -24,7 +24,24 @@ const getPaymentConfigsByBrandPageToken = async (brandPageToken) => {
   }
 };
 
+const deletePaymentConfigByBrandPageTokenAndConfigId = async (brandPageToken, paymentConfigId) => {
+  try {
+    const response = await getAxios().delete(`/maker/api/brand-pages/${brandPageToken}/payment-configs`, {
+      data: { PaymentConfigId: paymentConfigId },
+    });
+
+    if (response.status === 200) {
+      return response.data;
+    }
+
+    return null;
+  } catch (err) {
+    return null;
+  }
+};
+
 export default {
   setBrandPageApiClientAxios,
   getPaymentConfigsByBrandPageToken,
+  deletePaymentConfigByBrandPageTokenAndConfigId,
 };

package/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js

@@ -1,4 +1,5 @@
 import brandPageApiClient from '../../clients/brand-page-api.client';
+import vClickOutside from 'click-outside-vue3';
 
 export const paymentConfigStatuses = Object.freeze({
   active: 'Active',
@@ -24,9 +25,14 @@ export default {
       default: undefined,
     },
   },
+  directives: {
+    clickOutside: vClickOutside,
+  },
   data: () => ({
     isLoading: true,
     paymentConfigs: [],
+    selectedPaymentConfig: {},
+    isStripeOptionActionVisible: false,
   }),
   methods: {
     getPaymentConfigStatusDisplayText(paymentConfigStatus) {

package/src/experiences/components/PaymentConfigList/PaymentConfigDeleteConfigModal.vue

@@ -0,0 +1,106 @@
+<template>
+  <Modal
+    full-screen-breakpoint="sm"
+    classes="publish-bp--modal tw-px-2 md:tw-px-8"
+    close-on-esc
+    :visible="true"
+    :hide-scrollbar="false"
+    @close-modal="onCloseModal"
+  >
+    <template #header>
+      <div class="tw-text-center tw-font-bold tw-mb-4 tw-mt-8 tw-text-2xl">
+        <span>Delete Payment Provider</span>
+      </div>
+    </template>
+    <template #default>
+      <div class="tw-text-center tw-w-full tw-border-0 tw-border-solid tw-border-grayscale-400 tw-border-t tw-p-4">
+        <div v-if="isLoading" class="tw-flex tw-justify-center">
+          <Loader />
+        </div>
+        <div v-else>
+          <div class="tw-text-center tw-w-full">
+            <p class="tw-text-grayscale-600">Are you sure you want to delete this payment provider?</p>
+            <p class="tw-text-grayscale-600">
+              Once deleted, your site will no longer show any payment options to visitors. You won’t be able to accept
+              payments unless you set up a new provider.
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div
+        class="tw-font-sans tw-text-center tw-flex tw-gap-2 tw-justify-center tw-mt-4 tw-border-0 tw-border-solid tw-border-grayscale-400 tw-border-t"
+        :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
+      >
+        <Button label="Cancel" size="medium" variant="outline" class="tw-my-4" @on-click="onCloseModal" />
+        <Button label="Delete Provider" variant="primary" size="medium" class="tw-my-4" @on-click="onConfirmDelete" />
+      </div>
+    </template>
+  </Modal>
+</template>
+<script>
+import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
+import brandPageApiClient from './../../clients/brand-page-api.client';
+export default {
+  components: {
+    Modal,
+    Button,
+    Loader,
+  },
+  emits: ['close-modal', 'on-delete'],
+  props: {
+    paymentConfig: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+    brandPageToken: {
+      type: String,
+      required: false,
+    },
+  },
+  data: () => ({
+    isLoading: false,
+  }),
+  methods: {
+    onCloseModal() {
+      this.$emit('close-modal');
+    },
+
+    async onConfirmDelete() {
+      const paymentConfigId = this.paymentConfig.id;
+      if (!this.brandPageToken) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`brandPageToken is required`);
+        }
+        return;
+      }
+
+      if (!paymentConfigId) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`paymentConfigId is required`);
+        }
+        return;
+      }
+
+      try {
+        this.isLoading = true;
+
+        const result = await brandPageApiClient.deletePaymentConfigByBrandPageTokenAndConfigId(
+          this.brandPageToken,
+          paymentConfigId,
+        );
+
+        if (result) {
+          this.$emit('on-delete', paymentConfigId);
+        }
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>