@wix/himalaya-cli 0.1613.0 → 0.1615.0

package/templates/salon-spa/tokens.json

@@ -0,0 +1,341 @@
+{
+  "colors": {
+    "surfacePrimary": {
+      "light": "#FAF6EF",
+      "dark": "#141712",
+      "highContrast": "#FFFFFF"
+    },
+    "surfaceSecondary": {
+      "light": "#F2ECE2",
+      "dark": "#1B1F19",
+      "highContrast": "#F2F2F2"
+    },
+    "surfaceElevated": {
+      "light": "#FFFFFF",
+      "dark": "#222720",
+      "highContrast": "#FFFFFF"
+    },
+    "surfaceSubtle": {
+      "light": "#F6F1E8",
+      "dark": "#181B16",
+      "highContrast": "#FFFFFF"
+    },
+    "surfaceTertiary": {
+      "light": "#E9E1D4",
+      "dark": "#2A3027",
+      "highContrast": "#E6E6E6"
+    },
+    "textPrimary": {
+      "light": "#252A22",
+      "dark": "#F2EFE7",
+      "highContrast": "#000000"
+    },
+    "textSecondary": {
+      "light": "#585E53",
+      "dark": "#C2BDB1",
+      "highContrast": "#1F1F1F"
+    },
+    "textTertiary": {
+      "light": "#767A6E",
+      "dark": "#97938A",
+      "highContrast": "#333333"
+    },
+    "textOnAccent": {
+      "light": "#FFFFFF",
+      "dark": "#10130E",
+      "highContrast": "#FFFFFF"
+    },
+    "accentPrimary": {
+      "light": "#46594A",
+      "dark": "#A7C0A9",
+      "highContrast": "#1E2D21"
+    },
+    "accentSecondary": {
+      "light": "#A9834C",
+      "dark": "#D4B47F",
+      "highContrast": "#5A4220"
+    },
+    "accentSurface": {
+      "light": "#F3E0D8",
+      "dark": "#2C3830",
+      "highContrast": "#F7E9E3"
+    },
+    "accentText": {
+      "light": "#3E5042",
+      "dark": "#B4CCB6",
+      "highContrast": "#1E2D21"
+    },
+    "success": {
+      "light": "#2F6A47",
+      "dark": "#8CC9A2",
+      "highContrast": "#0F4526"
+    },
+    "successSurface": {
+      "light": "#E7F0E9",
+      "dark": "#15211A",
+      "highContrast": "#E7F0E9"
+    },
+    "warning": {
+      "light": "#8A6118",
+      "dark": "#D6B061",
+      "highContrast": "#5C3E07"
+    },
+    "warningSurface": {
+      "light": "#F6EEDC",
+      "dark": "#231D10",
+      "highContrast": "#F6EEDC"
+    },
+    "danger": {
+      "light": "#A63D33",
+      "dark": "#E0928A",
+      "highContrast": "#7A1F17"
+    },
+    "dangerSurface": {
+      "light": "#F7E8E5",
+      "dark": "#261513",
+      "highContrast": "#F7E8E5"
+    },
+    "border": {
+      "light": "#E5DCCD",
+      "dark": "#30362D",
+      "highContrast": "#5C5C5C"
+    }
+  },
+  "spacing": {
+    "xs": 4,
+    "sm": 8,
+    "md": 12,
+    "lg": 16,
+    "xl": 24,
+    "xxl": 32
+  },
+  "typography": {
+    "display": {
+      "size": 38,
+      "weight": 400,
+      "line": 1.12,
+      "letterSpacing": -0.4,
+      "family": "Georgia"
+    },
+    "heroTitle": {
+      "size": 34,
+      "weight": 400,
+      "line": 1.12,
+      "letterSpacing": -0.3,
+      "family": "Georgia"
+    },
+    "pageTitle": {
+      "size": 28,
+      "weight": 400,
+      "line": 1.2,
+      "letterSpacing": -0.2,
+      "family": "Georgia"
+    },
+    "title1": {
+      "size": 30,
+      "weight": 400,
+      "line": 1.2,
+      "letterSpacing": -0.3,
+      "family": "Georgia"
+    },
+    "title2": {
+      "size": 24,
+      "weight": 400,
+      "line": 1.25,
+      "letterSpacing": -0.2,
+      "family": "Georgia"
+    },
+    "title3": {
+      "size": 18,
+      "weight": 600,
+      "line": 1.3,
+      "letterSpacing": 0,
+      "family": "Wix Madefor Text"
+    },
+    "headline": {
+      "size": 16,
+      "weight": 600,
+      "line": 1.35,
+      "letterSpacing": 0,
+      "family": "Wix Madefor Text"
+    },
+    "body": {
+      "size": 16,
+      "weight": 400,
+      "line": 1.5,
+      "letterSpacing": 0,
+      "family": "Wix Madefor Text"
+    },
+    "bodyEmphasis": {
+      "size": 16,
+      "weight": 600,
+      "line": 1.4,
+      "letterSpacing": 0,
+      "family": "Wix Madefor Text"
+    },
+    "callout": {
+      "size": 15,
+      "weight": 500,
+      "line": 1.4,
+      "letterSpacing": 0,
+      "family": "Wix Madefor Text"
+    },
+    "label": {
+      "size": 14,
+      "weight": 600,
+      "line": 1.3,
+      "letterSpacing": 0,
+      "family": "Wix Madefor Text"
+    },
+    "footnote": {
+      "size": 14,
+      "weight": 400,
+      "line": 1.45,
+      "letterSpacing": 0,
+      "family": "Wix Madefor Text"
+    },
+    "caption": {
+      "size": 12,
+      "weight": 500,
+      "line": 1.4,
+      "letterSpacing": 0.2,
+      "family": "Wix Madefor Text"
+    },
+    "greetingScript": {
+      "size": 22,
+      "weight": 400,
+      "line": 1.2,
+      "letterSpacing": 0,
+      "family": "Georgia",
+      "style": "italic"
+    }
+  },
+  "radius": {
+    "sm": 8,
+    "md": 14,
+    "lg": 20,
+    "pill": 999
+  },
+  "kit": {
+    "material": "flat",
+    "variant": "default",
+    "density": "spacious",
+    "motion": "smooth",
+    "motionDefaults": "subtle"
+  },
+  "shadows": {
+    "sm": {
+      "color": "#2B2418",
+      "opacity": 0.06,
+      "radius": 8,
+      "x": 0,
+      "y": 2
+    },
+    "md": {
+      "color": "#2B2418",
+      "opacity": 0.09,
+      "radius": 18,
+      "x": 0,
+      "y": 6
+    },
+    "lg": {
+      "color": "#2B2418",
+      "opacity": 0.12,
+      "radius": 30,
+      "x": 0,
+      "y": 12
+    }
+  },
+  "gradients": {
+    "brand": {
+      "colors": [
+        "accentPrimary",
+        "accentText"
+      ],
+      "angle": 135
+    },
+    "subtle": {
+      "colors": [
+        "surfaceSecondary",
+        "surfacePrimary"
+      ],
+      "angle": 180
+    },
+    "hero": {
+      "colors": [
+        "accentSurface",
+        "surfacePrimary"
+      ],
+      "angle": 160
+    }
+  },
+  "materials": {
+    "flat": {
+      "style": "flat",
+      "tint": "surfaceSecondary",
+      "opacity": 1
+    }
+  },
+  "motions": {
+    "smooth": {
+      "duration": 260,
+      "easing": "easeInOut"
+    },
+    "quick": {
+      "duration": 140,
+      "easing": "easeOut"
+    },
+    "appearSoft": {
+      "duration": 480,
+      "easing": "easeOut"
+    }
+  },
+  "tabBar": {
+    "background": {
+      "color": "surfaceElevated"
+    },
+    "shape": {
+      "kind": "full"
+    },
+    "border": {
+      "topHairline": true,
+      "color": "border"
+    },
+    "selectedIndicator": {
+      "kind": "colorOnly",
+      "color": "accentPrimary"
+    },
+    "activeTint": "accentPrimary",
+    "inactiveTint": "textTertiary",
+    "labels": {
+      "show": true,
+      "typography": "caption"
+    },
+    "iconSize": 22,
+    "motion": "smooth"
+  },
+  "drawer": {
+    "background": {
+      "color": "surfaceSecondary"
+    },
+    "width": 300,
+    "activeTint": "accentPrimary",
+    "inactiveTint": "textSecondary",
+    "selectedIndicator": {
+      "kind": "pill",
+      "color": "accentPrimary"
+    },
+    "labels": {
+      "show": true,
+      "typography": "body"
+    },
+    "iconSize": 22,
+    "edgeInsets": 12,
+    "motion": "smooth"
+  },
+  "contentMaxWidth": {
+    "base": 480,
+    "medium": 600,
+    "expanded": 760
+  }
+}

package/templates/yoga-studio/dev/index.ts

@@ -2270,6 +2270,198 @@ const SCREENS = runtimeSetting({
                                                             ]
                                                           }
                                                         }
+                                                      },
+                                                      {
+                                                        "id": "himi_branded_home.member_programs_section",
+                                                        "body": {
+                                                          "package": "himalaya",
+                                                          "type": "VStack",
+                                                          "props": {
+                                                            "spacing": 10,
+                                                            "alignment": "leading",
+                                                            "children": [
+                                                              {
+                                                                "id": "",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "VStack",
+                                                                  "props": {
+                                                                    "spacing": 3,
+                                                                    "alignment": "leading",
+                                                                    "children": [
+                                                                      {
+                                                                        "id": "",
+                                                                        "body": {
+                                                                          "package": "himalaya",
+                                                                          "type": "Text",
+                                                                          "props": {
+                                                                            "text": "Your programs",
+                                                                            "style": "title3"
+                                                                          }
+                                                                        }
+                                                                      }
+                                                                    ]
+                                                                  }
+                                                                }
+                                                              },
+                                                              {
+                                                                "id": "himi_branded_home.member_programs",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "Carousel",
+                                                                  "props": {
+                                                                    "itemsPath": "$service:himiBrandedHome.memberPrograms",
+                                                                    "items": [
+                                                                      {
+                                                                        "id": "",
+                                                                        "body": {
+                                                                          "package": "himalaya",
+                                                                          "type": "VStack",
+                                                                          "props": {
+                                                                            "spacing": 8,
+                                                                            "alignment": "leading",
+                                                                            "children": [
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "Image",
+                                                                                  "props": {
+                                                                                    "url": "$item.image",
+                                                                                    "fillWidth": true,
+                                                                                    "height": 108,
+                                                                                    "contentMode": "fill",
+                                                                                    "contentDescription": "$item.name"
+                                                                                  }
+                                                                                },
+                                                                                "modifiers": {
+                                                                                  "cornerRadius": 8,
+                                                                                  "fillMaxWidth": true,
+                                                                                  "hiddenPath": "$item.noImage"
+                                                                                }
+                                                                              },
+                                                                              {
+                                                                                "id": "himi_branded_home.member_program.initial",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "ZStack",
+                                                                                  "props": {
+                                                                                    "alignment": "center",
+                                                                                    "children": [
+                                                                                      {
+                                                                                        "id": "",
+                                                                                        "body": {
+                                                                                          "package": "himalaya",
+                                                                                          "type": "Icon",
+                                                                                          "props": {
+                                                                                            "name": "photo",
+                                                                                            "size": 28,
+                                                                                            "tint": "accentPrimary"
+                                                                                          }
+                                                                                        },
+                                                                                        "modifiers": {
+                                                                                          "accessibilityRole": "decorative"
+                                                                                        }
+                                                                                      }
+                                                                                    ]
+                                                                                  }
+                                                                                },
+                                                                                "modifiers": {
+                                                                                  "width": 108,
+                                                                                  "height": 108,
+                                                                                  "background": {
+                                                                                    "token": "accentSurface"
+                                                                                  },
+                                                                                  "cornerRadius": 16,
+                                                                                  "hiddenPath": "$item.hasImage"
+                                                                                }
+                                                                              },
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "Text",
+                                                                                  "props": {
+                                                                                    "text": "$item.name",
+                                                                                    "style": "bodyEmphasis",
+                                                                                    "maxLines": 2
+                                                                                  }
+                                                                                }
+                                                                              },
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "Text",
+                                                                                  "props": {
+                                                                                    "text": "$item.stateLabel",
+                                                                                    "style": "footnote",
+                                                                                    "color": "textSecondary",
+                                                                                    "maxLines": 1
+                                                                                  }
+                                                                                }
+                                                                              },
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "ProgressBar",
+                                                                                  "props": {
+                                                                                    "progress": 0,
+                                                                                    "progressPath": "$item.progressFraction",
+                                                                                    "tint": "accentPrimary",
+                                                                                    "trackColor": "surfaceTertiary"
+                                                                                  }
+                                                                                },
+                                                                                "modifiers": {
+                                                                                  "accessibilityLabel": "$item.name",
+                                                                                  "accessibilityValue": "$item.stateLabel",
+                                                                                  "hiddenPath": "$item.hideProgress"
+                                                                                }
+                                                                              }
+                                                                            ]
+                                                                          }
+                                                                        },
+                                                                        "modifiers": {
+                                                                          "background": {
+                                                                            "token": "surfaceElevated"
+                                                                          },
+                                                                          "border": {
+                                                                            "width": 1,
+                                                                            "color": {
+                                                                              "token": "border"
+                                                                            }
+                                                                          },
+                                                                          "cornerRadius": 8,
+                                                                          "padding": {
+                                                                            "leading": 10,
+                                                                            "trailing": 10,
+                                                                            "top": 10,
+                                                                            "bottom": 10
+                                                                          },
+                                                                          "width": 200,
+                                                                          "onTap": {
+                                                                            "actionId": "himi.open",
+                                                                            "params": {
+                                                                              "screenId": "himi_program",
+                                                                              "id": "$item.id"
+                                                                            }
+                                                                          },
+                                                                          "pressFeedback": "scale",
+                                                                          "haptic": "light",
+                                                                          "accessibilityLabel": "$item.name"
+                                                                        }
+                                                                      }
+                                                                    ]
+                                                                  }
+                                                                }
+                                                              }
+                                                            ]
+                                                          }
+                                                        },
+                                                        "modifiers": {
+                                                          "hiddenPath": "$service:himiBrandedHome.noMemberPrograms"
+                                                        }
                                                       }
                                                     ]
                                                   }

package/templates/yoga-studio/tier5-src/_shared/branded-load-state.ts

@@ -35,11 +35,14 @@ export interface LoadFlags {
   notMock: boolean;
   notMockEmpty: boolean;
   notMockUnavailable: boolean;
+  /** hiddenWhen gate for the empty state: false ONLY when the site answered with no rows
+   *  (`notMockEmpty` is true then — it gates the sample banner, not the empty state). */
+  hideEmpty: boolean;
 }
 
 export const LOADING: LoadFlags = {
   status: "loading", error: "", signInRequired: false, notErrored: true, notLoading: false, busy: true, noSignIn: true,
-  isMock: false, notMock: true, notMockEmpty: true, notMockUnavailable: true,
+  isMock: false, notMock: true, notMockEmpty: true, notMockUnavailable: true, hideEmpty: true,
 };
 
 const READY: LoadFlags = { ...LOADING, status: "ready", notLoading: true, busy: false };
@@ -78,7 +81,7 @@ type Rows<K extends string, T> = { [P in K]: T[] } & { emptyText: string } & Loa
 export function loaded<K extends string, T>(key: K, rows: T[], copy: LoadCopy<T>): Rows<K, T> {
   if (rows.length) return { ...READY, [key]: rows, emptyText: "" } as Rows<K, T>;
   if (samplesRequested()) return sampleRows(key, copy, "empty");
-  return { ...READY, [key]: [], emptyText: copyParam(`${copy.prefix}.emptyText`, copy.empty) } as Rows<K, T>;
+  return { ...READY, [key]: [], emptyText: copyParam(`${copy.prefix}.emptyText`, copy.empty), hideEmpty: false } as Rows<K, T>;
 }
 
 /** A query threw. Never rows the customer did not create. */

package/templates/yoga-studio/tier5-src/_shared/himi-account.ts

@@ -1,6 +1,8 @@
 import { dispatch } from "@himalaya/dispatch";
 // Relative for node resolution (see himi-store.ts note); rewritten off-repo.
 import { displayName, getMyData, initials, type WixMyData } from "@himalaya/wix-users";
+import { getMyMember } from "@himalaya/wix-members";
+import { wixMediaUrl } from "@himalaya/wix-media";
 import { formatDateMedium, formatWeekdayDateTime } from "../_shared/engine-intl.js";
 
 export interface AccountProfile {
@@ -82,6 +84,31 @@ function profileFromData(data: WixMyData, fallbackEmail = ""): AccountProfile {
   };
 }
 
+/** The signed-in site member's name and photo from their member record, or undefined when it
+ *  cannot be read or names nobody (the caller then shows the email). */
+async function siteMemberProfile(email: string): Promise<AccountProfile | undefined> {
+  try {
+    const member = (await getMyMember({ fieldsets: ["FULL"] }))?.member;
+    const name = [member?.contact?.firstName, member?.contact?.lastName].map((part) => (part ?? "").trim()).filter(Boolean).join(" ")
+      || (member?.profile?.nickname ?? "").trim();
+    if (!name) return undefined;
+    const image = wixMediaUrl(member?.profile?.photo?.url) || wixMediaUrl(member?.profile?.photo?.id) || "";
+    return {
+      isMember: true,
+      identityLine: "Signed in",
+      detailLine: email || name,
+      memberName: name,
+      memberEmail: email || member?.loginEmail || "",
+      memberImage: image,
+      memberInitials: initialsFromName(name) || "M",
+      hasMemberImage: !!image,
+      noMemberImage: !image,
+    };
+  } catch {
+    return undefined;
+  }
+}
+
 export function guestProfile(detailLine: string): AccountProfile {
   return {
     isMember: false,
@@ -118,6 +145,10 @@ export async function loadMemberProfile(guestDetailLine: string): Promise<Accoun
     const data = await getMyData();
     return profileFromData(data, storedEmail);
   } catch {
+    // The account profile is an owner endpoint: the web host refuses it, and a site member need
+    // not have one. The member's own record (the Members API) still names them.
+    const member = await siteMemberProfile(storedEmail);
+    if (member) return member;
     return {
       isMember: true,
       identityLine: "Signed in",