@designcrowd/fe-shared-lib 1.1.2 → 1.1.3-kp-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.1.2",
+  "version": "1.1.3-kp-2",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",
@@ -35,7 +35,7 @@
     "vue-color": "2.8.1",
     "vue-cropperjs": "5.0.0",
     "vue-observe-visibility": "1.0.0",
-    "vue-router": "4.2.5",
+    "vue-router": "4.5.0",
     "yargs": "17.7.2"
   },
   "devDependencies": {

package/public/css/tailwind-brandCrowd.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-brandCrowd .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-brandCrowd .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -679,6 +683,9 @@ video {
 .theme-brandCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +842,9 @@ video {
 .theme-brandCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1184,6 +1194,9 @@ video {
 .theme-brandCrowd .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-brandCrowd .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-brandCrowd .tw-border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1715,6 +1728,9 @@ video {
 .theme-brandCrowd .tw-text-center {
   text-align: center;
 }
+.theme-brandCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2213,9 @@ video {
 .theme-brandCrowd .md\:tw-grid {
     display: grid;
   }
+.theme-brandCrowd .md\:tw-hidden {
+    display: none;
+  }
 .theme-brandCrowd .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2228,21 @@ video {
 .theme-brandCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2264,9 @@ video {
 .theme-brandCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2309,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-brandPage.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-brandPage .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-brandPage .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -679,6 +683,9 @@ video {
 .theme-brandPage .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandPage .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandPage .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +842,9 @@ video {
 .theme-brandPage .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandPage .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandPage .tw-w-10 {
   width: 2.5rem;
 }
@@ -1184,6 +1194,9 @@ video {
 .theme-brandPage .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-brandPage .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-brandPage .tw-border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1563,6 +1576,9 @@ video {
 .theme-brandPage .tw-text-center {
   text-align: center;
 }
+.theme-brandPage .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandPage .tw-align-middle {
   vertical-align: middle;
 }
@@ -1885,6 +1901,9 @@ video {
 .theme-brandPage .md\:tw-grid {
     display: grid;
   }
+.theme-brandPage .md\:tw-hidden {
+    display: none;
+  }
 .theme-brandPage .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -1897,12 +1916,21 @@ video {
 .theme-brandPage .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandPage .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandPage .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandPage .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandPage .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandPage .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandPage .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1924,6 +1952,9 @@ video {
 .theme-brandPage .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandPage .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandPage .md\:tw-justify-center {
     justify-content: center;
   }
@@ -1966,6 +1997,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandPage .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandPage .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-crazyDomains.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-crazyDomains .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-crazyDomains .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -679,6 +683,9 @@ video {
 .theme-crazyDomains .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-crazyDomains .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-crazyDomains .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +842,9 @@ video {
 .theme-crazyDomains .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-crazyDomains .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-crazyDomains .tw-w-10 {
   width: 2.5rem;
 }
@@ -1184,6 +1194,9 @@ video {
 .theme-crazyDomains .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-crazyDomains .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-crazyDomains .tw-border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1715,6 +1728,9 @@ video {
 .theme-crazyDomains .tw-text-center {
   text-align: center;
 }
+.theme-crazyDomains .tw-align-top {
+  vertical-align: top;
+}
 .theme-crazyDomains .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2213,9 @@ video {
 .theme-crazyDomains .md\:tw-grid {
     display: grid;
   }
+.theme-crazyDomains .md\:tw-hidden {
+    display: none;
+  }
 .theme-crazyDomains .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2228,21 @@ video {
 .theme-crazyDomains .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-crazyDomains .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-crazyDomains .md\:tw-w-auto {
     width: auto;
   }
 .theme-crazyDomains .md\:tw-w-full {
     width: 100%;
   }
+.theme-crazyDomains .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-crazyDomains .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-crazyDomains .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2264,9 @@ video {
 .theme-crazyDomains .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-crazyDomains .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-crazyDomains .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2309,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-crazyDomains .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-crazyDomains .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCom.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-designCom .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-designCom .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -679,6 +683,9 @@ video {
 .theme-designCom .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCom .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCom .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +842,9 @@ video {
 .theme-designCom .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCom .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCom .tw-w-10 {
   width: 2.5rem;
 }
@@ -1184,6 +1194,9 @@ video {
 .theme-designCom .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-designCom .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-designCom .tw-border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1715,6 +1728,9 @@ video {
 .theme-designCom .tw-text-center {
   text-align: center;
 }
+.theme-designCom .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCom .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2213,9 @@ video {
 .theme-designCom .md\:tw-grid {
     display: grid;
   }
+.theme-designCom .md\:tw-hidden {
+    display: none;
+  }
 .theme-designCom .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2228,21 @@ video {
 .theme-designCom .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCom .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCom .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCom .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCom .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCom .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCom .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2264,9 @@ video {
 .theme-designCom .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCom .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCom .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2309,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCom .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCom .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCrowd.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-designCrowd .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-designCrowd .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -679,6 +683,9 @@ video {
 .theme-designCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +842,9 @@ video {
 .theme-designCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1184,6 +1194,9 @@ video {
 .theme-designCrowd .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-designCrowd .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-designCrowd .tw-border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1715,6 +1728,9 @@ video {
 .theme-designCrowd .tw-text-center {
   text-align: center;
 }
+.theme-designCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2213,9 @@ video {
 .theme-designCrowd .md\:tw-grid {
     display: grid;
   }
+.theme-designCrowd .md\:tw-hidden {
+    display: none;
+  }
 .theme-designCrowd .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2228,21 @@ video {
 .theme-designCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2264,9 @@ video {
 .theme-designCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2309,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

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

@@ -24,7 +24,23 @@ const getPaymentConfigsByBrandPageToken = async (brandPageToken) => {
   }
 };
 
+const deletePaymentConfigByBrandPageTokenAndConfigId = async (brandPageToken, paymentConfigId) => {
+  try {
+    const response = await getAxios().delete(`/maker/api/brand-pages/${brandPageToken}/payment-configs`, {
+      data: { 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,92 @@
+<template>
+  <Modal
+    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">
+        <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
+        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="large" variant="outline" class="tw-my-4" @on-click="onCloseModal" />
+        <Button label="Delete Provider" variant="primary" size="large" 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 brandPageApiClient from './../../clients/brand-page-api.client';
+export default {
+  components: {
+    Modal,
+    Button,
+  },
+  emits: ['close-modal'],
+  props: {
+    paymentConfig: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+    brandPageToken: {
+      type: String,
+      required: false,
+    },
+  },
+  methods: {
+    onCloseModal() {
+      this.$emit('close-modal');
+    },
+
+    async onConfirmDelete() {
+      const paymentConfigId = this.paymentConfig.paymentConfigId;
+      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-load', paymentConfigId);
+        }
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>