@evenicanpm/storefront-core 1.0.0-alpha

package/src/lib/hexToLuma.ts

@@ -0,0 +1,55 @@
+function sRGBtoLin(colorChannel: number): number {
+  // Send this function a decimal sRGB gamma encoded color value
+  // between 0.0 and 1.0, and it returns a linearized value.
+
+  if (colorChannel <= 0.04045) {
+    return colorChannel / 12.92;
+  } else {
+    return Math.pow((colorChannel + 0.055) / 1.055, 2.4);
+  }
+}
+1;
+function YtoLstar(Y: number): number {
+  // Send this function a luminance value between 0.0 and 1.0,
+  // and it returns L* which is "perceptual lightness"
+
+  if (Y <= 216 / 24389) {
+    return Y * (24389 / 27);
+  } else {
+    return Math.pow(Y, 1 / 3) * 116 - 16;
+  }
+}
+
+/**
+ *
+ * @param hex a hex color
+ * @returns luminance value between 0 and 50
+ */
+export const hexToLuma = (hex: string): number => {
+  if (!(hex.length === 6 || hex.length === 7)) {
+    throw new Error("not a valid hex color code");
+  }
+
+  const number = Number.parseInt(hex[0] === "#" ? hex.slice(1) : hex, 16);
+  const red = number >> 16;
+  const green = (number >> 8) & 255;
+  const blue = number & 255;
+
+  const vR = red / 255;
+  const vG = green / 255;
+  const vB = blue / 255;
+
+  const Y =
+    0.2126 * sRGBtoLin(vR) + 0.7152 * sRGBtoLin(vG) + 0.0722 * sRGBtoLin(vB);
+
+  return YtoLstar(Y);
+};
+
+/**
+ *
+ * @param hex a hex color
+ * @returns either white or black based on the luminance value, used for dynamic text color on a variable-coloured background
+ */
+export const lightOrDarkText = (hex: string): "white" | "black" => {
+  return hexToLuma(hex) > 50 ? "black" : "white";
+};

package/src/lib/lib.ts

@@ -0,0 +1,61 @@
+import currencyJs from "currency.js";
+import { formatDistanceStrict } from "date-fns";
+
+/**
+ * GET THE DIFFERENCE DATE FORMAT
+ * @param  DATE | NUMBER | STRING
+ * @returns FORMATTED DATE STRING
+ */
+
+function getDateDifference(date: string | number | Date) {
+  const distance = formatDistanceStrict(new Date(), new Date(date));
+  return distance + " ago";
+}
+
+/**
+ * RENDER THE PRODUCT PAGINATION INFO
+ * @param page - CURRENT PAGE NUMBER
+ * @param perPageProduct - PER PAGE PRODUCT LIST
+ * @param totalProduct - TOTAL PRODUCT NUMBER
+ * @returns
+ */
+
+function renderProductCount(
+  page: number,
+  perPageProduct: number,
+  totalProduct: number,
+) {
+  const startNumber = (page - 1) * perPageProduct;
+  let endNumber = page * perPageProduct;
+
+  if (endNumber > totalProduct) {
+    endNumber = totalProduct;
+  }
+  return `Showing ${startNumber - 1}-${endNumber} of ${totalProduct} products`;
+}
+
+/**
+ * CALCULATE PRICE WITH PRODUCT DISCOUNT THEN RETURN NEW PRODUCT PRICES
+ * @param  price - PRODUCT PRICE
+ * @param  discount - DISCOUNT PERCENT
+ * @returns - RETURN NEW PRICE
+ */
+
+function calculateDiscount(price: number, discount: number) {
+  const afterDiscount = Number((price - price * (discount / 100)).toFixed(2));
+  return currency(afterDiscount);
+}
+
+/**
+ * CHANGE THE CURRENCY FORMAT
+ * @param  price - PRODUCT PRICE
+ * @param  fraction - HOW MANY FRACTION WANT TO SHOW
+ * @returns - RETURN PRICE WITH CURRENCY
+ */
+
+function currency(price: number, fraction = 2) {
+  const formatCurrency = currencyJs(price).format({ precision: fraction });
+  return formatCurrency;
+}
+
+export { currency, getDateDifference, calculateDiscount, renderProductCount };

package/src/lib/map-helper.ts

@@ -0,0 +1,71 @@
+interface Address {
+  adminDistrict: string;
+  adminDistrict2: string;
+  countryRegion: string;
+  formattedAddress: string;
+  locality: string;
+}
+
+interface GeocodePoint {
+  calculationMethod: string;
+  coordinates: [number, number];
+  type: string;
+  usageTypes: string[];
+}
+
+interface Resource {
+  address: Address;
+  bbox: [number, number, number, number];
+  confidence: string;
+  entityType: string;
+  geocodePoints: GeocodePoint[];
+  matchCodes: string[];
+  name: string;
+  point: {
+    type: string;
+    coordinates: [number, number];
+  };
+  __type: string;
+}
+
+interface ResourceSet {
+  estimatedTotal: number;
+  resources: Resource[];
+}
+
+interface GeolocationResponse {
+  authenticationResultCode: string;
+  brandLogoUri: string;
+  copyright: string;
+  resourceSets: ResourceSet[];
+  statusCode: number;
+  statusDescription: string;
+  traceId: string;
+}
+
+export const geolocate = async (
+  searchTerm: string,
+  mapKey: string,
+): Promise<[number, number]> => {
+  if (!mapKey) {
+    throw new Error("Map key is required");
+  }
+  if (!searchTerm) {
+    throw new Error("Search term is required");
+  }
+
+  const SERVICE_ENDPOINT = "https://dev.virtualearth.net/REST/v1/";
+  const query = encodeURIComponent(searchTerm);
+  const key = encodeURIComponent(mapKey);
+  const geolocationApiUrl = `${SERVICE_ENDPOINT}Locations?q=${query}&key=${key}`;
+
+  const response = await fetch(geolocationApiUrl);
+  if (!response.ok) {
+    throw new Error(`Network response was not ok: ${response.statusText}`);
+  }
+
+  const data: GeolocationResponse = await response.json();
+  const location =
+    data.resourceSets[0]?.resources[0].geocodePoints[0].coordinates;
+  return location;
+};

package/src/lib/page-slugs.ts

@@ -0,0 +1,10 @@
+export const PageSlug = {
+  ProductDetail: "product",
+  ProductList: "products",
+  Cart: "cart",
+  Checkout: "checkout",
+  Confirmation: "confirmation",
+  Content: "content",
+} as const;
+
+type PageSlug = keyof typeof PageSlug;

package/src/lib/refiner-utils.ts

@@ -0,0 +1,32 @@
+import { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
+
+const convertRefinerToParameter = (refiner: ProductRefinerValue) =>
+  `${refiner.RefinerRecordId}|${refiner.DataTypeValue}|${refiner.LeftValueBoundString}|${refiner.RightValueBoundString}|${refiner.RefinerSourceValue}`;
+
+const convertParameterToRefiner = (parameter: string): ProductRefinerValue => {
+  const [
+    recordId,
+    dataTypeValue,
+    leftBoundString,
+    rightBoundString,
+    sourceValue,
+  ] = parameter.split("|");
+  return {
+    RefinerRecordId: Number.parseInt(recordId),
+    DataTypeValue: Number.parseInt(dataTypeValue),
+    LeftValueBoundString: leftBoundString,
+    RightValueBoundString: rightBoundString,
+    RefinerSourceValue: Number.parseInt(sourceValue),
+  };
+};
+
+const areRefinersEqual = (r1: ProductRefinerValue, r2: ProductRefinerValue) =>
+  r1.RefinerRecordId === r2.RefinerRecordId &&
+  r1.LeftValueBoundString === r2.LeftValueBoundString &&
+  r1.RightValueBoundString === r2.RightValueBoundString;
+
+export {
+  convertRefinerToParameter,
+  convertParameterToRefiner,
+  areRefinersEqual,
+};

package/src/lib/store-hours-helper.ts

@@ -0,0 +1,274 @@
+import { RegularStoreHours } from "@msdyn365-commerce/retail-proxy";
+import get from "lodash/get";
+
+export interface IStoreSelectorLocationLineItemResources {
+  days: {
+    monday: string;
+    tuesday: string;
+    wednesday: string;
+    thursday: string;
+    friday: string;
+    saturday: string;
+    sunday: string;
+    mondayFull: string;
+    tuesdayFull: string;
+    wednesdayFull: string;
+    thursdayFull: string;
+    fridayFull: string;
+    saturdayFull: string;
+    sundayFull: string;
+  };
+  closedText: string;
+}
+
+export interface IHoursDisplayInfo {
+  startDayShort: string;
+  startDayFull: string;
+  endDayShort?: string;
+  endDayFull?: string;
+  timeRange: string;
+}
+
+interface IHoursInfo {
+  isClosed: boolean;
+  openTime?: number;
+  closeTime?: number;
+}
+
+type DayType = "MON" | "TUE" | "WED" | "THU" | "FRI" | "SAT" | "SUN";
+
+export const secondsToTime = (
+  seconds: number | undefined,
+): string | undefined => {
+  if (seconds === undefined) {
+    return undefined;
+  }
+  let hours = Math.floor(seconds / (60 * 60));
+  const ampm = hours >= 12 ? "pm" : "am";
+  hours %= 12;
+  hours = hours ? hours : 12;
+  const divisorForMinutes = seconds % (60 * 60);
+  const minutes =
+    Math.floor(divisorForMinutes / 60) < 10
+      ? `0${Math.floor(divisorForMinutes / 60)}`
+      : Math.floor(divisorForMinutes / 60);
+  return `${hours}:${minutes} ${ampm}`;
+};
+
+const getShortTimeString = (
+  day: DayType,
+  resources: IStoreSelectorLocationLineItemResources,
+): string => {
+  switch (day) {
+    case "MON":
+      return resources.days.monday;
+    case "TUE":
+      return resources.days.tuesday;
+    case "WED":
+      return resources.days.wednesday;
+    case "THU":
+      return resources.days.thursday;
+    case "FRI":
+      return resources.days.friday;
+    case "SAT":
+      return resources.days.saturday;
+    default:
+      // Case 'SUN':
+      return resources.days.sunday;
+  }
+};
+
+const getFullTimeString = (
+  day: DayType,
+  resources: IStoreSelectorLocationLineItemResources,
+): string => {
+  switch (day) {
+    case "MON":
+      return resources.days.mondayFull;
+    case "TUE":
+      return resources.days.tuesdayFull;
+    case "WED":
+      return resources.days.wednesdayFull;
+    case "THU":
+      return resources.days.thursdayFull;
+    case "FRI":
+      return resources.days.fridayFull;
+    case "SAT":
+      return resources.days.saturdayFull;
+    default:
+      // Case 'SUN':
+      return resources.days.sundayFull;
+  }
+};
+
+const buildHoursDisplayInfo = (
+  startDay: DayType,
+  endDay: DayType,
+  hoursInfo: string,
+  resources: IStoreSelectorLocationLineItemResources,
+): IHoursDisplayInfo => {
+  return {
+    startDayShort: getShortTimeString(startDay, resources),
+    startDayFull: getFullTimeString(startDay, resources),
+    endDayShort:
+      startDay !== endDay ? getShortTimeString(endDay, resources) : undefined,
+    endDayFull:
+      startDay !== endDay ? getFullTimeString(endDay, resources) : undefined,
+    timeRange: hoursInfo,
+  };
+};
+
+const shouldMergeLines = (
+  firstLine: IHoursInfo,
+  secondLine: IHoursInfo,
+): boolean => {
+  if (firstLine.isClosed && secondLine.isClosed) {
+    return true;
+  }
+
+  if (!firstLine.isClosed && !secondLine.isClosed) {
+    return (
+      firstLine.openTime === secondLine.openTime &&
+      firstLine.closeTime === secondLine.closeTime
+    );
+  }
+
+  return false;
+};
+
+const getStoreHoursData = (
+  storeHours: RegularStoreHours,
+  dateForLookup: string,
+): IHoursInfo => {
+  return {
+    isClosed: get(storeHours, `IsClosedOn${dateForLookup}`, false),
+    openTime: get(storeHours, `${dateForLookup}OpenTime`, undefined),
+    closeTime: get(storeHours, `${dateForLookup}CloseTime`, undefined),
+  };
+};
+
+const buildStoreHoursString = (
+  hoursInfo: IHoursInfo,
+  resources: IStoreSelectorLocationLineItemResources,
+): string => {
+  if (hoursInfo.isClosed) {
+    return resources.closedText;
+  }
+  const openFrom: string | undefined = secondsToTime(hoursInfo.openTime);
+  const openTo: string | undefined = secondsToTime(hoursInfo.closeTime);
+
+  return `${openFrom}–${openTo}`;
+};
+
+export const buildStoreHours = (
+  storeHours: RegularStoreHours,
+  resources: IStoreSelectorLocationLineItemResources,
+): IHoursDisplayInfo[] => {
+  const storeHoursList: IHoursDisplayInfo[] = [];
+
+  const mondayHours = getStoreHoursData(storeHours, "Monday");
+  const tuesdayHours = getStoreHoursData(storeHours, "Tuesday");
+  const wednesdayHours = getStoreHoursData(storeHours, "Wednesday");
+  const thursdayHours = getStoreHoursData(storeHours, "Thursday");
+  const fridayHours = getStoreHoursData(storeHours, "Friday");
+  const saturdayHours = getStoreHoursData(storeHours, "Saturday");
+  const sundayHours = getStoreHoursData(storeHours, "Sunday");
+
+  let periodStart: DayType = "MON";
+  let periodEnd: DayType = "MON";
+
+  if (!shouldMergeLines(mondayHours, tuesdayHours)) {
+    storeHoursList.push(
+      buildHoursDisplayInfo(
+        periodStart,
+        periodEnd,
+        buildStoreHoursString(mondayHours, resources),
+        resources,
+      ),
+    );
+
+    periodStart = "TUE";
+  }
+  periodEnd = "TUE";
+
+  if (!shouldMergeLines(tuesdayHours, wednesdayHours)) {
+    storeHoursList.push(
+      buildHoursDisplayInfo(
+        periodStart,
+        periodEnd,
+        buildStoreHoursString(tuesdayHours, resources),
+        resources,
+      ),
+    );
+
+    periodStart = "WED";
+  }
+  periodEnd = "WED";
+
+  if (!shouldMergeLines(wednesdayHours, thursdayHours)) {
+    storeHoursList.push(
+      buildHoursDisplayInfo(
+        periodStart,
+        periodEnd,
+        buildStoreHoursString(wednesdayHours, resources),
+        resources,
+      ),
+    );
+
+    periodStart = "THU";
+  }
+  periodEnd = "THU";
+
+  if (!shouldMergeLines(thursdayHours, fridayHours)) {
+    storeHoursList.push(
+      buildHoursDisplayInfo(
+        periodStart,
+        periodEnd,
+        buildStoreHoursString(thursdayHours, resources),
+        resources,
+      ),
+    );
+
+    periodStart = "FRI";
+  }
+  periodEnd = "FRI";
+
+  if (!shouldMergeLines(fridayHours, saturdayHours)) {
+    storeHoursList.push(
+      buildHoursDisplayInfo(
+        periodStart,
+        periodEnd,
+        buildStoreHoursString(fridayHours, resources),
+        resources,
+      ),
+    );
+
+    periodStart = "SAT";
+  }
+  periodEnd = "SAT";
+
+  if (!shouldMergeLines(saturdayHours, sundayHours)) {
+    storeHoursList.push(
+      buildHoursDisplayInfo(
+        periodStart,
+        periodEnd,
+        buildStoreHoursString(saturdayHours, resources),
+        resources,
+      ),
+    );
+
+    periodStart = "SUN";
+  }
+  periodEnd = "SUN";
+
+  storeHoursList.push(
+    buildHoursDisplayInfo(
+      periodStart,
+      periodEnd,
+      buildStoreHoursString(sundayHours, resources),
+      resources,
+    ),
+  );
+
+  return storeHoursList;
+};

package/src/lib/test-media.ts

@@ -0,0 +1,23 @@
+"use server";
+
+const testImageUrl = (url: string) => {
+  return new Promise<[string, boolean]>((resolve) => {
+    fetch(url, { method: "HEAD" })
+      .then((response) =>
+        response
+          .blob()
+          .then((buff) => resolve([url, buff.type.startsWith("image/")])),
+      )
+      .catch(() => resolve([url, false]));
+  });
+};
+
+const testMedia = async (media: string[]) => {
+  const promises = media.map((m) => testImageUrl(m));
+  const validUrls = await Promise.all(promises).then((tuple) =>
+    tuple.filter((tp) => tp[1]).map((tp) => tp[0]),
+  );
+  return validUrls;
+};
+
+export default testMedia;

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "outDir": "./dist",
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/lib/*": ["src/lib/*"],
+      "@/api-manager/*": ["src/api-manager/*"],
+      "@/auth/*": ["src/auth/*"],
+      "@/_components/*": ["src/components/_components/*"],
+      "@/cms/*": ["src/cms/*"],
+      "@/components/*": ["src/components/*"],
+      "@/schemas/*": ["src/api-manager/schemas/*"],
+      "@/services/*": ["src/api-manager/services/*"],
+      "@config": ["src/config"]
+    }
+  }
+}