cloudcommerce 0.36.2 → 0.37.1

package/ecomplus-stores/monocard/functions/ssr/src/components/MonocardCustomizer.vue

@@ -1,261 +0,0 @@
-<script lang="ts" setup>
-import type { Products } from '@cloudcommerce/api/types';
-import ecomUtils from '@ecomplus/utils';
-
-export interface Props {
-  monocard: Partial<Products>;
-  monocardWithLogo?: Partial<Products>;
-}
-
-const { price: getPrice, formatMoney } = ecomUtils;
-// eslint-disable-next-line vue/no-setup-props-destructure
-const {
-  monocard,
-  monocardWithLogo,
-} = withDefaults(defineProps<Props>(), {
-  monocard: typeof window === 'object'
-    ? (window as any).monocard
-    : {},
-  monocardWithLogo: typeof window === 'object'
-    ? (window as any).monocardWithLogo
-    : {},
-});
-const cardVariants: Array<{ bgColor: string, textColor: string }> = [];
-monocard.variations?.forEach(({ specifications: { colors } }) => {
-  if (colors && colors.length) {
-    const { value: bgColor } = colors[0];
-    if (
-      !cardVariants.find((cardVariant) => cardVariant.bgColor === bgColor)
-      && colors[1]?.value !== bgColor
-    ) {
-      cardVariants.push({
-        bgColor,
-        textColor: colors[1]?.value || (bgColor.startsWith('#f') ? '#000' : '#fff'),
-      });
-    }
-  }
-});
-const cardBgColor = ref(cardVariants[0]?.bgColor || '#000');
-const cardTextColor = ref(cardVariants[0]?.textColor || '#fff');
-const selectCardVariant = ({ bgColor, textColor }: typeof cardVariants[0]) => {
-  cardBgColor.value = bgColor;
-  cardTextColor.value = textColor;
-};
-const isLogoEnabled = ref(typeof window === 'object'
-  && /[?&]logomarca(&|$)/.test(window.location.search));
-const enablingLogoTimer = ref(null);
-watch(isLogoEnabled, (_isLogoEnabled) => {
-  if (_isLogoEnabled) {
-    clearTimeout(enablingLogoTimer.value);
-    enablingLogoTimer.value = setTimeout(() => {
-      enablingLogoTimer.value = null;
-    }, 3000);
-  } else {
-    enablingLogoTimer.value = null;
-  }
-});
-const customLogoUrl = ref('');
-const isLoadingLogo = ref(false);
-const upload = (ev) => {
-  isLoadingLogo.value = true;
-  const image = ev.target.files[0];
-  const reader = new FileReader();
-  reader.readAsDataURL(image);
-  reader.onload = (loadEv) => {
-    customLogoUrl.value = loadEv.target.result.toString();
-    setTimeout(() => {
-      isLoadingLogo.value = false;
-    }, 3000);
-  };
-};
-const isLogoInputFocus = ref(false);
-const isNameInputFocus = ref(false);
-const cardAnimationClass = computed(() => {
-  if (!isLogoEnabled.value) {
-    return 'card--no-back';
-  }
-  return !isNameInputFocus.value
-    && (isLoadingLogo.value || enablingLogoTimer.value || isLogoInputFocus.value)
-    ? 'card--show-back' : null;
-});
-const logoInput = ref(null);
-const cardsBag = ref([{
-  holderName: '',
-  quantity: 1,
-}]);
-const focusedCard = ref(0);
-const holderName = computed(() => {
-  return cardsBag.value[focusedCard.value].holderName;
-});
-const removeCard = (index: number) => {
-  cardsBag.value.splice(index, 1);
-  if (focusedCard.value === index) {
-    focusedCard.value = 0;
-  }
-};
-const totalQuantity = computed(() => {
-  return cardsBag.value.reduce((acc, { quantity }) => (acc + quantity), 0);
-});
-const price = computed(() => {
-  if (isLogoEnabled.value && customLogoUrl.value && monocardWithLogo) {
-    return getPrice(monocardWithLogo) as number;
-  }
-  return getPrice(monocard) as number;
-});
-const logoAdditionalPrice = monocardWithLogo
-  ? getPrice(monocardWithLogo) - getPrice(monocard) as number : 30;
-</script>
-
-<template>
-  <div class="container">
-    <article class="mx-auto max-w-4xl gap-5 lg:flex">
-      <div class="order-2 mb-10 basis-1/2 lg:mb-0">
-        <div class="mb-3 mr-5 inline-block">
-          <i class="i-checkbox-circle-fill bg-primary mr-1"></i> Frete grátis
-        </div>
-        <div class="mb-3 inline-block">
-          <i class="i-checkbox-circle-fill bg-primary mr-1"></i> Sem mensalidade
-        </div>
-        <a name="comprar"></a>
-        <h1 class="mb-3">Seu cartão de visitas eletrônico personalizado</h1>
-        <h4 class="mb-10 text-sm">
-          <a href="#como-funciona">
-            <i class="i-play-circle-line mr-1"></i>Como o Monocard funciona?
-          </a>
-        </h4>
-        <form>
-          <div
-            v-for="(card, i) in cardsBag"
-            :key="i"
-            class="mb-3 flex gap-2"
-          >
-            <input
-              id="login-form-email"
-              type="text"
-              class="mb-0 uppercase"
-              placeholder="Nome no cartão"
-              @focus="focusedCard = i"
-              @focusin="isNameInputFocus = true"
-              @focusout="isNameInputFocus = false"
-              v-model="card.holderName"
-              required
-            >
-            <div class="flex basis-1/3 items-center">
-              <input
-                class="mb-0"
-                type="number"
-                min="1"
-                v-model="card.quantity"
-                @change="ev => (ev as any).target.value <= 0 ? card.quantity = 1 : null"
-                required
-              >
-              <div v-if="cardsBag.length > 1" class="flex-auto">
-                <div
-                  class="i-close-fill ml-1 bg-red-400 text-xl"
-                  role="button"
-                  :aria-label="`Remover cartão ${(i + 1)}`"
-                  @click="removeCard(i)"
-                ></div>
-              </div>
-            </div>
-          </div>
-          <div class="gap-8 lg:flex">
-            <div class="order-last flex-none">
-              <button
-                class="secondary inline-block w-auto flex-none text-sm leading-none"
-                type="button"
-                @click="cardsBag.push({ holderName: '', quantity: 1 })"
-              >
-                <i class="i-add-circle-fill mr-1"></i>
-                Adicionar cartão
-              </button>
-            </div>
-            <div class="grow">
-              <div class="mb-5 mt-6">
-                <strong class="block text-4xl">
-                  {{ formatMoney(price * totalQuantity) }}
-                </strong>
-                <span v-if="totalQuantity > 1">{{ formatMoney(price) }} /cartão</span>
-              </div>
-              <button class="rounded-full text-xl font-bold uppercase" type="submit">
-                Comprar
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="order-1 basis-1/2">
-        <div
-          class="card mb-5 mt-2"
-          :class="cardAnimationClass"
-          :style="{
-            '--background-color': cardBgColor,
-            '--color': cardTextColor,
-          }"
-        >
-          <div class="card__front card__part">
-            <div class="card__front-square card__square">
-              <div class="i-qr-code-line text-5xl"></div>
-            </div>
-            <div class="card__front-logo card__logo">
-              <div class="text-sm font-bold">monocard</div>
-            </div>
-            <div class="card__space-75">
-              <p class="card__info">{{ holderName || 'Seu nome aqui' }}</p>
-            </div>
-            <div class="card__space-25">
-              <p class="card__info">
-                <i class="i-wifi-fill rotate-90 text-lg"></i>
-              </p>
-            </div>
-          </div>
-          <div class="card__back card__part">
-            <img
-              :src="(isLogoEnabled && customLogoUrl) || '/img/uploads/sua-logo-aqui.png'"
-              class="cursor-pointer"
-              @click="logoInput.click()"
-            >
-          </div>
-        </div>
-        <button
-          v-for="{ bgColor, textColor } in cardVariants"
-          :key="bgColor"
-          class="border-1 border-gray relative mr-2 inline-block h-5
-            w-5 rounded-full p-0 shadow drop-shadow"
-          :style="{ background: bgColor }"
-          @click="selectCardVariant({ bgColor, textColor })"
-        >
-          <i
-            v-if="cardBgColor === bgColor"
-            class="i-checkbox-fill absolute bg-green-300 text-xs"
-          ></i>
-        </button>
-        <div class="mt-5">
-          <label for="switch-logo" class="inline-block">
-            <input
-              id="switch-logo"
-              type="checkbox"
-              name="switch"
-              role="switch"
-              v-model="isLogoEnabled"
-            >
-            Imagem no verso
-            <small class="mb-2 text-sm" v-if="logoAdditionalPrice">
-              <br>+ {{ formatMoney(logoAdditionalPrice) }} por cartão
-            </small>
-          </label>
-        </div>
-        <input
-          v-if="isLogoEnabled"
-          type="file"
-          class="w-auto"
-          accept="image/*"
-          ref="logoInput"
-          @change="upload"
-          @mouseenter="isLogoInputFocus = true"
-          @mouseout="isLogoInputFocus = false"
-        >
-      </div>
-    </article>
-  </div>
-</template>

package/ecomplus-stores/monocard/functions/ssr/src/components/PitchBar.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="relative z-20 bg-black uppercase">
-    <div class="bg-primary/20">
-      <div class="container mx-auto px-3 py-1 md:w-2/3">
-        <Carousel :autoplay="countValidSlides > 1 ? 7000 : undefined">
-          <li
-            v-for="(slide, i) in slides"
-            :key="i"
-            class="h-full shrink-0 basis-full text-center"
-          >
-            <component
-              :is="slide.href ? 'ALink' : 'span'"
-              :href="slide.href"
-              :target="slide.target"
-              class="inline-block px-8"
-              :class="slide.href ? 'hover:underline' : null"
-            >
-              <span
-                v-if="parsedContents[i]"
-                v-html="parsedContents[i]"
-                class="prose text-primary-100 text-sm"
-              ></span>
-            </component>
-          </li>
-          <template #controls>
-            <div
-              v-show="countValidSlides > 1"
-              class="text-primary-400 text-xl leading-none"
-            >
-              <CarouselControl
-                :direction="-1"
-                class="hover:text-primary-200 pr-2"
-              />
-              <CarouselControl class="hover:text-primary-200 pl-2" />
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import usePitchBar from '@@sf/composables/use-pitch-bar';
-import Carousel from '@@sf/components/Carousel.vue';
-import CarouselControl from '@@sf/components/CarouselControl.vue';
-
-export interface Props {
-  slides: Array<{
-    href?: string;
-    target?: string;
-    html: string;
-  }>;
-}
-
-const props = defineProps<Props>();
-const {
-  parsedContents,
-  countValidSlides,
-} = usePitchBar(props);
-</script>

package/ecomplus-stores/monocard/functions/ssr/src/components/Prices.vue

@@ -1,95 +0,0 @@
-<template>
-  <div
-    class="text-base-600
-      [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]"
-    :class="isBig ? 'text-lg' : null"
-  >
-    <span v-if="comparePrice" class="text-base-500 mr-1 text-[87%]">
-      <small v-if="isLiteral">
-        {{ `${$t.i19from} ` }}
-      </small>
-      <s>{{ $money(comparePrice) }}</s>
-      <small v-if="isLiteral">
-        {{ ` ${$t.i19to}` }}
-      </small>
-    </span>
-    <strong
-      class="text-base-800"
-      :class="isBig ? 'text-4xl block' : 'inline-block'"
-    >
-      <small v-if="hasVariedPrices">
-        {{ `${$t.i19asOf} ` }}
-      </small>
-      {{ $money(salePrice) }}
-    </strong>
-    <Fade slide="down">
-      <div v-if="cashbackValue && hasCashback" class="relative z-10">
-        <span :data-tooltip="$t.i19get$1back
-          .replace('$1', $percentage(cashbackPercentage))">
-          <i class="i-arrow-go-back-fill mr-1"></i>
-          <span class="font-medium">
-            {{ $money(cashbackValue) }}
-          </span>
-          <small> cashback</small>
-        </span>
-      </div>
-    </Fade>
-    <Fade slide="down">
-      <div v-if="installmentValue && hasPriceOptions">
-        <small v-if="isLiteral">
-          {{ `${$t.i19upTo} ` }}
-        </small>
-        {{ installmentsNumber }}x
-        <small v-if="isLiteral">
-          {{ ` ${$t.i19of} ` }}
-        </small>
-        <span>{{ $money(installmentValue) }}</span>
-        <small v-if="!monthlyInterest && isLiteral">
-          {{ ` ${$t.i19interestFree}` }}
-        </small>
-      </div>
-    </Fade>
-    <Fade slide="down">
-      <div v-if="priceWithDiscount < salePrice && hasPriceOptions">
-        <small v-if="!discountLabel">
-          {{ `${$t.i19asOf} ` }}
-        </small>
-        <span>{{ $money(priceWithDiscount) }}</span>
-        <small v-if="discountLabel">
-          {{ ` ${discountLabel}` }}
-        </small>
-      </div>
-    </Fade>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  type Props as UsePricesProps,
-  usePrices,
-} from '@@sf/composables/use-prices';
-
-export interface Props extends UsePricesProps {
-  isBig?: boolean;
-  isLiteral?: boolean;
-  hasCashback?: boolean;
-  hasPriceOptions?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  hasCashback: true,
-  hasPriceOptions: true,
-});
-const {
-  hasVariedPrices,
-  salePrice,
-  comparePrice,
-  cashbackPercentage,
-  cashbackValue,
-  installmentsNumber,
-  monthlyInterest,
-  installmentValue,
-  priceWithDiscount,
-  discountLabel,
-} = usePrices(props);
-</script>

package/ecomplus-stores/monocard/functions/ssr/src/components/ProductCard.vue

@@ -1,117 +0,0 @@
-<template>
-  <article
-    ref="card"
-    :data-sku="product.sku"
-    class="group relative mx-auto h-full max-w-[350px] py-3"
-  >
-    <ALink
-      :href="link"
-      class="flex h-full flex-col overflow-hidden rounded
-      ring-black/5 group-hover:shadow group-hover:ring-1"
-    >
-      <div class="aspect-square p-2
-        transition-transform motion-safe:group-hover:scale-110">
-        <div class="relative h-full w-full overflow-hidden rounded bg-white
-          group-hover:rounded-none">
-          <span v-if="images?.length" class="text-xs text-opacity-70">
-            <AImg
-              :picture="images[0]"
-              :alt="title"
-              class="absolute left-0 top-0 block h-full w-full object-cover"
-            />
-            <AImg
-              v-if="images[1] && wasHoveredOnce"
-              :picture="images[1]"
-              :alt="title"
-              class="absolute left-0 top-0 z-10 block h-full w-full
-              object-cover text-transparent opacity-0
-              transition-opacity group-hover:opacity-100 motion-safe:duration-300"
-            />
-          </span>
-          <div
-            v-else
-            class="from-base-50/20 to-base-100 h-full w-full bg-gradient-to-br"
-          />
-        </div>
-      </div>
-      <span
-        v-if="discountPercentage"
-        class=":uno: bg-secondary/70 text-on-secondary absolute
-        right-2 top-9 py-0.5
-        pl-3 pr-1.5 text-xs
-        transition-transform [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]
-        group-hover:translate-x-2 group-hover:scale-110"
-      >
-        -<strong>{{ discountPercentage }}</strong>%
-      </span>
-      <div class="relative z-10 flex grow flex-col justify-between
-        bg-white/40 p-4 group-hover:backdrop-blur-md">
-        <component
-          :is="headingTag"
-          class="ui-link line-clamp-2 no-underline"
-          :class="[
-            isActive ? 'text-base-700' : 'text-base-500',
-            link ? 'group-hover:text-primary group-hover:underline' : null,
-          ]"
-        >
-          {{ title }}
-        </component>
-        <div class="pt-2">
-          <div v-if="isActive">
-            <Prices :product="product" />
-          </div>
-          <span v-else class="ui-badge bg-warning-100 text-warning-700">
-            {{ !isInStock ? $t.i19outOfStock : $t.i19inactive }}
-          </span>
-        </div>
-        <button
-          v-if="isActive && !hasVariations"
-          class=":uno: ui-btn-sm ui-btn-primary absolute -top-6
-          left-0 -z-10 hidden w-full rounded-none
-          opacity-0 transition group-hover:z-10 group-hover:opacity-100 md:block"
-          @click.prevent="addProductToCart(product)"
-        >
-          <span class="bg-on-primary text-primary mr-1 inline-block h-4 w-4
-            rounded-full text-center text-base leading-none opacity-80">
-            &plus;
-          </span>
-          {{ $t.i19addToCart }}
-        </button>
-      </div>
-    </ALink>
-  </article>
-</template>
-
-<script setup lang="ts">
-import { watchOnce, useElementHover } from '@vueuse/core';
-import { addProductToCart } from '@@sf/state/shopping-cart';
-import {
-  type Props as UseProductCardProps,
-  useProductCard,
-} from '@@sf/composables/use-product-card';
-import Prices from '~/components/Prices.vue';
-
-export type Props = UseProductCardProps & {
-  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  headingTag: 'h3',
-});
-const {
-  product,
-  title,
-  link,
-  images,
-  isInStock,
-  isActive,
-  discountPercentage,
-  hasVariations,
-} = useProductCard(props as UseProductCardProps);
-const card = ref<HTMLElement | null>(null);
-const isHovered = useElementHover(card);
-const wasHoveredOnce = ref(false);
-watchOnce(isHovered, () => {
-  wasHoveredOnce.value = true;
-});
-</script>

package/ecomplus-stores/monocard/functions/ssr/src/components/ProductDetails.vue

@@ -1,122 +0,0 @@
-<template>
-  <section class="ui-section relative grid grid-cols-1 items-start
-    gap-5 md:gap-4 lg:grid-cols-4 2xl:gap-6">
-    <div class="w-full lg:col-span-3">
-      <template v-if="product.pictures?.length">
-        <ImagesGallery :pictures="product.pictures" />
-      </template>
-    </div>
-    <div class="top-0 py-4 lg:sticky">
-      <h1 class="ui-text-brand text-base-700 text-xl">
-        {{ title }}
-      </h1>
-      <div v-if="isActive" class="mt-5">
-        <Prices :product="product" is-big is-literal />
-        <SkuSelector
-          v-if="product.variations"
-          :variations="product.variations"
-          v-model:variation-id="variationId"
-          class="my-4"
-        />
-        <Fade slide="down">
-          <div v-if="hasSkuSelectionAlert" class="ui-alert inline-block">
-            {{ $t.i19selectVariationMsg }}
-            <i class="i-arrow-right ml-1 -rotate-90"></i>
-          </div>
-        </Fade>
-        <div class="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2
-          overflow-hidden md:flex-nowrap lg:mt-4 lg:flex-wrap">
-          <QuantitySelector
-            v-model="quantity"
-            :min="product.min_quantity"
-            :max="product.quantity"
-            class="border-base-100 rounded md:mr-5
-            lg:mb-2 lg:mr-auto lg:border-2"
-          />
-          <CheckoutLink
-            class="ui-btn-lg ui-btn-primary grow text-center"
-            to="checkout"
-            :cart-item="{
-              product_id: product._id,
-              quantity,
-              variation_id: variationId || undefined,
-            }"
-            :data-tooltip="!isSkuSelected ? $t.i19chooseProductDetailsToBuy : null"
-            @click="checkVariation"
-          >
-            <i class="i-chevron-double-right mr-1"></i>
-            {{ $t.i19buy }}
-          </CheckoutLink>
-          <button
-            class="ui-btn-lg ui-btn-contrast grow"
-            @click.prevent="addToCart"
-            :data-tooltip="!isSkuSelected ? $t.i19chooseProductDetailsToBuy : null"
-          >
-            {{ $t.i19addToCart }}
-          </button>
-        </div>
-      </div>
-    </div>
-    <div class="w-full lg:col-span-3">
-      <slot name="description" />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import type { ResourceId, Products } from '@cloudcommerce/api/types';
-import { useUrlSearchParams } from '@vueuse/core';
-import { addProductToCart } from '@@sf/state/shopping-cart';
-import { useProductCard } from '@@sf/composables/use-product-card';
-import CheckoutLink from '@@sf/components/CheckoutLink.vue';
-import QuantitySelector from '@@sf/components/QuantitySelector.vue';
-import Prices from '~/components/Prices.vue';
-import ImagesGallery from '~/components/ImagesGallery.vue';
-import SkuSelector from '~/components/SkuSelector.vue';
-
-export interface Props {
-  product?: Products;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  product: () => globalThis.$storefront.apiContext?.doc as Products,
-});
-const {
-  product,
-  title,
-  isActive,
-} = useProductCard<Products>(props);
-const quantity = ref(product.min_quantity || 1);
-const params = useUrlSearchParams('history');
-const hasSkuSelectionAlert = ref(false);
-const variationId = ref<ResourceId | null>(null);
-watch(variationId, (_variationId) => {
-  if (_variationId) {
-    params.var = _variationId;
-    hasSkuSelectionAlert.value = false;
-  }
-});
-onMounted(() => {
-  watch(params, ({ var: variation }) => {
-    if (typeof variation === 'string' && variation) {
-      variationId.value = variation as ResourceId;
-    }
-  }, { immediate: true });
-});
-const isSkuSelected = computed(() => {
-  return Boolean(!product.variations?.length || variationId.value);
-});
-const checkVariation = (ev?: Event) => {
-  if (!isSkuSelected.value) {
-    if (ev) ev.preventDefault();
-    hasSkuSelectionAlert.value = true;
-  } else {
-    hasSkuSelectionAlert.value = false;
-  }
-  return !hasSkuSelectionAlert.value;
-};
-const addToCart = () => {
-  if (!checkVariation()) return;
-  addProductToCart(product, variationId.value ? variationId.value : undefined);
-};
-</script>