orionplace-react 0.3.1 → 0.5.0

package/templates/components/orionplace/storefront/StorefrontFooter.tsx

@@ -154,6 +154,9 @@ export function StorefrontFooter({
             <a href={route('/contact')} className={styles.navigationLink}>
               {labels.contact}
             </a>
+            <a href={route('/privacy')} className={styles.navigationLink}>
+              {labels.privacy}
+            </a>
           </nav>
         </div>
         <p className={styles.copyright}>

package/templates/components/orionplace/subscriptions/StorefrontTariff.README.md

@@ -30,6 +30,12 @@ the callbacks from `TariffPurchaseActions`. A failed required refresh hides the
 dialog, blocks another purchase and exposes Refresh without discarding the
 dialog fields.
 
+For a signed-in customer the component also reads `subscriptions_get` once
+through `onLoadSubscriptions`: plans of a subscription the customer already
+had offer no trial, and a resumed trial opens only after that read, for a
+customer new to the subscription. A failed read leaves the trial shown; the
+backend still refuses a repeated trial.
+
 The component makes requests only through its callbacks. Source is maintained
 in `components/orionplace/subscriptions/StorefrontTariff.tsx`; the plan contract
 is `interfaces/orionplace/subscribeTariff/ISubscribeTariff.ts`.
@@ -85,6 +91,13 @@ is `interfaces/orionplace/subscribeTariff/ISubscribeTariff.ts`.
 обновление не удалось, окно скрывается, новое подключение блокируется и
 появляется кнопка обновления, а заполненные поля окна сохраняются.
 
+Для авторизованного покупателя компонент также один раз читает
+`subscriptions_get` через `onLoadSubscriptions`: тарифы подписки, которая у
+покупателя уже была, не предлагают пробный период, а восстановленный пробный
+выбор открывается только после этого чтения и только для нового покупателя
+подписки. При ошибке чтения пробный период остаётся видимым; повторный пробный
+период всё равно отклоняет сервер.
+
 Компонент отправляет запросы только через переданные функции. Исходный файл:
 `components/orionplace/subscriptions/StorefrontTariff.tsx`; контракт тарифа:
 `interfaces/orionplace/subscribeTariff/ISubscribeTariff.ts`.

package/templates/components/orionplace/subscriptions/StorefrontTariff.tsx

@@ -11,7 +11,12 @@ import {
   useOrionplaceCatalogStore,
   useOrionplaceSelections,
 } from '@/providers/OrionplaceProvider';
-import { selectIsAuthenticated } from '@/stores/orionplace';
+import {
+  selectIsAuthenticated,
+  selectProfile,
+} from '@/stores/orionplace';
+import { selectUsedSubscriptions } from '@/stores/orionplaceCatalog';
+import { tariffResumable } from '@/lib/orionplace/tariffs';
 import type { IBreadcrumb } from '@/interfaces/orionplace/shared/IBreadcrumb';
 import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
 import type { ITariffSelection } from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
@@ -89,6 +94,8 @@ export function StorefrontTariff({
     state.tariffs?.data.find((entry) => entry.id === tariffId),
   );
   const catalogStore = useOrionplaceCatalogStore();
+  const profile = useOrionplace((state) => selectProfile(state)?.id);
+  const used = useOrionplaceCatalog(selectUsedSubscriptions(profile));
   const locale = useOrionplaceSelections((state) => state.localeCode);
   const copy = tariffLabels(locale);
   const common = featureLabels(locale);
@@ -273,22 +280,26 @@ export function StorefrontTariff({
     }
   }, [tariff]);
 
+  // A trial chosen before sign-in opens again only for a customer new to
+  // the subscription record (see `tariffResumable`).
+  const resumable = tariffResumable(resume, tariff, used);
+
   useEffect(() => {
     if (
-      !resume ||
-      resume.tariff !== tariffId ||
+      !resumable ||
+      resumable.tariff !== tariffId ||
       !authenticated ||
       !tariff
     ) {
       return;
     }
-    const key = `${resume.tariff}:${resume.price ?? 'trial'}`;
+    const key = `${resumable.tariff}:${resumable.price ?? 'trial'}`;
     if (opened.current === key) {
       return;
     }
     opened.current = key;
-    choose(resume);
-  }, [resume?.tariff, resume?.price, authenticated, tariff]);
+    choose(resumable);
+  }, [resumable?.tariff, resumable?.price, authenticated, tariff]);
 
   return (
     <section

package/templates/components/orionplace/subscriptions/StorefrontTariffs.README.md

@@ -27,6 +27,12 @@ required refresh fails, another purchase remains blocked and Refresh repeats
 both reads. Repeating the already confirmed request is ignored; a different
 plan can still be purchased.
 
+For a signed-in customer the component also reads `subscriptions_get` once
+through `onLoadSubscriptions`: plans of a subscription the customer already
+had offer no trial, and a resumed trial opens only after that read, for a
+customer new to the subscription. A failed read leaves the trial shown; the
+backend still refuses a repeated trial.
+
 The component makes requests only through those callbacks. Source is
 maintained in
 `components/orionplace/subscriptions/StorefrontTariffs.tsx`; the response
@@ -78,6 +84,13 @@ contract is `interfaces/orionplace/subscribes/ISubscriptionApi.ts`.
 обновления повторяет оба чтения. Повтор уже подтверждённого запроса
 игнорируется; другой тариф можно подключить.
 
+Для авторизованного покупателя компонент также один раз читает
+`subscriptions_get` через `onLoadSubscriptions`: тарифы подписки, которая у
+покупателя уже была, не предлагают пробный период, а восстановленный пробный
+выбор открывается только после этого чтения и только для нового покупателя
+подписки. При ошибке чтения пробный период остаётся видимым; повторный пробный
+период всё равно отклоняет сервер.
+
 Компонент отправляет запросы только через эти функции. Исходный файл:
 `components/orionplace/subscriptions/StorefrontTariffs.tsx`; контракт ответа:
 `interfaces/orionplace/subscribes/ISubscriptionApi.ts`.

package/templates/components/orionplace/subscriptions/StorefrontTariffs.tsx

@@ -7,7 +7,12 @@ import {
   useOrionplaceCatalogStore,
   useOrionplaceSelections,
 } from '@/providers/OrionplaceProvider';
-import { selectIsAuthenticated } from '@/stores/orionplace';
+import {
+  selectIsAuthenticated,
+  selectProfile,
+} from '@/stores/orionplace';
+import { selectUsedSubscriptions } from '@/stores/orionplaceCatalog';
+import { tariffResumable } from '@/lib/orionplace/tariffs';
 import type { ISubscriptionTariffsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
 import type { ITariffSelection } from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
 import {
@@ -69,6 +74,12 @@ export function StorefrontTariffs({
     (state) => state.tariffsSnapshot !== undefined,
   );
   const catalogStore            = useOrionplaceCatalogStore();
+  const profile                 = useOrionplace(
+    (state) => selectProfile(state)?.id,
+  );
+  const used                    = useOrionplaceCatalog(
+    selectUsedSubscriptions(profile),
+  );
   const locale                  = useOrionplaceSelections((state) => state.localeCode);
   const labels                  = subscriptionLabels(locale);
   const common                  = featureLabels(locale);
@@ -331,7 +342,13 @@ export function StorefrontTariffs({
             subscriptionId={group.id}
             tariffIds={ids}
             guest={!authenticated}
-            open={authenticated ? resume : undefined}
+            open={authenticated
+              ? tariffResumable(
+                resume,
+                resume && tariffs?.data.find((entry) => entry.id === resume.tariff),
+                used,
+              )
+              : undefined}
             disabled={busy || purchase.needsRefresh}
             pending={purchase.pending}
             suspended={purchase.needsRefresh}

package/templates/components/orionplace/tariffs/TariffCard.tsx

@@ -7,9 +7,12 @@ import {
   type ReactNode,
 } from 'react';
 import {
+  useOrionplace,
   useOrionplaceCatalog,
   useOrionplaceSelections,
 } from '@/providers/OrionplaceProvider';
+import { selectProfile } from '@/stores/orionplace';
+import { selectUsedSubscriptions } from '@/stores/orionplaceCatalog';
 import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
 import type {
   ITariffSelection,
@@ -18,6 +21,7 @@ import type {
 import {
   tariffIsOpen,
   tariffSubscribeRequest,
+  tariffTrialOpen,
 } from '@/lib/orionplace/tariffs';
 import { tariffPageHref } from '@/lib/orionplace/tariffPage';
 import {
@@ -82,13 +86,16 @@ export function TariffCard({
 }: TariffCardProps) {
   const tariffs = useOrionplaceCatalog((state) => state.tariffs);
   const locale = useOrionplaceSelections((state) => state.localeCode);
+  const profile = useOrionplace((state) => selectProfile(state)?.id);
+  const used = useOrionplaceCatalog(selectUsedSubscriptions(profile));
   const tariff = tariffs?.data.find((entry) => entry.id === tariffId);
   const [selection, setSelection] = useState<ITariffSelection>();
   const [period, setPeriod] = useState<number>();
   const [option, setOption] = useState<number>();
   const opened = useRef('');
   const labels = tariffLabels(locale);
-  const trialBadge = tariff && tariff.trial_days > 0
+  // No trial badge for a customer who already had this subscription record.
+  const trialBadge = tariff && tariffTrialOpen(tariff, used)
     ? tariffText(labels.trialBadge, {
         days: tariffDays(tariff.trial_days, locale),
       })

package/templates/components/orionplace/tariffs/TariffCardPrices.README.md

@@ -7,7 +7,11 @@ currency from the isolated stores. Paid periods are ordered by duration. When
 several are available, choosing one calls `onPeriodChange(tariff_cost_id)`.
 `selectedPeriod` selects that period; a missing or unavailable value falls back
 to the shortest returned paid period. Each amount uses the selected currency's
-left and right symbols. A positive `trial_days` adds the trial action.
+left and right symbols. A positive `trial_days` adds the trial action, unless
+the signed-in customer already had the plan's subscription: the backend gives a
+trial once per subscription. Such a trial-only plan shows that note instead.
+The plan pages load the customer's records with `subscriptions_get` through
+`onLoadSubscriptions`; until they arrive, the trial stays shown.
 
 The plan and its parent subscription must both allow customer subscriptions.
 An administrator-only or closed plan shows its localized reason instead of
@@ -43,7 +47,11 @@ The component makes no requests. Source is maintained in
 `onPeriodChange(tariff_cost_id)`. `selectedPeriod` задаёт период; отсутствующее
 или недоступное значение заменяется самым коротким полученным платным периодом.
 Сумма использует левый и правый символы выбранной валюты. Положительное
-`trial_days` добавляет действие пробного периода.
+`trial_days` добавляет действие пробного периода, если у авторизованного
+покупателя ещё не было подписки этого тарифа: пробный период даётся один раз на
+подписку. Тариф только с пробным периодом тогда показывает это пояснение.
+Страницы тарифов загружают подписки покупателя через `subscriptions_get`
+(`onLoadSubscriptions`); до их получения пробный период показывается.
 
 Тариф и его родительская подписка должны разрешать самостоятельное
 подключение. Для закрытого тарифа или тарифа администратора вместо действий

package/templates/components/orionplace/tariffs/TariffCardPrices.tsx

@@ -2,9 +2,12 @@
 
 import { useId } from 'react';
 import {
+  useOrionplace,
   useOrionplaceCatalog,
   useOrionplaceSelections,
 } from '@/providers/OrionplaceProvider';
+import { selectProfile } from '@/stores/orionplace';
+import { selectUsedSubscriptions } from '@/stores/orionplaceCatalog';
 import type { ITariffSelection } from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
 import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
 import {
@@ -13,6 +16,7 @@ import {
   tariffMoney,
   tariffPaidPeriods,
   tariffReturnPath,
+  tariffTrialOpen,
 } from '@/lib/orionplace/tariffs';
 import {
   tariffDays,
@@ -45,6 +49,8 @@ export function TariffCardPrices({
   onRequireSignIn,
 }: TariffCardPricesProps) {
   const tariffs = useOrionplaceCatalog((state) => state.tariffs);
+  const profile = useOrionplace((state) => selectProfile(state)?.id);
+  const used = useOrionplaceCatalog(selectUsedSubscriptions(profile));
   const locale = useOrionplaceSelections((state) => state.localeCode);
   const currencyId = useOrionplaceSelections((state) => state.currencyId);
   const currency = useOrionplaceSelections(
@@ -73,7 +79,9 @@ export function TariffCardPrices({
   }));
   const selected = paidPeriods.find((entry) => entry.price === selectedPeriod) ??
     paidPeriods[0];
-  const trialDuration = tariff.trial_days > 0
+  // A customer who already had this subscription record gets no trial.
+  const trialUsed = tariff.trial_days > 0 && !tariffTrialOpen(tariff, used);
+  const trialDuration = tariff.trial_days > 0 && !trialUsed
     ? duration(tariff.trial_days)
     : '';
   const name = getAvailableNestedValueFromObject(
@@ -87,7 +95,9 @@ export function TariffCardPrices({
       ? labels.closed
       : selected || trialDuration
         ? ''
-        : labels.noPeriods;
+        : trialUsed
+          ? labels.trialUsed
+          : labels.noPeriods;
 
   function choose(price: number | null) {
     if (disabled || availability !== 'open') {

package/templates/hooks/useOrionplaceTariffPurchase.ts

@@ -5,6 +5,16 @@ import type { IProfileResponse } from '@/interfaces/orionplace/accounts/IProfile
 import type { ITariffSubscribeRequest } from '@/interfaces/orionplace/subscribeTariff/ITariffSelection';
 import type { ICustomerSubscriptionsResponse } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
 import { apiErrorMessage } from '@/lib/orionplace/api';
+import { tariffUsedSubscriptions } from '@/lib/orionplace/tariffs';
+import {
+  useOrionplace,
+  useOrionplaceCatalogStore,
+} from '@/providers/OrionplaceProvider';
+import {
+  selectIsAuthenticated,
+  selectProfile,
+} from '@/stores/orionplace';
+import { selectUsedSubscriptions } from '@/stores/orionplaceCatalog';
 
 type SubscriptionsPage = NonNullable<
   ICustomerSubscriptionsResponse['page_data']
@@ -55,13 +65,28 @@ export function useOrionplaceTariffPurchase(
   const [error, setError] = useState('');
   const [completed, setCompleted] = useState(false);
   const [needsRefresh, setNeedsRefresh] = useState(false);
+  const catalogStore = useOrionplaceCatalogStore();
+  const authenticated = useOrionplace(selectIsAuthenticated);
+  const profileId = useOrionplace((state) => selectProfile(state)?.id);
+
+  function rememberUsed(owner: number | undefined, page: SubscriptionsPage) {
+    if (owner !== undefined) {
+      catalogStore
+        .getState()
+        .setUsedSubscriptions(owner, tariffUsedSubscriptions(page));
+    }
+  }
 
   async function loadAccount(controller: AbortController) {
+    const owner = profileId;
     const subscriptions = await callbacks.current.onLoadSubscriptions({
       endpoint: 'subscriptions_get',
       request: {},
       signal: controller.signal,
     });
+    if (!controller.signal.aborted) {
+      rememberUsed(owner, subscriptions);
+    }
     const profile = await callbacks.current.onLoadProfile({
       endpoint: 'profile_get',
       request: { filters: {} },
@@ -138,6 +163,41 @@ export function useOrionplaceTariffPurchase(
     }
   }
 
+  /*
+   * The plan pages hide the trial of a subscription record the customer
+   * already had (the backend refuses it). They read the records once per
+   * profile; a failed read leaves the trial shown, as for an unknown customer.
+   */
+  useEffect(() => {
+    if (
+      !authenticated ||
+      profileId === undefined ||
+      selectUsedSubscriptions(profileId)(catalogStore.getState())
+    ) {
+      return;
+    }
+    const controller = new AbortController();
+    Promise.resolve(
+      callbacks.current.onLoadSubscriptions({
+        endpoint: 'subscriptions_get',
+        request: {},
+        signal: controller.signal,
+      }),
+    ).then(
+      (page) => {
+        if (!controller.signal.aborted) {
+          rememberUsed(profileId, page);
+        }
+      },
+      () => {
+        if (!controller.signal.aborted) {
+          catalogStore.getState().setUsedSubscriptions(profileId, []);
+        }
+      },
+    );
+    return () => controller.abort();
+  }, [authenticated, profileId, catalogStore]);
+
   useEffect(() => () => active.current?.abort(), []);
 
   return {

package/templates/lib/orionplace/blogImageViewer.ts

@@ -0,0 +1,84 @@
+/**
+ * The images of a blog article a reader can open larger: the cover and the
+ * pictures of the article text. Images inside a link, a button or a product
+ * placement keep their own click.
+ */
+export interface IBlogViewerImage {
+  src: string;
+  alt: string;
+  caption: string;
+}
+
+/** The images in the shape the photo viewer takes: one entry per image, numbered in order. */
+export function blogViewerPhotos(images: IBlogViewerImage[]) {
+  return images.map((image, index) => ({ id: index + 1, image: image.src }));
+}
+
+const SKIPPED = 'a, button, [data-product-id], [data-product-ids], [data-blog-image-viewer-skip]';
+
+/** The openable images under the given roots, in reading order. */
+export function blogViewerImages(
+  roots: (ParentNode | null | undefined)[],
+): HTMLImageElement[] {
+  const images: HTMLImageElement[] = [];
+  for (const root of roots) {
+    if (!root || typeof root.querySelectorAll !== 'function') {
+      continue;
+    }
+    const found = isImage(root) ? [root] : [...root.querySelectorAll('img')];
+    for (const image of found) {
+      if (typeof image.closest === 'function' && !image.closest(SKIPPED) && imageSource(image)) {
+        images.push(image);
+      }
+    }
+  }
+  return images;
+}
+
+/** What the viewer shows for one image: its address, text and caption. */
+export function blogViewerImage(image: HTMLImageElement): IBlogViewerImage {
+  const caption = image.closest('figure')?.querySelector('figcaption')?.textContent?.trim() ?? '';
+
+  return {
+    src: imageSource(image),
+    alt: image.alt.trim(),
+    caption: caption || image.title.trim(),
+  };
+}
+
+/**
+ * Makes each image a button for keyboard and screen reader users.
+ * `label` names the action, for example «Open image».
+ */
+export function markBlogViewerImages(images: HTMLImageElement[], label: string) {
+  for (const image of images) {
+    image.dataset.blogImageViewer = '';
+    image.tabIndex = 0;
+    image.setAttribute('role', 'button');
+    const name = image.alt.trim();
+    image.setAttribute('aria-label', name ? `${label}: ${name}` : label);
+  }
+}
+
+/** The position of the clicked or focused image in the list, or -1. */
+export function blogViewerIndex(target: EventTarget | null, images: HTMLImageElement[]) {
+  const image = target && typeof (target as Element).closest === 'function'
+    ? (target as Element).closest('img')
+    : null;
+
+  return image ? images.indexOf(image) : -1;
+}
+
+/** A key that opens the focused image. */
+export function isBlogViewerOpenKey(event: KeyboardEvent) {
+  return event.key === 'Enter' || event.key === ' ';
+}
+
+// No `instanceof HTMLImageElement`: the helper also loads where there is no DOM.
+function isImage(node: ParentNode): node is HTMLImageElement {
+  return (node as Element).tagName === 'IMG';
+}
+
+function imageSource(image: HTMLImageElement) {
+  return image.currentSrc || image.getAttribute('src') || '';
+}

package/templates/lib/orionplace/blogLabels.ts

@@ -40,6 +40,8 @@ const en = {
   articleCount: (count: number) =>
     `${count} ${count === 1 ? 'article' : 'articles'}`,
   noFiltered: 'No articles match the selected filters.',
+  imageOpen: 'Open image',
+  imageViewer: 'Image viewer',
 };
 
 function russianArticleCount(count: number) {
@@ -101,6 +103,8 @@ const ru: typeof en = {
   resetHint: 'Сбросить фильтры статей',
   articleCount: russianArticleCount,
   noFiltered: 'Нет статей по выбранным фильтрам.',
+  imageOpen: 'Открыть изображение',
+  imageViewer: 'Просмотр изображения',
 };
 
 export function blogLabels(locale: string) {

package/templates/lib/orionplace/footerLabels.ts

@@ -7,6 +7,7 @@ export function footerLabels(locale: string) {
         manufacturers: 'Производители',
         sections: 'Покупателям',
         contact: 'Контакты',
+        privacy: 'Политика конфиденциальности',
         home: 'На главную',
         profile: 'Личный кабинет',
         journal: 'Журнал',
@@ -23,6 +24,7 @@ export function footerLabels(locale: string) {
         manufacturers: 'Manufacturers',
         sections: 'Discover',
         contact: 'Contact',
+        privacy: 'Privacy policy',
         home: 'Home',
         profile: 'My account',
         journal: 'Journal',

package/templates/lib/orionplace/pageMetadata.ts

@@ -72,6 +72,7 @@ export function storefrontSeoPage(pathname: string): StorefrontSeoPage {
     'sellers',
     'stores',
     'contact',
+    'privacy',
     'tariffs',
     ...privatePages,
   ]);

package/templates/lib/orionplace/pageSeo.ts

@@ -44,6 +44,11 @@ const pageCopy = {
       'Контакты компании и обратная связь с магазином.',
       'контакты, сообщение',
     ],
+    privacy: [
+      'Политика обработки персональных данных',
+      'Какие данные получает магазин, зачем, кому передаёт, и какие cookie использует сайт.',
+      'персональные данные, политика, cookie',
+    ],
     unsubscribe: [
       'Настройки рассылки',
       'Отписка от писем магазина.',
@@ -166,6 +171,11 @@ const pageCopy = {
       'Company contact details and a message form for the store.',
       'contact, message',
     ],
+    privacy: [
+      'Privacy policy',
+      'Which data the store receives, why, who receives it, and which cookies the site uses.',
+      'personal data, privacy, cookies',
+    ],
     unsubscribe: [
       'Email preferences',
       'Unsubscribe from store emails.',