@zap-wunschlachen/wl-shared-components 1.0.1 → 1.0.3

package/.github/workflows/playwright.yml

@@ -1,6 +1,7 @@
 name: Playwright Tests
 
 on:
+  workflow_dispatch:
   push:
     branches: [develop]
   pull_request:
@@ -34,10 +35,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Serve Storybook and run tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 7000 --silent" \
-            "npx wait-on http://localhost:7000 && npx playwright test --project=${{ matrix.browser }}"
+        run: npx playwright test --project=${{ matrix.browser }}
 
       - name: Upload test results
         uses: actions/upload-artifact@v4
@@ -45,7 +43,6 @@ jobs:
         with:
           name: playwright-results-${{ matrix.browser }}
           path: |
-            test-results/
             playwright-report/
           retention-days: 7
 
@@ -71,10 +68,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Run accessibility tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 7000 --silent" \
-            "npx wait-on http://localhost:7000 && npx playwright test --grep 'accessibility|Accessibility' --project=chromium"
+        run: npx playwright test --grep 'accessibility|Accessibility' --project=chromium
 
       - name: Upload accessibility results
         uses: actions/upload-artifact@v4
@@ -82,7 +76,6 @@ jobs:
         with:
           name: accessibility-results
           path: |
-            test-results/
             playwright-report/
           retention-days: 7
 
@@ -108,10 +101,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Run visual regression tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 7000 --silent" \
-            "npx wait-on http://localhost:7000 && npx playwright test tests/e2e/visual-regression.spec.ts --project=chromium"
+        run: npx playwright test tests/e2e/visual-regression.spec.ts --project=chromium
 
       - name: Upload visual test results
         uses: actions/upload-artifact@v4
@@ -119,7 +109,6 @@ jobs:
         with:
           name: visual-regression-results
           path: |
-            test-results/
             playwright-report/
           retention-days: 7
 
@@ -145,10 +134,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Run mobile tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 7000 --silent" \
-            "npx wait-on http://localhost:7000 && npx playwright test --project='Mobile Chrome' --project='Mobile Safari'"
+        run: npx playwright test --project='Mobile Chrome' --project='Mobile Safari'
 
       - name: Upload mobile test results
         uses: actions/upload-artifact@v4
@@ -156,7 +142,6 @@ jobs:
         with:
           name: mobile-test-results
           path: |
-            test-results/
             playwright-report/
           retention-days: 7
 
@@ -207,9 +192,15 @@ jobs:
             echo "- ❌ Mobile tests failed" >> test-summary.md
           fi
 
+      - name: Convert markdown to HTML
+        run: |
+          npm install -g markdown-cli
+          npx markdown-cli test-summary.md > test-summary.html
       - name: Upload consolidated report
         uses: actions/upload-artifact@v4
         with:
           name: consolidated-test-report
-          path: test-summary.md
+          path: |
+            test-summary.md
+            test-summary.html
           retention-days: 30

package/.github/workflows/update-snapshots.yml

@@ -0,0 +1,38 @@
+name: Visual Regression Snapshots
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update-snapshots:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Run visual regression tests
+        run: npx playwright test tests/e2e/visual-regression.spec.ts --update-snapshots
+
+      - name: Upload updated snapshots
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: visual-snapshots
+          path: | 
+            tests/e2e/
+            playwright-report/
+          # <-- this is exactly where your pathTemplate points,
+          # so you’ll get all of the fresh baseline images as an artifact.

package/App.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="app">
     <div class="element-container">
-      <div style="width: 100%; display: flex; flex-direction: column; gap: 20px;">
-        <Card :appointment="value0" :dentist-image-src="value0.dentist.imageSrc" />
-        <Card :appointment="value1" :dentist-image-src="value1.dentist.imageSrc" />
-        <Card :appointment="value2" :dentist-image-src="value2.dentist.imageSrc" />
-        <Card :appointment="value3" :dentist-image-src="value3.dentist.imageSrc" />
+      <div style="height:100%; width: 100%; display: flex; flex-direction: column; gap: 20px;">
+        <Card :appointment="value0" :dentist-image-src="value0.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card disabled :appointment="value1" :dentist-image-src="value1.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card :appointment="value2" :dentist-image-src="value2.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card :appointment="value3" :dentist-image-src="value3.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card duplicate-treatment-datetime disabled :appointment="value4" :dentist-image-src="value4.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
       </div>
      </div>
   </div>
@@ -13,8 +14,20 @@
 
 <script setup lang="ts">
 import {ref} from 'vue';
-import Card from '@/components/Appointment/Card/Card.vue';
 import type { AppointmentData } from '@/types';
+import Card from '@/components/Appointment/Card/Card.vue';
+
+function onConfirmed(appointmentId: string | undefined) {
+  console.log(`Appointment ${appointmentId} confirmed`);
+}
+
+function onCancelled(appointmentId: string | undefined) {
+  console.log(`Appointment ${appointmentId} cancelled`);
+}
+
+function onRescheduled(appointmentId: string | undefined) {
+  console.log(`Appointment ${appointmentId} rescheduled`);
+}
 
 const value0 = ref<AppointmentData>({
   id: "0",
@@ -23,12 +36,12 @@ const value0 = ref<AppointmentData>({
   end: "2025-09-23T16:30:00Z",
   status: "upcoming", // Change to 'past' or 'cancelled' to test other states
   is_confirmed: true,
-  template_name: ["Routine Checkup", "Cleaning"],
+  template_name: ["Cleaning"],
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",
-    gender: '',
-    imageSrc: ''
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
   },
   type: 0,
   address: "Musterstraße 1, 12345 Musterstadt",
@@ -42,12 +55,12 @@ const value1 = ref<AppointmentData>({
   end: "2025-09-23T16:30:00Z",
   status: "upcoming", // Change to 'past' or 'cancelled' to test other states
   is_confirmed: false,
-  template_name: ["Routine Checkup", "Cleaning"],
+  template_name: ["Cleaning"],
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",
-    gender: '',
-    imageSrc: ''
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
   },
   type: 0,
   address: "Musterstraße 1, 12345 Musterstadt",
@@ -61,12 +74,12 @@ const value2 = ref<AppointmentData>({
   end: "2025-09-23T16:30:00Z",
   status: "cancelled", // Change to 'past' or 'cancelled' to test other states
   is_confirmed: false,
-  template_name: ["Routine Checkup", "Cleaning"],
+  template_name: ["Cleaning"],
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",
-    gender: '',
-    imageSrc: ''
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
   },
   type: 0,
   address: "Musterstraße 1, 12345 Musterstadt",
@@ -84,8 +97,27 @@ const value3 = ref<AppointmentData>({
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",
-    gender: '',
-    imageSrc: ''
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
+  },
+  type: 0,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
+const value4 = ref<AppointmentData>({
+  id: "4",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "past", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: false,
+  template_name: ["Routine Checkup", "Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
   },
   type: 0,
   address: "Musterstraße 1, 12345 Musterstadt",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,7 +17,8 @@
     "test:e2e": "playwright test",
     "test:e2e:headed": "playwright test --headed",
     "test:e2e:ui": "playwright test --ui",
-    "test:e2e:report": "playwright show-report"
+    "test:e2e:report": "playwright show-report",
+    "test:e2e:update-snapshots": "playwright test tests/e2e/visual-regression.spec.ts --update-snapshots"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",

package/playwright.config.ts

@@ -5,8 +5,11 @@ export default defineConfig({
   fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: 1,
-  reporter: 'html',
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'playwright-report', open: 'never' }],
+  ],
   timeout: 60000,
   use: {
     baseURL: 'http://localhost:7000',
@@ -17,6 +20,12 @@ export default defineConfig({
   },
   expect: {
     timeout: 15000,
+
+    toHaveScreenshot: {
+      pathTemplate: '{testDir}/snapshots/{testFileName}/{platform}/{projectName}/{arg}{ext}',
+      threshold: 0.01,
+      maxDiffPixelRatio: 0.10,
+    }
   },
 
   projects: [
@@ -24,6 +33,10 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    { name: 'Mobile Chrome', use: { ...devices['Pixel 9'] } },
+    { name: 'Mobile Safari', use: { ...devices['iPhone 16'] } },
   ],
 
   webServer: {

package/src/components/Appointment/Card/Actions.vue

@@ -1,25 +1,25 @@
 <template>
     <template v-if="appointment.status === 'upcoming'">
         <div class="actions-grid">
-            <Button class="action-button" variant="outlined" prependIcon="heroicons:x-circle"
+            <Button class="action-button" variant="outlined" prependIcon="heroicons:x-circle" :disabled="disabled"
                 label='Termin stornieren' size="small" @click="handleCancel" />
 
-            <Button class="action-button" :variant="confirmable ? 'outlined' : 'flat'" prependIcon="heroicons:arrows-up-down"
+            <Button class="action-button" :variant="confirmable ? 'outlined' : 'flat'" prependIcon="heroicons:arrows-up-down" :disabled="disabled"
                 label='Termin verschieben' size="small" @click="handleReschedule" />
         </div>
 
 
-        <Button v-if="confirmable" class="full-width-button" label="Termin bestätigen"
+        <Button v-if="confirmable" class="full-width-button" label="Termin bestätigen" :disabled="disabled"
             @click="confirmAppointment" />
     </template>
 
     <template v-else-if="appointment.status === 'past'">
-        <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path"
+        <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path" :disabled="disabled"
             label='Diesen Termin nochmal buchen' @click="handleReschedule" />
     </template>
     <template v-else-if="appointment.status === 'cancelled'">
         <Button class="full-width-button-opacity" color="var(--error-red-0)" variant="text" prependIcon="heroicons:x-circle"
-            readonly label='Termin storniert' :disabled="false" />
+            readonly label='Termin storniert' :disabled="disabled" />
     </template>
 </template>
 
@@ -29,15 +29,19 @@ import { AppointmentData } from '@/types';
 import { computed } from 'vue';
 import Button from '../../Button/Button.vue';
 
-const { appointment } = defineProps<{
-    appointment: AppointmentData
+const { appointment, disabled } = defineProps<{
+    appointment: AppointmentData,
+    disabled?: boolean,
 }>();
 
+console.log('Actions component - appointment:', appointment);
+console.log('Actions component - disabled:', disabled);
+
 // Emit events upward when actions occur
 const emit = defineEmits<{
-    (e: 'confirm', id: string): void
-    (e: 'cancel', id: string): void
-    (e: 'reschedule', id: string): void
+    (e: 'confirmed', id: string): void
+    (e: 'cancelled', id: string): void
+    (e: 'rescheduled', id: string): void
 }>()
 
 // Determine visibility: only show confirm button when unconfirmed and appointment is within next 48h
@@ -50,15 +54,15 @@ const confirmable = computed(() => {
 
 // Log confirmation when the button is clicked
 const confirmAppointment = async () => {
-    emit('confirm', appointment.id)
+    emit('confirmed', appointment.id)
 }
 
 const handleCancel = async () => {
-    emit('cancel', appointment.id)
+    emit('cancelled', appointment.id)
 }
 
 const handleReschedule = async () => {
-    emit('reschedule', appointment.id)
+    emit('rescheduled', appointment.id)
 }
 
 </script>

package/src/components/Appointment/Card/Card.css

@@ -4,6 +4,7 @@
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
   overflow: hidden;
+  text-decoration: none;
 }
 
 .card-opacity {
@@ -38,6 +39,9 @@
 .card-body {
   background-color: white;
   padding: 1rem;
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .card-footer {
@@ -46,4 +50,12 @@
   border-bottom-left-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.appointment-detail {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.125rem; /* text-lg */
+  line-height: 1.75rem; /* leading-7 */
+  text-align: left;
 }

package/src/components/Appointment/Card/Card.vue

@@ -7,28 +7,28 @@
                     :class="['card-header', appointment.status === 'cancelled' ? 'header-bg-cancelled' : 'header-bg-normal']">
                     <div class="header-item">
                         <Icon name="heroicons:user-circle" size="20" class="header-icon" />
-                        <p> {{ appointment?.patientName || 'Unbekannter Patient' }} </p>
+                        <p> {{ appointment?.patientName || t('wl.appointment_card.unknown_patient') }} </p>
                     </div>
                     <div class="header-item">
                         <Icon name="heroicons:map-pin" size="20" class="header-icon" />
-                        <p> {{ format(appointment ? new Date(appointment.start) : new Date(), 'EEE, d MMM yyyy', { locale: de }) }} </p>
+                        <p> {{ treatmentDate }} </p>
                     </div>
                     <div class="header-item">
                         <Icon name="heroicons:clock" size="20" class="header-icon" />
-                        <p> {{ format(appointment ? new Date(appointment.start) : new Date(), 'HH:mm') }} </p>
+                        <p> {{ treatmentTime }} </p>
                     </div>
                 </div>
 
                 <div class="card-body">
-                    <h2>{{ Array.isArray(appointment?.template_name) ? appointment?.template_name.join(', ') :
-                        appointment?.template_name }}</h2>
+                    <h3 class="appointment-detail">{{ Array.isArray(appointment?.template_name) ? appointment?.template_name.join(', ') : appointment?.template_name }}</h3>
+                    <h3 class="appointment-detail" v-if="duplicateTreatmentDatetime">{{ treatmentDate }} | {{ treatmentTime }} {{ t('wl.appointment_card.uhr') }}</h3>
                     <Details :appointment="appointment" :dentist-image-src="dentistImageSrc" />
                     <hr />
                 </div>
             </div>
         </a>
         <div class="card-footer">
-            <Actions :appointment="appointment" @confirmed="emit('confirm', appointment?.id)"
+            <Actions :disabled="disabled" :appointment="appointment" @confirmed="emit('confirm', appointment?.id)"
                 @cancelled="emit('cancel', appointment?.id)" @rescheduled="emit('reschedule', appointment?.id)" />
         </div>
     </div>
@@ -38,15 +38,35 @@
 <script setup lang="ts">
 import { format } from 'date-fns'
 import { de } from 'date-fns/locale'
-import type { AppointmentData } from '@/types';
+import type { AppointmentData } from '@/types'
 import Details from './Details.vue'
 import Actions from './Actions.vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n';
 
-defineProps<{
+const { t } = useI18n();
+
+const props = defineProps<{
     appointment: AppointmentData,
     appointmentLink?: string,
-    dentistImageSrc?: string
-}>()
+    dentistImageSrc?: string,
+    disabled?: boolean,
+    duplicateTreatmentDatetime?: boolean
+}>();
+
+const treatmentDate = computed(() => {
+    return format(props.appointment ? new Date(props.appointment.start) : new Date(), 'EEE, d MMM yyyy', { locale: de })
+})
+
+const treatmentTime = computed(() => {
+    return format(props.appointment ? new Date(props.appointment.start) : new Date(), 'HH:mm')
+})
+
+console.log('Rendering Card for appointment:', props.appointment);
+console.log('Disabled state:', props.disabled);
+console.log('Appointment Link:', props.appointmentLink);
+console.log('Dentist Image Src:', props.dentistImageSrc);
+console.log('Duplicate Treatment Datetime:', props.duplicateTreatmentDatetime);
 
 // Emit events upward when confirmed or cancelled
 const emit = defineEmits(['confirm', 'cancel', 'reschedule'])

package/src/i18n/locales/de.json

@@ -14,6 +14,15 @@
       "code_was_sent": "Code an Nummer {phoneNumber} gesendet",
       "confirm": "Bestätigen",
       "resend": "Code erneut senden"
+    },
+    "appointment_card": {
+      "uhr": "Uhr",
+      "unknown_patient": "Unbekannter Patient",
+      "confirm": "Termin bestätigen",
+      "cancel": "Termin stornieren",
+      "reschedule": "Termin verschieben",
+      "reschedule_after_cancellation": "Diesen Termin nochmal buchen",
+      "cancelled": "Termin storniert"
     }
   }
 }

package/src/i18n/locales/en.json

@@ -14,6 +14,15 @@
       "code_was_sent": "Code sent to number {phoneNumber}",
       "confirm": "Confirm",
       "resend": "Resend code"
+    },
+    "appointment_card": {
+      "uhr": "o'clock",
+      "unknown_patient": "Unknown patient",
+      "confirm": "Confirm appointment",
+      "cancel": "Cancel appointment",
+      "reschedule": "Reschedule appointment",
+      "reschedule_after_cancellation": "Book this appointment again",
+      "cancelled": "Appointment cancelled"
     }
   }
 }

package/tests/e2e/all-components.spec.ts

@@ -78,9 +78,10 @@ test.describe('Component Tests', () => {
   test('OtpInput - default', async ({ page }) => {
     await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
     const frame = await getFrame(page);
-    const inputs = frame.locator('input');
+    await frame.waitForSelector('input.v-otp-input__field', { state: 'attached', timeout: 3000 });
+    const inputs = frame.locator('input.v-otp-input__field');
     const count = await inputs.count();
-    expect(count).toBeGreaterThan(3);
+    expect(count).toBe(6);
   });
 
   test('Audio - default', async ({ page }) => {