@designcrowd/fe-shared-lib 1.0.0-test-publish

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

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="tw-fixed tw-w-full tw-h-full tw-z-50 tw-top-0 tw-left-0 tw-bg-black tw-bg-opacity-80 lg:tw-flex tw-items-start tw-justify-center lg:tw-pt-20"
+  >
+    <AuthModal :show-cancel-button="true" :form-background-class="formBackgroundClass">
+      <template #content>
+        <SignUp
+          :title="title"
+          :form-background-class="formBackgroundClass"
+          :sign-up-url="signUpUrl"
+          :sign-in-url="signInUrl"
+          :login-with-google-url="loginWithGoogleUrl"
+          :login-with-facebook-url="loginWithFacebookUrl"
+          :terms-of-use-url="termsOfUseUrl"
+          :privacy-policy-url="privacyPolicyUrl"
+          :anti-forgery-token="antiForgeryToken"
+          :hello-bar="helloBar"
+          :recommended-action-link="recommendedActionLink"
+          :is-design-com="isDesignCom"
+        />
+      </template>
+    </AuthModal>
+  </div>
+</template>
+<script>
+import AuthModal from './AuthModal.vue';
+import SignUp from './SignUp.vue';
+
+export default {
+  components: {
+    AuthModal,
+    SignUp,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    formBackgroundClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signUpUrl: {
+      type: String,
+      required: true,
+    },
+    signInUrl: {
+      type: String,
+      required: true,
+    },
+    loginWithGoogleUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    loginWithFacebookUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    termsOfUseUrl: {
+      type: String,
+      required: true,
+    },
+    privacyPolicyUrl: {
+      type: String,
+      required: true,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    helloBar: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    recommendedActionLink: {
+      type: String,
+      default: undefined,
+    },
+    isDesignCom: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,165 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-w-full tw-gap-2">
+    <form
+      v-if="!!formGoogleUrl"
+      ref="googleForm"
+      :action="formGoogleUrl"
+      method="post"
+      @submit="handleGoogleFormSubmit"
+    >
+      <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
+      <SocialSignInButton
+        label="Continue with Google"
+        type="google"
+        :disabled="disabled"
+        :is-loading="googleLoading"
+        :url="formGoogleUrl"
+      />
+    </form>
+    <form
+      v-if="!!formFacebookUrl"
+      ref="facebookForm"
+      :action="formFacebookUrl"
+      method="post"
+      class="tw-w-full"
+      @submit="handleFacebookFormSubmit"
+    >
+      <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
+      <SocialSignInButton
+        label="Continue with Facebook"
+        type="facebook"
+        :disabled="disabled"
+        :is-loading="facebookLoading"
+        :url="formFacebookUrl"
+      />
+    </form>
+  </div>
+</template>
+<script>
+import SocialSignInButton from './SocialSignInButton.vue';
+
+export default {
+  components: {
+    SocialSignInButton,
+  },
+  props: {
+    loginWithGoogleUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    loginWithFacebookUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    facebookLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    googleLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    // hooks
+    preFacebookLoginHook: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    preGoogleLoginHook: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      formFacebookUrl: this.loginWithFacebookUrl,
+      formGoogleUrl: this.loginWithGoogleUrl,
+      formAntiForgeryToken: this.antiForgeryToken,
+    };
+  },
+  methods: {
+    updateFormAndSubmit(type, options = {}) {
+      const { antiForgeryToken, returnUrl } = options;
+
+      if (!antiForgeryToken || !returnUrl) {
+        throw new Error('Missing antiForgeryToken or action in `updateFormAndSubmit`');
+      }
+
+      this.formAntiForgeryToken = antiForgeryToken;
+
+      switch (type) {
+        case 'FACEBOOK':
+          this.formFacebookUrl = this.appendReturnUrl(this.loginWithFacebookUrl, returnUrl);
+          setTimeout(() => this.$refs.facebookForm.submit(), 0);
+          break;
+        case 'GOOGLE':
+          this.formGoogleUrl = this.appendReturnUrl(this.loginWithGoogleUrl, returnUrl);
+          setTimeout(() => this.$refs.googleForm.submit(), 0);
+          break;
+        default:
+          throw new Error(`Function updateFormAndSubmit - Unknown type: ${type}`);
+      }
+    },
+
+    appendReturnUrl(socialLoginUrl, returnUrl) {
+      const separator = socialLoginUrl.indexOf('?') === -1 ? '?' : '&';
+      return `${socialLoginUrl}${separator}returnUrl=${encodeURIComponent(returnUrl)}`;
+    },
+
+    appendMakerTypeStringAndRegistrationSource(socialLoginUrl) {
+      const makerTypeString = window?.location?.search?.match(/[?&]makerTypeString=([^&]*)/);
+      const registrationSource = window?.location?.search?.match(/[?&]registrationSource=([^&]*)/);
+
+      const additionalQueryStrings = [];
+
+      if (makerTypeString && makerTypeString.length > 0) {
+        additionalQueryStrings.push(`makerTypeString=${makerTypeString[1]}`);
+      }
+
+      if (registrationSource && registrationSource.length > 0) {
+        additionalQueryStrings.push(`registrationSource=${registrationSource[1]}`);
+      }
+
+      const separator = socialLoginUrl.indexOf('?') === -1 ? '?' : '&';
+      return `${socialLoginUrl}${separator}${additionalQueryStrings.join('&')}`;
+    },
+
+    handleFacebookFormSubmit(e) {
+      if (this.preFacebookLoginHook) {
+        e.preventDefault();
+        this.preFacebookLoginHook(this.updateFormAndSubmit.bind(this, 'FACEBOOK'));
+        return;
+      }
+      this.formFacebookUrl = this.appendMakerTypeStringAndRegistrationSource(this.formFacebookUrl);
+    },
+
+    handleGoogleFormSubmit(e) {
+      if (this.preGoogleLoginHook) {
+        e.preventDefault();
+        this.preGoogleLoginHook(this.updateFormAndSubmit.bind(this, 'GOOGLE'));
+        return;
+      }
+      this.formGoogleUrl = this.appendMakerTypeStringAndRegistrationSource(this.formGoogleUrl);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,74 @@
+<template>
+  <button
+    class="tw-h-full c-social-button tw-w-full tw-bg-white tw-border tw-border-solid tw-border-grayscale-500 tw-content-start tw-cursor-pointer tw-rounded tw-transition-colors tw-duration-300 tw-text-base hover:tw-bg-secondary-100"
+    :class="{
+      'tw-opacity-50': disabled,
+    }"
+    :disabled="disabled"
+  >
+    <span class="tw-flex tw-items-stretch">
+      <span class="tw-flex tw-items-center tw-z-10 tw-flex-none tw-transform -tw-translate-x-px">
+        <Icon :name="`auth-${type}`" class="tw-z-20 tw-py-3 tw-pl-3" size="md" />
+      </span>
+      <span class="tw-relative tw-w-full tw-inline-flex tw-text-grayscale-700">
+        <div
+          v-if="isLoading"
+          class="tw-absolute tw-top-1/2 tw-right-0 tw-transform tw--translate-y-1/2 tw--translate-x-3"
+        >
+          <img class="tw-animate-spin tw-align-middle" :src="loadingSrc" alt="Submitting" />
+        </div>
+        <span class="tw-grow tw-my-auto tw-text-center tw-w-full tw-font-semibold tw-text-sm">{{ label }}</span>
+      </span>
+    </span>
+  </button>
+</template>
+<script>
+import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
+
+const TYPES = {
+  FACEBOOK: 'facebook',
+  GOOGLE: 'google',
+};
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    url: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      types: TYPES,
+      loadingSrc: null,
+    };
+  },
+  mounted() {
+    this.loadingSrc =
+      this.type === TYPES.FACEBOOK
+        ? 'https://bcassetcdn.com/images/icons/loading/loading-fb.svg'
+        : 'https://bcassetcdn.com/images/icons/loading/loading-google.svg';
+  },
+};
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+  <div class="tw-relative tw-w-full">
+    <div
+      v-if="isLoading"
+      class="tw-absolute tw-top-1/2 tw-left-1/2 tw-transform tw--translate-y-1/2"
+      :class="{
+        'tw-translate-x-8': labelSize === 'smaller',
+        'tw-translate-x-12': labelSize === 'medium',
+        'tw-translate-x-20': labelSize === 'larger',
+      }"
+    >
+      <img
+        class="tw-animate-spin tw-align-middle"
+        src="https://dcstatic.com/images/icons/loading/loading-white-2e291087b2.svg"
+        alt="Submitting"
+      />
+    </div>
+    <Button :variant="variant" :size="size" :label="label" :full-width="true" :disabled="disabled" />
+  </div>
+</template>
+
+<script>
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    variant: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    labelSize: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,91 @@
+import brandPageApiClient from '../../clients/brand-page-api.client';
+
+export const paymentConfigStatuses = Object.freeze({
+  active: 'Active',
+  pendingPreOnboarding: 'PendingPreOnboarding',
+  pendingPostOnboarding: 'PendingPostOnboarding',
+  unactivatedByCustomer: 'UnactivatedByCustomer',
+});
+
+export default {
+  props: {
+    brandPageToken: {
+      type: String,
+      required: false,
+    },
+    showPaymentProviderExternalId: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    statusFilters: {
+      type: Array,
+      required: false,
+      default: undefined,
+    },
+  },
+  data: () => ({
+    isLoading: true,
+    paymentConfigs: [],
+  }),
+  methods: {
+    getPaymentConfigStatusDisplayText(paymentConfigStatus) {
+      switch (paymentConfigStatus) {
+        case paymentConfigStatuses.pendingPreOnboarding:
+          return 'Onboarding Incomplete';
+        case paymentConfigStatuses.pendingPostOnboarding:
+          return 'Pending Verification';
+        case paymentConfigStatuses.active:
+          return 'Connected';
+        case paymentConfigStatuses.unactivatedByCustomer:
+          return 'Inactive';
+        default:
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`Unsupported payment config status ${paymentConfigStatus}`);
+          }
+          return null;
+      }
+    },
+
+    getPaymentConfigStatusDisplayClasses(paymentConfigStatus) {
+      switch (paymentConfigStatus) {
+        case paymentConfigStatuses.pendingPreOnboarding:
+        case paymentConfigStatuses.pendingPostOnboarding:
+          return 'tw-bg-warning-500';
+        case paymentConfigStatuses.active:
+          return 'tw-bg-success-500';
+        case paymentConfigStatuses.unactivatedByCustomer:
+          return 'tw-bg-grayscale-600';
+        default:
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`Unsupported payment config status ${paymentConfigStatus}`);
+          }
+          return null;
+      }
+    },
+
+    async updatePaymentConfigs() {
+      if (!this.brandPageToken) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`brandPageToken is required`);
+        }
+        return;
+      }
+
+      try {
+        this.isLoading = true;
+
+        const result = await brandPageApiClient.getPaymentConfigsByBrandPageToken(this.brandPageToken);
+
+        if (result) {
+          this.paymentConfigs = Array.isArray(this.statusFilters)
+            ? result.filter((p) => this.statusFilters.some((s) => p.status === s))
+            : result;
+          this.$emit('on-load', this.paymentConfigs);
+        }
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};

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

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div v-if="isLoading" class="tw-w-full tw-flex tw-justify-center tw-p-2">
+      <Loader />
+    </div>
+    <Button
+      v-if="isAddPaymentProviderButtonVisible"
+      label="Add Payment Provider"
+      size="small"
+      variant="outline"
+      @on-click="onAddPaymentProviderButtonClick"
+    ></Button>
+    <Dropdown v-if="!isLoading && !isAddPaymentProviderButtonVisible" ref="dropdown">
+      <template #title>
+        <div v-if="selectedPaymentConfig" class="tw-flex">
+          <span class="tw-text-sm tw-grow tw-select-none">{{ selectedPaymentConfig.name }}</span>
+          <Pill
+            class="tw-text-white tw-mr-2"
+            :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)"
+          >
+            {{ getPaymentConfigStatusDisplayText(selectedPaymentConfig.status) }}
+          </Pill>
+        </div>
+      </template>
+
+      <DropdownItem
+        v-for="paymentConfig in paymentConfigs"
+        :key="`payment-config-${paymentConfig.id}`"
+        @click="onPaymentConfigClick(paymentConfig)"
+      >
+        <span class="tw-text-sm tw-grow tw-select-none">{{ paymentConfig.name }}</span>
+        <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)">
+          {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
+        </Pill>
+      </DropdownItem>
+
+      <DropdownItem v-if="showAddPaymentProvider" class="tw-border-t-2" @click="onAddPaymentProviderButtonClick">
+        <Button
+          :full-width="true"
+          label="Add Payment Provider"
+          size="small"
+          variant="outline"
+          @on-click="onAddPaymentProviderButtonClick"
+        />
+      </DropdownItem>
+    </Dropdown>
+  </div>
+</template>
+<script>
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
+import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
+import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
+import Pill from '../../../../src/atoms/components/Pill/Pill.vue';
+
+import PaymentConfigMixin, { paymentConfigStatuses } from './PaymentConfig.mixin';
+
+export default {
+  components: {
+    Button,
+    Dropdown,
+    DropdownItem,
+    Loader,
+    Pill,
+  },
+  mixins: [PaymentConfigMixin],
+  props: {
+    showAddPaymentProvider: {
+      type: Boolean,
+      default: true,
+    },
+    paymentConfigId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  data: () => ({ isAddPaymentProviderButtonVisible: false, selectedPaymentConfig: undefined }),
+  watch: {
+    paymentConfig(newValue) {
+      this.selectedPaymentConfig = newValue;
+    },
+  },
+  async mounted() {
+    if (this.brandPageToken) {
+      await this.updatePaymentConfigs();
+      if (!this.selectedPaymentConfig && this.paymentConfigs.length === 0) {
+        this.isAddPaymentProviderButtonVisible = true;
+        return;
+      }
+
+      const paymentConfig = this.paymentConfigs.find((c) => c.id === this.paymentConfigId);
+
+      if (paymentConfig) {
+        this.setSelectedPaymentConfig(paymentConfig);
+      } else if (this.paymentConfigs.length > 0) {
+        const activePaymentConfig = this.paymentConfigs.find((c) => c.status === paymentConfigStatuses.active);
+        this.setSelectedPaymentConfig(activePaymentConfig || this.paymentConfigs[0]);
+      }
+    } else {
+      this.isLoading = false;
+      this.isAddPaymentProviderButtonVisible = true;
+    }
+  },
+  methods: {
+    onAddPaymentProviderButtonClick() {
+      this.$emit('on-add-payment-provider-click');
+    },
+
+    onPaymentConfigClick(paymentConfig) {
+      this.setSelectedPaymentConfig(paymentConfig);
+      this.$refs.dropdown.hideMenu();
+    },
+
+    setSelectedPaymentConfig(paymentConfig) {
+      this.selectedPaymentConfig = paymentConfig;
+      this.$emit('on-payment-config-selected', this.selectedPaymentConfig);
+    },
+  },
+};
+</script>