feat: LWC best practices and various fixes on Experiences site components

cc-service-app/main/default/lwc/experiencesPanel/experiencesPanel.css

@@ -13,8 +13,8 @@
 }
 
 c-experiences-tile {
-    min-width: 200px;
     flex: 1;
+    display: flex;
 }
 
 c-paginator {

cc-service-app/main/default/lwc/experiencesPanel/experiencesPanel.html

@@ -7,36 +7,29 @@
             class="search-bar"
         >
         </lightning-combobox>
-        <template lwc:if={experiences.data}>
-            <template lwc:if={experiences.data.records.length}>
-                <div class="content">
-                    <template
-                        for:each={experiences.data.records}
-                        for:item="experience"
+        <template lwc:if={experiences}>
+            <div class="content">
+                <template for:each={experiences} for:item="experience">
+                    <c-experiences-tile
+                        key={experience.Id}
+                        experience={experience}
+                        onselected={handleExperienceSelected}
+                        class="slds-var-m-around_x-small"
                     >
-                        <c-experiences-tile
-                            key={experience.Id}
-                            experience={experience}
-                            onselected={handleExperienceSelected}
-                            class="slds-var-m-around_x-small"
-                        >
-                        </c-experiences-tile>
-                    </template>
-                </div>
-                <c-paginator
-                    page-number={pageNumber}
-                    page-size={experiences.data.pageSize}
-                    total-item-count={experiences.data.totalItemCount}
-                    onprevious={handlePreviousPage}
-                    onnext={handleNextPage}
-                ></c-paginator>
-            </template>
-            <template lwc:else>
-                There are no experiences matching your current selection
-            </template>
+                    </c-experiences-tile>
+                </template>
+            </div>
+            <c-paginator
+                page-number={pageNumber}
+                page-size={pageSize}
+                total-item-count={totalItemCount}
+                onprevious={handlePreviousPage}
+                onnext={handleNextPage}
+            ></c-paginator>
         </template>
-        <template lwc:if={experiences.error}>
-            <c-error-panel errors={experiences.error}></c-error-panel>
+        <template lwc:if={hasNoExperiences}>
+            There are no experiences matching your current selection
         </template>
+        <c-error-panel lwc:if={error} errors={error}></c-error-panel>
     </div>
 </template>

cc-service-app/main/default/lwc/experiencesPanel/experiencesPanel.js

@@ -1,50 +1,62 @@
-import { LightningElement, wire } from 'lwc';
+import { LightningElement, wire, track } from 'lwc';
 import { publish, MessageContext } from 'lightning/messageService';
+import { getPicklistValues } from 'lightning/uiObjectInfoApi';
+import EXPERIENCE_TYPE_FIELD from '@salesforce/schema/Experience__c.Type__c';
 import EXPERIENCE_SELECTED_MESSAGE from '@salesforce/messageChannel/ExperienceSelected__c';
 import getExperiences from '@salesforce/apex/ExperienceController.getExperiences';
 
 export default class ExperiencePanel extends LightningElement {
-    pageNumber = 1;
+    types = [];
+    type;
     pageSize;
-    totalItemCount = 0;
-    types = [
-        { label: 'Adventure Activities', value: 'Adventure Activities' },
-        { label: 'Beaches & Snorkeling', value: 'Beaches & Snorkeling' },
-        {
-            label: 'Cultural Tours & Workshops',
-            value: 'Cultural Tours & Workshops'
-        },
-        { label: 'Dining Experiences', value: 'Dining Experiences' },
-        {
-            label: "Family & Kids' Activities",
-            value: "Family & Kids' Activities"
-        },
-        { label: 'Fitness & Exercise', value: 'Fitness & Exercise' },
-        { label: 'Golf', value: 'Golf' },
-        { label: 'Nature & Eco Tours', value: 'Nature & Eco Tours' },
-        {
-            label: 'Nightlife & Entertainment',
-            value: 'Nightlife & Entertainment'
-        },
-        {
-            label: 'Relaxation & Quiet Zones',
-            value: 'Relaxation & Quiet Zones'
-        },
-        { label: 'Spa & Wellness', value: 'Spa & Wellness' },
-        { label: 'Swimming Pools', value: 'Swimming Pools' },
-        { label: 'Tennis & Pickleball', value: 'Tennis & Pickleball' },
-        { label: 'Water Sports', value: 'Water Sports' }
-    ];
-    type = 'Adventure Activities';
-    recordTypeId;
+    totalItemCount;
+    pageNumber = 1;
+    error;
+
+    @track experiences;
+
     @wire(MessageContext) messageContext;
 
     @wire(getExperiences, { type: '$type', pageNumber: '$pageNumber' })
-    experiences;
+    wiredExperiences({ error, data }) {
+        if (data) {
+            this.pageSize = data.pageSize;
+            this.totalItemCount = data.totalItemCount;
+            this.experiences = data.records.map((experienceRecord) => {
+                const experience = { ...experienceRecord };
+                experience.isSelected = false;
+                return experience;
+            });
+        } else if (error) {
+            this.experiences = undefined;
+            this.error = error;
+        }
+    }
+
+    @wire(getPicklistValues, {
+        recordTypeId: '012000000000000AAA', // Default record type Id
+        fieldApiName: EXPERIENCE_TYPE_FIELD
+    })
+    getExperienceTypePicklistValues({ error, data }) {
+        if (data) {
+            this.types = data.values;
+            if (data.values.length > 0) {
+                this.type = data.values[0].value;
+            }
+        } else if (error) {
+            this.error = error;
+        }
+    }
 
     handleExperienceSelected(event) {
+        const experienceId = event.detail;
+        // Update selection
+        this.experiences.forEach((experience) => {
+            experience.isSelected = experience.Id === experienceId;
+        });
+        // Send Lightning message to notify selection
         publish(this.messageContext, EXPERIENCE_SELECTED_MESSAGE, {
-            experienceId: event.detail
+            experienceId
         });
     }
 
@@ -65,4 +77,8 @@ export default class ExperiencePanel extends LightningElement {
     handleNextPage() {
         this.pageNumber = this.pageNumber + 1;
     }
+
+    get hasNoExperiences() {
+        return this.experiences && this.experiences.length === 0;
+    }
 }

cc-service-app/main/default/lwc/experiencesTile/experiencesTile.css

@@ -1,26 +1,24 @@
-.container {
-    height: 100% !important;
-}
-
-.content {
+button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: inherit;
     padding: 8px;
     background-color: #ffffff;
     border-radius: 0.25rem;
+    border-width: 0;
     text-align: center;
-    height: 100% !important;
 }
 
-a {
-    color: inherit;
-}
-a:hover {
-    text-decoration: none !important;
+.selected {
+    background-color: #04545f;
+    color: #ffffff;
 }
 
-img.experience {
+.experience-picture {
     border-radius: 0.25rem;
     height: 120px;
-    width: 100% !important;
+    width: 100%;
     pointer-events: none;
     object-fit: cover;
 }
@@ -29,3 +27,7 @@ img.experience {
     font-weight: bold;
     text-transform: uppercase;
 }
+
+.description {
+    text-overflow: ellipsis;
+}

cc-service-app/main/default/lwc/experiencesTile/experiencesTile.html

@@ -1,24 +1,11 @@
 <template>
-    <div class="container">
-        <a onclick={handleClick}>
-            <div class="content">
-                <img
-                    src={pictureUrl}
-                    class="experience slds-align_absolute-center"
-                    alt="Experience picture"
-                />
-                <div>
-                    <p
-                        class="title slds-align_absolute-center slds-m-vertical_xx-small"
-                    >
-                        {name}
-                    </p>
-                    <p class="slds-align_absolute-center">
-                        <lightning-formatted-rich-text value={description}>
-                        </lightning-formatted-rich-text>
-                    </p>
-                </div>
-            </div>
-        </a>
-    </div>
+    <button onclick={handleClick} title={experience.Name} class={tileClasses}>
+        <img
+            src={experience.Picture_URL__c}
+            class="experience-picture"
+            alt="Experience picture"
+        />
+        <p class="title slds-m-vertical_xx-small">{experience.Name}</p>
+        <p class="description">{experience.Description__c}</p>
+    </button>
 </template>

cc-service-app/main/default/lwc/experiencesTile/experiencesTile.js

@@ -5,32 +5,17 @@ import { LightningElement, api } from 'lwc';
  * Experience__c data must contain all fields used by this component.
  */
 export default class ExperiencesTile extends LightningElement {
-    _experience;
-
     /** Experience__c to display. */
-    @api
-    get experience() {
-        return this._experience;
-    }
-    set experience(value) {
-        this._experience = value;
-        this.pictureUrl = value.Picture_URL__c;
-        this.name = value.Name;
-        this.description = value.Description__c;
-        this.rating = value.Rating__c;
-    }
-
-    /** Experience__c field values to display. */
-    pictureUrl;
-    name;
-    description;
-    rating;
+    @api experience;
 
     handleClick() {
         const selectedEvent = new CustomEvent('selected', {
             detail: this.experience.Id
         });
         this.dispatchEvent(selectedEvent);
-        this.template.querySelector('a').style.color = 'rgb(238, 137, 111)';
+    }
+
+    get tileClasses() {
+        return this.experience.isSelected ? 'selected' : '';
     }
 }

data/data-Experience__c-large.json

@@ -153,7 +153,7 @@
             "Activity_Level__c": "Medium",
             "Capacity__c": 55,
             "Default_Start_Time__c": "15:00:00.000Z",
-            "Description__c": "Take part in a cooking class where you'll harvest fresh ingredients from our organic garden and learn to cook a delicious meal.",
+            "Description__c": "Take part in a cooking class where you'll harvest fresh ingredients from our organic garden and learn to cook a delicious meal.",
             "Duration_Hours__c": 3,
             "Location__c": "Organic Garden",
             "Picture_URL__c": "https://s3-us-west-2.amazonaws.com/dev-or-devrl-s3-bucket/sample-apps/coral-clouds/sjahfb9mmbzzyogf87fk.jpg",
@@ -217,7 +217,7 @@
             "Activity_Level__c": "Low",
             "Capacity__c": 20,
             "Default_Start_Time__c": "15:30:00.000Z",
-            "Description__c": "A baking class for kids where they'll learn to make and decorate cupcakes and cookies.",
+            "Description__c": "A baking class for kids where they'll learn to make and decorate cupcakes and cookies.",
             "Duration_Hours__c": 1,
             "Location__c": "Resort Kitchen",
             "Picture_URL__c": "https://s3-us-west-2.amazonaws.com/dev-or-devrl-s3-bucket/sample-apps/coral-clouds/sjahfb9mmbzzyogf87fk.jpg",
@@ -745,7 +745,7 @@
             "Activity_Level__c": "Medium",
             "Capacity__c": 30,
             "Default_Start_Time__c": "16:00:00.000Z",
-            "Description__c": "Board our 4x4 vehicles for an adventurous off-road journey through the jungle's heart.",
+            "Description__c": "Board our 4x4 vehicles for an adventurous off-road journey through the jungle's heart.",
             "Duration_Hours__c": 4,
             "Location__c": "Jungle Trails",
             "Picture_URL__c": "https://s3-us-west-2.amazonaws.com/dev-or-devrl-s3-bucket/sample-apps/coral-clouds/gzzr2klphfxmfoomupzp.jpg",

data/data-Experience__c.json

@@ -473,7 +473,7 @@
             "Activity_Level__c": "Medium",
             "Capacity__c": 30,
             "Default_Start_Time__c": "16:00:00.000Z",
-            "Description__c": "Board our 4x4 vehicles for an adventurous off-road journey through the jungle's heart.",
+            "Description__c": "Board our 4x4 vehicles for an adventurous off-road journey through the jungle's heart.",
             "Duration_Hours__c": 4,
             "Location__c": "Jungle Trails",
             "Picture_URL__c": "https://s3-us-west-2.amazonaws.com/dev-or-devrl-s3-bucket/sample-apps/coral-clouds/gzzr2klphfxmfoomupzp.jpg",

force-app/main/default/lwc/experienceSchedule/experienceSchedule.js

@@ -8,7 +8,14 @@ import isCommunity from '@salesforce/apex/ContextService.isCommunity';
 export default class ExperienceSchedule extends NavigationMixin(
     LightningElement
 ) {
-    @api recordId;
+    @api
+    get recordId() {
+        return this._recordId;
+    }
+    set recordId(value) {
+        this._recordId = value;
+    }
+
     _recordId;
     sessions = [];
     error;
@@ -39,7 +46,7 @@ export default class ExperienceSchedule extends NavigationMixin(
     }
 
     @wire(getExperienceSessionsForDate, {
-        experienceId: '$recordId',
+        experienceId: '$_recordId',
         timestamp: '$timestamp'
     })
     wiredSessions({ error, data }) {