@redneckz/wildless-cms-uni-blocks 0.8.9 → 0.8.11

package/mobile/src/components/Calculator/useDepositCalculatorParams.ts

@@ -1,9 +1,11 @@
 import { DEFAULT_DEPOSIT_CALCULATOR_PARAMS, DEPOSIT_CALC_DEFAULT_DIR } from './constants';
+import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
 import { useCalculatorParams } from './useCalculatorParams';
 
 export interface CommonDepositParams {
   isMonthlyInterestPayment: boolean;
 }
+
 export interface DepositCalculatorSourceBookParams extends CommonDepositParams {
   minSum: number;
   maxSum: number;
@@ -32,22 +34,34 @@ export const useDepositCalculatorParams = (
   userInputParams: DepositCalculatorUserInputParams,
   sourceBookDir?: string,
 ): DepositCalculatorParams => {
-  const { isMonthlyInterestPayment, moneyValue } = userInputParams;
+  const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
 
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
   );
 
   const depositCalculatorSourceBookParams =
-    data?.rows?.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
-    DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+    data?.rows?.find(
+      (_) =>
+        isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _),
+    ) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
 
   const { rate } = depositCalculatorSourceBookParams;
 
   const income = getDepositIncome(rate, userInputParams);
   const finalSum = moneyValue + income;
+  const sourceBookRows = data?.rows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];
 
-  return { ...depositCalculatorSourceBookParams, ...userInputParams, income, finalSum };
+  return {
+    ...depositCalculatorSourceBookParams,
+    ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+    ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
+    ...userInputParams,
+    income,
+    finalSum,
+  };
 };
 
 const getDepositIncome = (rate: number, userInputParams: DepositCalculatorUserInputParams) => {

package/mobile/src/components/Carousel/Carousel.tsx

@@ -52,10 +52,12 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={ITEMS_GAP}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {renderChildren({
-              ...rest,
-              block: { ...rest.block, blocks: buildBlocks(childBlocks, activeIndex) },
-            })}
+            {isBankHistoryCarousel
+              ? renderChildren({
+                  ...rest,
+                  block: { ...rest.block, blocks: buildBlocks(childBlocks, activeIndex) },
+                })
+              : renderChildren(rest)}
           </SwipeListContainer>
           <CarouselScrollButtons
             scroll={scroll}

package/mobile/src/components/PictureText/renderBenefit.tsx

@@ -4,6 +4,7 @@ import type { ComplexBenefitProps } from '../../ui-kit/BenefitItem/BenefitItemPr
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 
+// TODO: Create universal function for this case
 export const renderBenefit =
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return

package/mobile/src/components/ProductTile/renderBenefit.tsx

@@ -3,6 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import type { Benefit } from './ProductTileContent';
 
+// TODO: Create universal function for this case
 export const renderBenefit =
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -5,9 +5,11 @@ import type { SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { assertUnreachable } from '../../utils/assertUnreachable';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
+import { checkCanRenderIcon } from './checkCanRenderIcon';
+import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
@@ -50,7 +52,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
             <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map(renderStepTitle(size, version, showLines))}
+              {steps.map(renderStep(size, version, showLines))}
             </div>
           </div>
         ) : null}
@@ -59,9 +61,31 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-const renderStepTitle =
+// TODO: Create universal function for this case
+const renderStep =
   (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
   (step: Step, i: number, steps: Step[]) => {
+    const { type } = step;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return renderDefaultStep(size, version, showLines)(step, i, steps);
+      case 'rte':
+        return <RichText __html={step.__html} />;
+      default:
+        assertUnreachable(step);
+    }
+  };
+
+const renderDefaultStep =
+  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (step: DefaultStep, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
     const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
@@ -106,7 +130,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
       <span className={`font-medium flex self-center ${iconTextSize}`}>
-        {checkIsIconRenderable(step?.icon) ? (
+        {checkCanRenderIcon(step?.icon) ? (
           <Img
             image={getIconWithVersion({ ...step.icon }, version)}
             width={iconSize}

package/mobile/src/components/StepsBlock/StepsBlock.ui.json

@@ -12,6 +12,12 @@
           "iconRight": {
             "ui:field": "icon"
           }
+        },
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
         }
       }
     }

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
+import type { RichTextItem } from '../../model/RichTextItem';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
@@ -16,10 +18,20 @@ type StepCommonProps = IconProps & {
   items?: string[];
 };
 
+/**
+ * @title Стандартный
+ */
+export type DefaultStep = DescriptionProps & LabelProps & StepCommonProps & DefaultListItemType;
+
+/**
+ * @title Форматированный текст
+ */
+type RichTextStep = RichTextItem & IconProps;
+
 /**
  * @title Шаг
  */
-export type Step = DescriptionProps & LabelProps & StepCommonProps;
+export type Step = DefaultStep | RichTextStep;
 
 /**
  * @title Блок шаги

package/mobile/src/components/StepsBlock/checkCanRenderIcon.ts

@@ -0,0 +1,3 @@
+import type { Picture } from '../../model/Picture';
+
+export const checkCanRenderIcon = (icon?: Picture) => Boolean(icon?.icon || icon?.src);

package/mobile/src/components/StepsBlock/renderStep.tsx

@@ -0,0 +1,83 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { VNode } from '../../model/VNode';
+import { Button } from '../../ui-kit/Button/Button';
+import { List } from '../../ui-kit/List/List';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { Text } from '../../ui-kit/Text/Text';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import { style } from '../../utils/style';
+import type { DefaultStep, Step } from './StepsBlockContent';
+import type { StyleType } from './StepsBlockStyleMaps';
+
+interface RenderStepProps {
+  styleMap: StyleType;
+  isMainButton: boolean;
+  version?: BlockVersion;
+}
+
+// TODO: Create universal function for this case
+export const renderStep =
+  (props: RenderStepProps) =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (step: Step, i: number, arr: Step[]): VNode => {
+    const { type } = step;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return renderDefaultStep(props)(step, i, arr);
+      case 'rte':
+        return <RichText __html={step.__html} />;
+      default:
+        assertUnreachable(step);
+    }
+  };
+
+const renderDefaultStep =
+  ({ styleMap, isMainButton, version }: RenderStepProps) =>
+  (step: DefaultStep, i: number, arr: Step[]) => {
+    const { label, description, button, items, isDotted } = step;
+
+    return (
+      <div
+        key={String(i)}
+        className={style(
+          'relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden',
+          getContainerWidth(arr.length),
+        )}
+      >
+        <div className={style(button?.text ? 'mb-8' : '', 'text-center')}>
+          {label ? (
+            <div className="mb-2">
+              <Text size="text-h6">{label}</Text>
+            </div>
+          ) : null}
+          <div className="flex flex-col items-center">
+            {description ? <div className={styleMap.description}>{description}</div> : null}
+            <List
+              className={style(description ? `${styleMap.description} mt-0.5` : 'text-h6')}
+              items={items}
+              listItemSize="M"
+              isDotted={isDotted}
+            />
+          </div>
+        </div>
+        {button?.text && !isMainButton ? (
+          <Button
+            className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
+            version={version as ButtonVersion}
+            {...button}
+          >
+            {button?.text}
+          </Button>
+        ) : null}
+      </div>
+    );
+  };
+
+const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[210px]');

package/mobile/src/components/Tile/Tile.example.json

@@ -2,7 +2,7 @@
   "content": {
     "title": "Плитка",
     "headingType": "h3",
-    "description": "Описание",
+    "__html": "<p>Описание</p>",
     "image": {
       "format": "webp",
       "size": {

package/mobile/src/components/Tile/Tile.tsx

@@ -5,7 +5,7 @@ import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
@@ -18,7 +18,7 @@ export const Tile = JSX<TileProps>(
   ({
     title,
     headingType = 'h3',
-    description,
+    __html,
     items,
     buttons,
     image,
@@ -52,9 +52,9 @@ export const Tile = JSX<TileProps>(
         })}
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
-        {description ? (
+        {__html ? (
           <div className="max-w-[600px] mt-2.5">
-            <Paragraph size="text-xl-light">{description}</Paragraph>
+            <RichText __html={__html} />
           </div>
         ) : null}
         {children}

package/mobile/src/components/Tile/Tile.ui.json

@@ -1 +1,7 @@
-{}
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}

package/mobile/src/components/Tile/TileContent.ts

@@ -1,17 +1,17 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { DescriptionProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { ListItemSize } from '../../ui-kit/List/ListProps';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
 
 /**
  * @title Плитка
  */
 export type TileContent = HeadingCommonProps &
-  DescriptionProps &
+  RichTextProps &
   ListContent &
   ButtonContent &
   TagsContent & {

package/mobile/src/hooks/useLink.ts

@@ -1,7 +1,6 @@
 import type { LinkProps } from '../model/LinkProps';
-import { projectSettings } from '../ProjectSettings';
-import { gotoBlock } from '../services/BlockRouter/BlockRouter';
-import { isHash, isLocalURL, joinPath } from '../utils/url';
+import { adjustHref } from '../utils/adjustHref';
+import { isLocalURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
@@ -18,35 +17,23 @@ export function useLink(isRemote?: boolean) {
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...props,
-    href: adjustHref(props.href),
+    href: isRemote ? props.href : adjustHref(router)(props.href),
     'aria-label': props.text,
     onClick: handlerDecorator(handleHref(props), props),
   });
 
-  function adjustHref(href: string | undefined) {
-    const isRelativeToBase = !isRemote && href?.startsWith('/');
-
-    return projectSettings.BASE_PATH && href && isRelativeToBase
-      ? joinPath(projectSettings.BASE_PATH, href)
-      : href;
-  }
-
   function handleHref({ href, target, onClick }: Partial<LinkProps & Clickable>) {
     return (ev?: PreventableEvent) => {
       onClick && onClick(ev);
 
-      if (isRemote || !isLocalURL(href, target)) {
+      if (!href || isRemote || !isLocalURL(href, target)) {
         // Default routing
         return;
       }
 
       // Client routing
       ev?.preventDefault();
-      if (isHash(href)) {
-        gotoBlock(router, href);
-      } else if (href) {
-        router.push(href);
-      }
+      router.push(href);
     };
   }
 }

package/mobile/src/services/BlockRouter/BlockRouter.ts

@@ -1,14 +1,11 @@
-import type { Router } from '../../hooks/useRouter';
 import type { BlockDef } from '../../model/ContentPageDef';
 
 const normalizeAnchor = (anchor?: string) => anchor?.replace('#', '') || '';
 
-export function gotoBlock(router: Router, anchor?: string) {
-  router.replace(`#${normalizeAnchor(anchor)}`);
-}
-
-export function trackBlock(router: Router, block?: BlockDef) {
-  router.replace(`#${normalizeAnchor(block?.anchor)}`, undefined, {
-    scroll: false,
-  });
+export function trackBlock(block?: BlockDef) {
+  globalThis.history?.replaceState(
+    globalThis.history?.state,
+    '',
+    `#${normalizeAnchor(block?.anchor)}`,
+  );
 }

package/mobile/src/services/BlockRouter/useBlockRouterProvider.ts

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
-import { useRouter } from '../../hooks/useRouter';
 import type { BlockDef } from '../../model/ContentPageDef';
 import { debounce } from '../../utils/debounce';
 import { trackBlock } from './BlockRouter';
@@ -9,8 +8,6 @@ import { findActiveBlock } from './findActiveBlock';
 const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
 
 export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
-  const router = useRouter();
-
   const intersectionsMapRef = useRef<Map<BlockDef, IntersectionObserverEntry>>(new Map());
 
   useEffect(
@@ -25,12 +22,9 @@ export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
 
   useEffect(() => {
     const handleScroll = debounce(() => {
-      if (isScrolledEnough()) {
-        const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
-        trackBlock(router, activeBlock);
-      } else {
-        trackBlock(router);
-      }
+      trackBlock(
+        isScrolledEnough() ? findActiveBlock([...(intersectionsMapRef.current || [])]) : undefined,
+      );
     }, 100);
 
     scrollTarget.addEventListener('scroll', handleScroll);
@@ -39,5 +33,5 @@ export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
       handleScroll.dispose();
       scrollTarget.removeEventListener('scroll', handleScroll);
     };
-  }, [router, scrollTarget]);
+  }, [scrollTarget]);
 }

package/mobile/src/setup-fixture.ts

@@ -3,13 +3,14 @@ import { useEffect, useState } from 'react';
 import { handlerDecorator } from './hooks/handlerDecorator';
 import { useRouter } from './hooks/useRouter';
 import { projectSettings } from './ProjectSettings';
+import { joinPath } from './utils/url';
 import wlc from './wlc.json';
 
 projectSettings.setup(wlc);
 
 useRouter.setup(() => {
   const [href, setHref] = useState<string>(
-    `${globalThis.location.origin}${projectSettings.BASE_PATH}cards-credit`,
+    joinPath(globalThis.location.origin, projectSettings.BASE_PATH, 'cards-credit'),
   );
 
   useEffect(() => {
@@ -26,9 +27,9 @@ useRouter.setup(() => {
 
   return {
     href,
-    pathname: projectSettings.BASE_PATH
-      ? new URL(href).pathname.substring(projectSettings.BASE_PATH.length - 1)
-      : '',
+    pathname: new URL(href).pathname.substring(
+      projectSettings.BASE_PATH ? projectSettings.BASE_PATH.length - 1 : 0,
+    ),
     query: {},
     push: (url: string) => {
       globalThis.history.pushState(null, '', url);

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -1,7 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useRouter } from '../../hooks/useRouter';
 import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
+import { adjustHref } from '../../utils/adjustHref';
 import { style } from '../../utils/style';
+import { joinPath } from '../../utils/url';
 import type { IconProps } from './IconProps';
 
 const svgUseStyleMap: Record<IconVersion, string> = {
@@ -22,7 +25,8 @@ export const Icon = JSX<IconProps>(
     asSVG,
     ...imgProps
   }) => {
-    const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+    const router = useRouter();
+    const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
 
     if (asSVG && iconVersion !== 'normal') {
       return (

package/mobile/src/ui-kit/Img/ImgAsPicture.tsx

@@ -1,20 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Router, useRouter } from '../../hooks/useRouter';
 import type { ImgSource, Picture } from '../../model/Picture';
+import { adjustHref } from '../../utils/adjustHref';
+import { isURL, joinPath } from '../../utils/url';
 import type { ImageProps } from './ImgProps';
 
-const sourcesComparator = (a: Picture, b: Picture) => {
-  if (a.media && b.media) {
-    return a.media - b.media;
-  }
-
-  return 0;
-};
+const sourcesComparator = (a: Picture, b: Picture) =>
+  a?.media && b?.media ? a.media - b.media : 0;
 
 export const ImgAsPicture = JSX<ImageProps>(
   ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
-    if (!image || (!image?.sources && !image?.src)) {
-      return null;
-    }
+    const router = useRouter();
 
     const pictureStyles = isMobile ? 'flex' : 'flex-none';
 
@@ -22,22 +18,25 @@ export const ImgAsPicture = JSX<ImageProps>(
       <picture className={`${pictureStyles} ${className}`}>
         {image?.sources?.length
           ? image.sources
+              .filter((_) => _?.src)
               .sort(sourcesComparator)
               .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
-                  srcSet={addPathPrefixToSrcSet(src, pathPrefix)}
+                  srcSet={adjustSrcset(router, pathPrefix)(src)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
                   {...image.size}
                 />
               ))
           : null}
-        {renderImg(
-          { ...image, src: addPathPrefixToSrc(image.src, pathPrefix) },
-          imageClassName,
-          isMobile,
-        )}
+        {image?.src
+          ? renderImg(
+              { ...image, src: adjustSrcset(router, pathPrefix)(image.src) },
+              imageClassName,
+              isMobile,
+            )
+          : null}
       </picture>
     );
   },
@@ -65,18 +64,14 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
   );
 };
 
-const normalizePathPrefix = (pathPrefix = '') =>
-  pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
-
-const addPathPrefixToSrc = (src?: string, pathPrefix?: string) =>
-  !src || src?.startsWith('data:image') ? src : `${normalizePathPrefix(pathPrefix)}${src}`;
-
-const addPathPrefixToSrcSet = (srcset?: string, pathPrefix?: string) =>
+const adjustSrcset = (router: Router, pathPrefix?: string) => (srcset: string | undefined) =>
   srcset
-    ?.split(',')
-    .map((src) => addPathPrefixToSrc(src.trim(), pathPrefix))
+    ?.split(/\s*,\s*/)
+    .map((src) => src.trim())
+    .filter(Boolean)
+    .map((src) => (isURL(src) ? src : joinPath(pathPrefix, src)))
+    .map(adjustHref(router))
     .join(', ');
 
-export function formatToMimeType(format: ImgSource['format']): string | undefined {
-  return format ? `image/${String(format)}` : undefined;
-}
+const formatToMimeType = (format: ImgSource['format']) =>
+  format ? `image/${String(format)}` : undefined;

package/mobile/src/utils/adjustHref.ts

@@ -0,0 +1,17 @@
+import { projectSettings } from '../ProjectSettings';
+import { dirname } from './dirname';
+import { isURL, joinPath } from './url';
+
+export const adjustHref = (router: { pathname: string }) => (href: string | undefined) => {
+  if (!href || isURL(href) || (projectSettings.CDN && href.startsWith(projectSettings.CDN))) {
+    return href;
+  }
+
+  const isRelativeToBase = href.startsWith('/');
+
+  return joinPath(
+    projectSettings.BASE_PATH,
+    isRelativeToBase ? '/' : dirname(router.pathname),
+    href,
+  );
+};

package/mobile/src/utils/dirname.ts

@@ -0,0 +1 @@
+export const dirname = (path: string | undefined) => path?.split('/').slice(0, -1).join('/');

package/mobile/src/utils/url.ts

@@ -1,7 +1,6 @@
 import type { Target } from '../model/LinkProps';
 
-export const isURL = (href?: string): href is `${string}//${string}` =>
-  Boolean(href?.includes('//'));
+export const isURL = (href?: string): href is `${string}:${string}` => Boolean(href?.includes(':'));
 
 export const isLocalURL = (href: string | undefined, target?: Target) =>
   Boolean(href && !isURL(href) && (!target || target === '_self'));
@@ -11,5 +10,5 @@ export const isHash = (href?: string): href is `#${string}` => Boolean(href?.sta
 export const withoutQuery = (href?: string): string =>
   (href || '').replace(/\?.*/, '').replace(/\/$/, '');
 
-export const joinPath = (...path: string[]): string =>
+export const joinPath = (...path: (string | undefined)[]): string =>
   path.filter(Boolean).join('/').replace(/\/+/g, '/');

package/mobile/src/wlc.json

@@ -2,6 +2,5 @@
   "PROD_BRANCH": "master",
   "FORCED_DRAFT_FLOW": false,
   "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b",
-  "BASE_PATH": "/natural/",
   "SITEMAP": "sayt-rshb"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "private": false,
   "license": "MIT",
   "author": "ЦК",