@duffcloudservices/cms 0.3.12 → 0.3.14

package/src/components/DcsReviewShowcase.vue

@@ -1,326 +1,321 @@
-<script setup lang="ts">
-/**
- * Showcase component for displaying curated customer reviews.
- * Uses data-dcs-reviews attribute for visual editor integration.
- *
- * Usage:
- *   <DcsReviewShowcase section-key="testimonials" :defaults="fallbackReviews" />
- */
-import { computed } from 'vue'
-import { useReviewContent, type ReviewItem } from '../composables/useReviewContent'
-
-const props = withDefaults(defineProps<{
-  /** Key matching the data-dcs-reviews attribute for editor bridge discovery */
-  sectionKey: string
-  /** Page slug for page-specific content */
-  pageSlug?: string
-  /** Fallback reviews when no CMS content is available */
-  defaults?: ReviewItem[]
-  /** Maximum number of reviews to display */
-  maxDisplay?: number
-  /** Layout variant */
-  layout?: 'grid' | 'carousel' | 'list'
-  /** Whether to show the platform badge */
-  showPlatform?: boolean
-  /** Whether to show the review date */
-  showDate?: boolean
-  /** Whether to show reply text */
-  showReply?: boolean
-}>(), {
-  defaults: () => [],
-  maxDisplay: 6,
-  layout: 'grid',
-  showPlatform: true,
-  showDate: true,
-  showReply: false,
-})
-
-const { reviews, hasReviews } = useReviewContent({
-  sectionKey: props.sectionKey,
-  pageSlug: props.pageSlug,
-  defaults: props.defaults,
-})
-
-const visibleReviews = computed(() => reviews.value.slice(0, props.maxDisplay))
-
-const showEmptyState = computed(() => !hasReviews.value && isEditorContext())
-
-/** Get initials from author name for avatar fallback */
-function getInitials(name: string): string {
-  return name
-    .split(' ')
-    .map(word => word[0])
-    .filter(Boolean)
-    .slice(0, 2)
-    .join('')
-    .toUpperCase()
-}
-
-/** Format date string to readable format */
-function formatDate(dateStr: string): string {
-  const parsed = new Date(dateStr)
-  if (Number.isNaN(parsed.getTime())) {
-    return dateStr
-  }
-
-  return parsed.toLocaleDateString(undefined, {
-    year: 'numeric',
-    month: 'short',
-  })
-}
-
-/** Get platform display label */
-function platformLabel(platform: string): string {
-  switch (platform) {
-    case 'google':
-      return 'Google'
-    case 'meta':
-      return 'Facebook'
-    default:
-      return platform.charAt(0).toUpperCase() + platform.slice(1)
-  }
-}
-
-function isEditorContext(): boolean {
-  if (globalThis.window === undefined) {
-    return false
-  }
-
-  try {
-    return globalThis.self !== globalThis.top
-  } catch {
-    return true
-  }
-}
-</script>
-
-<template>
-  <div
-    :data-dcs-reviews="sectionKey"
-    class="dcs-review-showcase"
-    :class="`dcs-review-showcase--${layout}`"
-  >
-    <template v-if="hasReviews">
-      <div
-        class="dcs-review-showcase__grid"
-        :class="{
-          'dcs-review-grid': layout === 'grid',
-          'dcs-review-list': layout === 'list',
-          'dcs-review-carousel': layout === 'carousel',
-        }"
-      >
-        <article
-          v-for="review in visibleReviews"
-          :key="review.id"
-          class="dcs-review-card"
-        >
-          <div class="dcs-review-card__header">
-            <div class="dcs-review-card__avatar">
-              <img
-                v-if="review.authorPhotoUrl"
-                :src="review.authorPhotoUrl"
-                :alt="review.authorName"
-                class="dcs-review-card__avatar-img"
-                loading="lazy"
-              >
-              <span v-else class="dcs-review-card__avatar-initials">
-                {{ getInitials(review.authorName) }}
-              </span>
-            </div>
-
-            <div class="dcs-review-card__author-info">
-              <span class="dcs-review-card__author-name">{{ review.authorName }}</span>
-              <span v-if="showPlatform" class="dcs-review-card__platform">
-                {{ platformLabel(review.platform) }}
-              </span>
-            </div>
-          </div>
-
-          <div class="dcs-review-card__rating" :aria-label="`${review.rating} out of 5 stars`">
-            <svg
-              v-for="star in 5"
-              :key="star"
-              class="dcs-review-card__star"
-              :class="star <= review.rating ? 'dcs-review-card__star--filled' : 'dcs-review-card__star--empty'"
-              viewBox="0 0 20 20"
-              width="18"
-              height="18"
-              aria-hidden="true"
-            >
-              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 0 0 .95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 0 0-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 0 0-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 0 0-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 0 0 .951-.69l1.07-3.292z" />
-            </svg>
-          </div>
-
-          <p v-if="review.text" class="dcs-review-card__text">
-            {{ review.text }}
-          </p>
-
-          <time
-            v-if="showDate && review.date"
-            class="dcs-review-card__date"
-            :datetime="review.date"
-          >
-            {{ formatDate(review.date) }}
-          </time>
-
-          <div v-if="showReply && review.replyText" class="dcs-review-card__reply">
-            <span class="dcs-review-card__reply-label">Response:</span>
-            <p class="dcs-review-card__reply-text">{{ review.replyText }}</p>
-          </div>
-        </article>
-      </div>
-    </template>
-
-    <div v-else-if="showEmptyState" class="dcs-review-showcase__empty">
-      <p>Click to add reviews from Google or Meta</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.dcs-review-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.5rem;
-}
-
-.dcs-review-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.dcs-review-carousel {
-  display: flex;
-  gap: 1.5rem;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  -webkit-overflow-scrolling: touch;
-  padding-bottom: 0.5rem;
-}
-
-.dcs-review-carousel .dcs-review-card {
-  min-width: 300px;
-  scroll-snap-align: start;
-}
-
-.dcs-review-card {
-  background: var(--dcs-review-card-bg, #ffffff);
-  border: 1px solid var(--dcs-review-card-border, #e5e7eb);
-  border-radius: var(--dcs-review-card-radius, 0.75rem);
-  padding: var(--dcs-review-card-padding, 1.5rem);
-  transition: box-shadow 0.2s ease;
-}
-
-.dcs-review-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.dcs-review-card__header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-.dcs-review-card__avatar {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 9999px;
-  overflow: hidden;
-  flex-shrink: 0;
-  background: var(--dcs-review-avatar-bg, #e5e7eb);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dcs-review-card__avatar-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.dcs-review-card__avatar-initials {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--dcs-review-avatar-text, #6b7280);
-}
-
-.dcs-review-card__author-info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.dcs-review-card__author-name {
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--dcs-review-author-color, #111827);
-}
-
-.dcs-review-card__platform {
-  font-size: 0.75rem;
-  color: var(--dcs-review-platform-color, #6b7280);
-}
-
-.dcs-review-card__rating {
-  display: flex;
-  gap: 0.125rem;
-  margin-bottom: 0.5rem;
-}
-
-.dcs-review-card__star {
-  flex-shrink: 0;
-}
-
-.dcs-review-card__star--filled {
-  fill: var(--dcs-review-star-filled, #f59e0b);
-  color: var(--dcs-review-star-filled, #f59e0b);
-}
-
-.dcs-review-card__star--empty {
-  fill: var(--dcs-review-star-empty, #d1d5db);
-  color: var(--dcs-review-star-empty, #d1d5db);
-}
-
-.dcs-review-card__text {
-  font-size: 0.9rem;
-  line-height: 1.6;
-  color: var(--dcs-review-text-color, #374151);
-  margin: 0 0 0.75rem;
-}
-
-.dcs-review-card__date {
-  font-size: 0.75rem;
-  color: var(--dcs-review-date-color, #9ca3af);
-}
-
-.dcs-review-card__reply {
-  margin-top: 0.75rem;
-  padding: 0.75rem;
-  background: var(--dcs-review-reply-bg, #f9fafb);
-  border-radius: 0.5rem;
-  border-left: 3px solid var(--dcs-review-reply-border, #3b82f6);
-}
-
-.dcs-review-card__reply-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--dcs-review-reply-label-color, #3b82f6);
-}
-
-.dcs-review-card__reply-text {
-  font-size: 0.85rem;
-  color: var(--dcs-review-reply-text-color, #4b5563);
-  margin: 0.25rem 0 0;
-}
-
-.dcs-review-showcase__empty {
-  padding: 2rem;
-  text-align: center;
-  color: var(--dcs-review-empty-color, #9ca3af);
-  border: 2px dashed var(--dcs-review-empty-border, #e5e7eb);
-  border-radius: 0.75rem;
-}
-</style>
+<script setup lang="ts">
+/**
+ * Showcase component for displaying curated customer reviews.
+ * Uses data-dcs-reviews attribute for visual editor integration.
+ *
+ * Usage:
+ *   <DcsReviewShowcase section-key="testimonials" :defaults="fallbackReviews" />
+ */
+import { computed, ref } from 'vue'
+import { useReviewContent, type ReviewItem } from '../composables/useReviewContent'
+
+const props = withDefaults(defineProps<{
+  /** Key matching the data-dcs-reviews attribute for editor bridge discovery */
+  sectionKey: string
+  /** Page slug for page-specific content */
+  pageSlug?: string
+  /** Fallback reviews when no CMS content is available */
+  defaults?: ReviewItem[]
+  /** Maximum number of reviews to display */
+  maxDisplay?: number
+  /** Layout variant */
+  layout?: 'grid' | 'carousel' | 'list'
+  /** Whether to show the platform badge */
+  showPlatform?: boolean
+  /** Whether to show the review date */
+  showDate?: boolean
+  /** Whether to show reply text */
+  showReply?: boolean
+}>(), {
+  defaults: () => [],
+  maxDisplay: 6,
+  layout: 'grid',
+  showPlatform: true,
+  showDate: true,
+  showReply: false,
+})
+
+const { reviews, hasReviews } = useReviewContent({
+  sectionKey: props.sectionKey,
+  pageSlug: props.pageSlug,
+  defaults: props.defaults,
+})
+
+const visibleReviews = computed(() => reviews.value.slice(0, props.maxDisplay))
+
+const showEmptyState = computed(() => !hasReviews.value && isEditorContext())
+const failedAvatarIds = ref(new Set<string>())
+
+function shouldShowAvatar(review: ReviewItem): boolean {
+  return Boolean(review.authorPhotoUrl?.trim()) && !failedAvatarIds.value.has(review.id)
+}
+
+function markAvatarFailed(reviewId: string) {
+  if (failedAvatarIds.value.has(reviewId)) {
+    return
+  }
+
+  const next = new Set(failedAvatarIds.value)
+  next.add(reviewId)
+  failedAvatarIds.value = next
+}
+
+/** Format date string to readable format */
+function formatDate(dateStr: string): string {
+  const parsed = new Date(dateStr)
+  if (Number.isNaN(parsed.getTime())) {
+    return dateStr
+  }
+
+  return parsed.toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+  })
+}
+
+/** Get platform display label */
+function platformLabel(platform: string): string {
+  switch (platform) {
+    case 'google':
+      return 'Google'
+    case 'meta':
+      return 'Facebook'
+    default:
+      return platform.charAt(0).toUpperCase() + platform.slice(1)
+  }
+}
+
+function isEditorContext(): boolean {
+  if (globalThis.window === undefined) {
+    return false
+  }
+
+  try {
+    return globalThis.self !== globalThis.top
+  } catch {
+    return true
+  }
+}
+</script>
+
+<template>
+  <div
+    :data-dcs-reviews="sectionKey"
+    class="dcs-review-showcase"
+    :class="`dcs-review-showcase--${layout}`"
+  >
+    <template v-if="hasReviews">
+      <div
+        class="dcs-review-showcase__grid"
+        :class="{
+          'dcs-review-grid': layout === 'grid',
+          'dcs-review-list': layout === 'list',
+          'dcs-review-carousel': layout === 'carousel',
+        }"
+      >
+        <article
+          v-for="review in visibleReviews"
+          :key="review.id"
+          class="dcs-review-card"
+        >
+          <div class="dcs-review-card__header">
+            <div v-if="shouldShowAvatar(review)" class="dcs-review-card__avatar">
+              <img
+                :src="review.authorPhotoUrl ?? ''"
+                :alt="review.authorName"
+                class="dcs-review-card__avatar-img"
+                loading="lazy"
+                @error="markAvatarFailed(review.id)"
+              >
+            </div>
+
+            <div class="dcs-review-card__author-info">
+              <span class="dcs-review-card__author-name">{{ review.authorName }}</span>
+              <span v-if="showPlatform" class="dcs-review-card__platform">
+                {{ platformLabel(review.platform) }}
+              </span>
+            </div>
+          </div>
+
+          <div class="dcs-review-card__rating" :aria-label="`${review.rating} out of 5 stars`">
+            <svg
+              v-for="star in 5"
+              :key="star"
+              class="dcs-review-card__star"
+              :class="star <= review.rating ? 'dcs-review-card__star--filled' : 'dcs-review-card__star--empty'"
+              viewBox="0 0 20 20"
+              width="18"
+              height="18"
+              aria-hidden="true"
+            >
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 0 0 .95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 0 0-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 0 0-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 0 0-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 0 0 .951-.69l1.07-3.292z" />
+            </svg>
+          </div>
+
+          <p v-if="review.text" class="dcs-review-card__text">
+            {{ review.text }}
+          </p>
+
+          <time
+            v-if="showDate && review.date"
+            class="dcs-review-card__date"
+            :datetime="review.date"
+          >
+            {{ formatDate(review.date) }}
+          </time>
+
+          <div v-if="showReply && review.replyText" class="dcs-review-card__reply">
+            <span class="dcs-review-card__reply-label">Response:</span>
+            <p class="dcs-review-card__reply-text">{{ review.replyText }}</p>
+          </div>
+        </article>
+      </div>
+    </template>
+
+    <div v-else-if="showEmptyState" class="dcs-review-showcase__empty">
+      <p>Click to add reviews from Google or Meta</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dcs-review-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.dcs-review-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.dcs-review-carousel {
+  display: flex;
+  gap: 1.5rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 0.5rem;
+}
+
+.dcs-review-carousel .dcs-review-card {
+  min-width: 300px;
+  scroll-snap-align: start;
+}
+
+.dcs-review-card {
+  background: var(--dcs-review-card-bg, #ffffff);
+  border: 1px solid var(--dcs-review-card-border, #e5e7eb);
+  border-radius: var(--dcs-review-card-radius, 0.75rem);
+  padding: var(--dcs-review-card-padding, 1.5rem);
+  transition: box-shadow 0.2s ease;
+}
+
+.dcs-review-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.dcs-review-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.dcs-review-card__avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--dcs-review-avatar-bg, #e5e7eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dcs-review-card__avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.dcs-review-card__author-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.dcs-review-card__author-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--dcs-review-author-color, #111827);
+}
+
+.dcs-review-card__platform {
+  font-size: 0.75rem;
+  color: var(--dcs-review-platform-color, #6b7280);
+}
+
+.dcs-review-card__rating {
+  display: flex;
+  gap: 0.125rem;
+  margin-bottom: 0.5rem;
+}
+
+.dcs-review-card__star {
+  flex-shrink: 0;
+}
+
+.dcs-review-card__star--filled {
+  fill: var(--dcs-review-star-filled, #f59e0b);
+  color: var(--dcs-review-star-filled, #f59e0b);
+}
+
+.dcs-review-card__star--empty {
+  fill: var(--dcs-review-star-empty, #d1d5db);
+  color: var(--dcs-review-star-empty, #d1d5db);
+}
+
+.dcs-review-card__text {
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--dcs-review-text-color, #374151);
+  margin: 0 0 0.75rem;
+}
+
+.dcs-review-card__date {
+  font-size: 0.75rem;
+  color: var(--dcs-review-date-color, #9ca3af);
+}
+
+.dcs-review-card__reply {
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  background: var(--dcs-review-reply-bg, #f9fafb);
+  border-radius: 0.5rem;
+  border-left: 3px solid var(--dcs-review-reply-border, #3b82f6);
+}
+
+.dcs-review-card__reply-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--dcs-review-reply-label-color, #3b82f6);
+}
+
+.dcs-review-card__reply-text {
+  font-size: 0.85rem;
+  color: var(--dcs-review-reply-text-color, #4b5563);
+  margin: 0.25rem 0 0;
+}
+
+.dcs-review-showcase__empty {
+  padding: 2rem;
+  text-align: center;
+  color: var(--dcs-review-empty-color, #9ca3af);
+  border: 2px dashed var(--dcs-review-empty-border, #e5e7eb);
+  border-radius: 0.75rem;
+}
+</style>