Components

Card

import CardReport from "@/components/polaris/CardReport.vue";

<CardReport title="Total reviews" :content="countData && countData.total" :load="loadReviewPage" />

Banner Noty

import BannerNoty from "@/components/polaris/BannerNoty.vue";

success, warning, critical

<BannerNoty tone="warning">
    <div class="Polaris-BlockStack" style="--pc-block-stack-order: column; --pc-block-stack-gap-xs: var(--p-space-050);">
        <p style="margin: 0;">Please install the
            <a href="https://chrome.google.com/webstore/detail/ryviu-import-reviews-from/nlijpgankndpklfipncpkljliinbcbca" class="Polaris-Link" target="_blank">Ryviu chrome extension</a>, and reload this page after adding the extension to import reviews.
        </p>
    <div>
    <div class="Polaris-ButtonGroup">
        <div class="Polaris-ButtonGroup__Item">
          <button class="Polaris-Button" type="button">
            <span class="Polaris-Button__Content">
              <span class="Polaris-Button__Text">Connect account</span>
            </span>
          </button>
        </div>
      </div>
</BannerNoty>

Banner Props

import BannerProps from "@/components/polaris/BannerProps.vue";
<BannerProps 
    v-if="userLevel == 3"
    titleBanner="Import CSV does not support the Free plan."
    tone="warning"
>
    <p>Import CSV are not available in your current plan. In order to use this feature you must 
        <router-link to="/settings/general?subscription=true" class="Polaris-Link Polaris-Link--monochrome">upgrade your plan</router-link>.</p>
</BannerProps>

Empty table

import TableEmpty from "@/components/polaris/TableEmpty.vue";

<TableEmpty 
    v-if="totalReview == 0 && loadReviewPage" 
    title="No review yet"
    subTitle="Try changing the filters or search term">
</TableEmpty>

Empty page

import Empty from "@/components/common/Empty.vue";

<Empty
    v-if="totalReview == 0 && loadReviewPage" 
    title="Add, import & manage customer reviews."
    subTitle="Add or import reviews from your social media into a single place. You'll be able to show them on your website and increase social proof.">

    <div class="Polaris-InlineStack" style="--pc-inline-stack-align:center;--pc-inline-stack-wrap:wrap;--pc-inline-stack-gap-xs:var(--p-space-200)">
    <a class="Polaris-Button" href="https://docs.ryviu.com/en/articles/1745004-import-reviews-to-shopify-and-prestashop-products" target="_blank" data-polaris-unstyled="true">
        <span class="Polaris-Button__Content">
        <span class="Polaris-Button__Text">Learn more</span>
        </span>
    </a>
    
    </div>
</Empty>

Modal Confirm

import ModalConfirm from "@/components/polaris/ModalConfirm.vue";

<button class="Polaris-ActionList__Item Polaris-ActionList--default" type="button" @click="deleteModal = true">
  <span class="Polaris-Button__Content">
    <span class="Polaris-Button__Text">{{$t('common.BTN_DELETE')}}</span>
  </span>
</button>

<ModalConfirm 
  v-if="deleteModal"
  :dialogVisible="deleteModal"
  @close="deleteModal = false"
  titleModal="Delete product"
  :subModal="`The product will be removed from the product list in the Ryviu Dashboard. This can’t be undone.`"
  >
  <div class="Ryviu-Footer-Modal-Polaris">
    <div class="Polaris-InlineStack" style="--pc-inline-stack-align: space-between; --pc-inline-stack-block-align: center; --pc-inline-stack-wrap: wrap; --pc-inline-stack-gap-xs: var(--p-space-400);">
      <div class="Polaris-Box"></div>
      <div class="Polaris-InlineStack" style="--pc-inline-stack-wrap: wrap; --pc-inline-stack-gap-xs: var(--p-space-200);">
          <button type="primary" class="Polaris-Button" @click="confirmModal = false">
            <span class="Polaris-Button__Content">
                <span class="Polaris-Button__Text">{{ $t('common.BTN_CANCEL') }}</span>
            </span>
          </button>
          <button :class="`Polaris-Button Polaris-Button--primary Polaris-Button--critical`"  @click="doRemove" v-loading="deleteModalLoading">
            <span class="Polaris-Button__Content">
              <span class="Polaris-Button__Text">Delete</span>
            </span>
          </button>
      </div>
    </div>
  </div>
</ModalConfirm>

Image

import Thumbnail from "@/components/polaris/Thumbnail.vue";
<Thumbnail :src="item.data.image_product" />