@designcrowd/fe-shared-lib 1.1.3 → 1.1.4-gt-7422

package/Dockerfile

@@ -27,7 +27,7 @@ COPY . .
 COPY .npmignore ./
 
 RUN mkdir artifacts
-RUN npm publish || touch artifacts/npm_publish_failed
+RUN npm publish -otp=881429 || touch artifacts/npm_publish_failed
 RUN cp package.json artifacts/
 
 ENTRYPOINT ["/bin/echo", "Nothing to do."]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.1.3",
+  "version": "1.1.4-gt-7422",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

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>

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

@@ -4,44 +4,130 @@
       <Loader />
     </div>
     <div v-else>
-      <a
+      <div
         v-for="(paymentConfig, index) in paymentConfigs"
         :key="paymentConfig.id"
-        :href="paymentConfig.dashboardUrl"
-        target="_blank"
+        v-click-outside="onClickOutsideStripeOptions"
+        class="tw-relative"
       >
         <div
           class="tw-w-full tw-flex tw-font-sans tw-text-sm tw-items-center tw-p-3 tw-gap-2 tw-rounded tw-bg-white tw-border tw-border-solid tw-border-grayscale-500 tw-text-secondary-500 hover:tw-bg-grayscale-200"
           :class="{ 'tw-mb-2': index !== paymentConfigs.length - 1 }"
         >
           <img class="tw-h-6" :src="paymentConfig.paymentProviderImageUrl" alt="Payment provider's logo" />
-          <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
-            <span>{{ paymentConfig.name }}</span>
-            <small class="stripe-acct">({{ paymentConfig.paymentProviderExternalId }})</small>
-          </span>
-          <p
-            class="tw-ml-auto tw-text-xs tw-rounded-full tw-py-0.5 tw-my-0 tw-text-white tw-px-4 tw-outline-none tw-uppercase"
-            :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)"
-          >
-            {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
-          </p>
+          <div class="tw-flex tw-gap-4 tw-w-full tw-items-center">
+            <div class="tw-flex status-alignment tw-justify-between tw-gap-2 tw-w-full">
+              <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
+                <span>{{ paymentConfig.name }}</span>
+                <small class="stripe-acct">({{ paymentConfig.paymentProviderExternalId }})</small>
+              </span>
+              <p
+                class="tw-flex tw-items-center tw-h-fit tw-w-fit tw-text-xs tw-rounded-full tw-py-0.5 tw-my-0 tw-text-white tw-px-4 tw-outline-none tw-uppercase"
+                :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)"
+              >
+                {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
+              </p>
+            </div>
+            <Button
+              icon="other"
+              variant="no-border"
+              icon-size="sm"
+              size="sm"
+              @on-click.stop="onClickStripeOptions(index)"
+            />
+          </div>
         </div>
-      </a>
+
+        <!-- Dropdown options -->
+        <ul
+          v-if="activeStripeOptionIndex === index"
+          class="tw-absolute tw-right-0 top-class tw-list-none tw-bg-white tw-rounded tw-border tw-border-solid tw-border-grayscale-500 tw-shadow-md tw-py-3 tw-z-30 tw-text-left"
+        >
+          <li
+            class="tw-py-2 tw-px-3 tw-cursor-pointer tw-text-sm hover:tw-bg-grayscale-200"
+            @click="onClickDeleteConfirmation(paymentConfig.id)"
+          >
+            <span class="tw-whitespace-nowrap tw-flex tw-gap-2"
+              ><Icon name="delete" size="sm" />Delete payment method</span
+            >
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
+  <PaymentConfigDeleteConfigModal
+    v-if="showDeleteConfirmationModal"
+    :payment-config="selectedPaymentConfig"
+    :brand-page-token="brandPageToken"
+    @close-modal="onCloseModal"
+    @on-delete="onLoadPaymentConfigs"
+  />
 </template>
+
 <script>
 import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import PaymentConfigDeleteConfigModal from './PaymentConfigDeleteConfigModal.vue';
+import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
 
 import PaymentConfigMixin from './PaymentConfig.mixin';
 
 export default {
   components: {
     Loader,
+    Button,
+    Icon,
+    PaymentConfigDeleteConfigModal,
   },
+
   mixins: [PaymentConfigMixin],
+  emits: ['on-load'],
+  data() {
+    return {
+      activeStripeOptionIndex: null,
+      showDeleteConfirmationModal: false,
+    };
+  },
+  methods: {
+    onClickStripeOptions(index) {
+      this.activeStripeOptionIndex = this.activeStripeOptionIndex === index ? null : index;
+    },
+
+    onClickDeleteConfirmation(id) {
+      this.selectedPaymentConfig = this.paymentConfigs.find((x) => x.id === id);
+      this.showDeleteConfirmationModal = true;
+    },
+
+    onCloseModal() {
+      this.showDeleteConfirmationModal = false;
+    },
+
+    onClickOutsideStripeOptions() {
+      this.activeStripeOptionIndex = null;
+    },
+    onLoadPaymentConfigs(paymentConfigId) {
+      this.showDeleteConfirmationModal = false;
+      this.paymentConfigs = this.paymentConfigs.filter((p) => p.id !== paymentConfigId);
+      this.$emit('on-load', this.paymentConfigs);
+    },
+  },
   async mounted() {
     await this.updatePaymentConfigs();
   },
 };
 </script>
+<style>
+.top-class {
+  top: 3rem;
+}
+@media (min-width: 640px) {
+  .status-alignment {
+    @apply tw-flex-row tw-items-center;
+  }
+}
+@media (max-width: 640px) {
+  .status-alignment {
+    @apply tw-flex-col;
+  }
+}
+</style>

package/src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.vue

@@ -162,7 +162,7 @@ export default {
         uploadMultiple: false,
         acceptedFiles: ACCEPTED_MIME_TYPES.join(','),
         accept(file) {
-          const extension = file.name.split('.').pop();
+          const extension = file.name.split('.').pop().toLowerCase();
 
           if (ACCEPTED_FILE_EXTENSIONS.indexOf(extension) < 0) {
             self.displayError(UNSUPPORTED_FILE_ERROR_MSG);