@redneckz/wildless-cms-uni-blocks 0.14.741 → 0.14.743

package/mobile/src/components/OfficesAtmsMap/renderFoldButton.tsx

@@ -1,18 +1,12 @@
-import { type IconName } from '../../icons/IconName';
 import { type VNode } from '../../model/VNode';
+import { IconButton } from '../../ui-kit/Button/IconButton';
 import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
-import { Icon } from '../../ui-kit/Icon/Icon';
-
-const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
-const labels = ['Подробнее', 'Скрыть'];
 
 export const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
-  <button
-    className="w-full py-2xl cursor-pointer text-primary-main flex items-center border-b border-solid border-main-divider"
+  <IconButton
+    className="w-full border-b border-solid border-main-divider"
+    name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+    text={isUnfolded ? 'Скрыть' : 'Подробнее'}
     onClick={onToggle}
-    type="button"
-  >
-    <div className="pr-m">{labels[Number(isUnfolded)]}</div>
-    <Icon className="text-primary-text" name={ICONS[Number(isUnfolded)]} width="16" height="16" />
-  </button>
+  />
 );

package/mobile/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -1,9 +1,8 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { getScheduleDescription } from './getScheduleDescription';
 import { getWorkScheduleWeek } from './getWorkScheduleWeek';
 import { type Branch } from './OfficesAtmsMapProps';
@@ -11,77 +10,31 @@ import { renderAlternativeDay, renderBusinessSchedule } from './renderBusinessSc
 import { renderCurrency } from './renderCurrency';
 import { renderCurrentDaySchedule } from './renderCurrentDaySchedule';
 import { renderDay } from './renderDay';
-import { renderFoldButton } from './renderFoldButton';
 import { renderWorkSchedule } from './renderWorkSchedule';
 
-export const renderOfficeCard = (
-  {
-    name,
-    address,
-    phone,
-    fax,
-    phoneBusiness,
-    phoneNatural,
-    phoneCallCentre,
-    phoneCurrencyControl,
-    workSchedule,
-    exchangeRate,
-  }: Branch,
-  i: number,
-) => {
-  if (!workSchedule) {
+export const renderOfficeCard = (branch: Branch, i: number) => {
+  if (!branch.workSchedule) {
     return null;
   }
 
-  const workScheduleWeek = getWorkScheduleWeek(workSchedule);
+  const workScheduleWeek = getWorkScheduleWeek(branch.workSchedule);
 
   return (
     <div key={String(i)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
       <div className="sm:flex sm:justify-between">
         <div>
-          <Text size="text-h4">{name}</Text>
-          {address ? (
+          <Text size="text-h4">{branch.name}</Text>
+          {branch.address ? (
             <div className="flex pb-xl pt-xs gap-2xs">
               <Icon name="GeolocationIcon" width="24" height="24" />
-              <Text size="text-l">{address}</Text>
+              <Text size="text-l">{branch.address}</Text>
             </div>
           ) : null}
         </div>
         {renderCurrentDaySchedule(workScheduleWeek)}
       </div>
-      <div className="hidden sm:block">
-        {renderCardContent({
-          phone,
-          fax,
-          phoneBusiness,
-          phoneNatural,
-          phoneCallCentre,
-          phoneCurrencyControl,
-          workSchedule,
-          exchangeRate,
-        })}
-      </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => {
-          return (
-            <FoldableSection isUnfolded={isUnfolded}>
-              {renderCardContent({
-                phone,
-                fax,
-                phoneBusiness,
-                phoneNatural,
-                phoneCallCentre,
-                phoneCurrencyControl,
-                workSchedule,
-                exchangeRate,
-              })}
-            </FoldableSection>
-          );
-        }}
-        //** TODO: remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <div className="hidden sm:block">{renderCardContent(branch)}</div>
+      <FoldableCardContent>{renderCardContent(branch)}</FoldableCardContent>
     </div>
   );
 };

package/mobile/src/components/OfficesAtmsMap/renderRemoteWorkplaceCard.tsx

@@ -1,11 +1,9 @@
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
+import { FoldableCardContent } from './FoldableCardContent';
 import { type RemoteWorkplace } from './OfficesAtmsMapProps';
-import { renderFoldButton } from './renderFoldButton';
 
 export const renderRemoteWorkplaceCard = (
   { address, workScheduleDescription }: RemoteWorkplace,
@@ -28,28 +26,13 @@ export const renderRemoteWorkplaceCard = (
           ) : null}
         </div>
       </div>
-      <div className="hidden sm:block">
-        {renderCardContent({
-          workScheduleDescription,
-        })}
-      </div>
-      <Foldable
-        className="block sm:hidden"
-        renderFoldableSection={({ isUnfolded }) => (
-          <FoldableSection isUnfolded={isUnfolded}>
-            {renderCardContent({
-              workScheduleDescription,
-            })}
-          </FoldableSection>
-        )}
-        //** TODO: remove styles with refactoring  DefaultFoldButton*/
-        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
-      />
+      <div className="hidden sm:block">{renderCardContent(workScheduleDescription)}</div>
+      <FoldableCardContent>{renderCardContent(workScheduleDescription)}</FoldableCardContent>
     </div>
   );
 };
 
-const renderCardContent = ({ workScheduleDescription }: RemoteWorkplace) => {
+const renderCardContent = (workScheduleDescription?: string) => {
   return (
     <div>
       <CardRow className="flex">

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -1,3 +1,4 @@
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useMobileMode } from '../../hooks/useMobileMode';
 import { type Picture } from '../../model/Picture';
@@ -37,6 +38,29 @@ export const RollupItem = UniBlock<RollupItemProps>(
   }) => {
     const isMobile = useMobileMode();
 
+    const [isUnfolded, { toggle }] = useBool(isExpanded);
+
+    const foldableSection = (
+      <FoldableSection
+        className={style('gap-lg', getFoldableStyles(isMobile))}
+        isUnfolded={isUnfolded}
+      >
+        {renderChildren({
+          ...rest,
+          extraProps: { className: 'w-full', padding: 'p-0' },
+        })}
+      </FoldableSection>
+    );
+    const foldButton = renderFoldButton({
+      foldButtonVersion,
+      label,
+      labelIcon,
+      labelIconBgVersion,
+      isMobile,
+      isUnfolded,
+      onToggle: toggle,
+    });
+
     return (
       <BlockWrapper
         className={style(
@@ -49,32 +73,10 @@ export const RollupItem = UniBlock<RollupItemProps>(
         role={role}
         {...rest}
       >
-        <Foldable
-          isFoldButtonOnTop={isFoldButtonOnTop}
-          unfoldedByDefault={isExpanded}
-          renderFoldableSection={({ isUnfolded }) => (
-            <FoldableSection
-              className={style('gap-lg', getFoldableStyles(isMobile))}
-              isUnfolded={isUnfolded}
-            >
-              {renderChildren({
-                ...rest,
-                extraProps: { className: 'w-full', padding: 'p-0' },
-              })}
-            </FoldableSection>
-          )}
-          renderFoldButton={({ isUnfolded, onToggle }) =>
-            renderFoldButton({
-              foldButtonVersion,
-              label,
-              labelIcon,
-              labelIconBgVersion,
-              isUnfolded,
-              onToggle,
-              isMobile,
-            })
-          }
-        />
+        <Foldable>
+          {isFoldButtonOnTop ? foldButton : foldableSection}
+          {isFoldButtonOnTop ? foldableSection : foldButton}
+        </Foldable>
       </BlockWrapper>
     );
   },
@@ -98,8 +100,8 @@ const renderFoldButton = ({
   labelIcon,
   labelIconBgVersion,
   isUnfolded,
-  onToggle,
   isMobile = false,
+  onToggle,
 }: FoldButtonProps) => {
   const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
   const icon = getIconName(isUnfolded, isMobile);

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
@@ -40,6 +41,8 @@ export const TariffsTable = JSX<TariffsTableProps>(
     const [visibleRows, hiddenRows] =
       hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
 
+    const [isUnfolded, { toggle }] = useBool(false);
+
     return (
       <BlockWrapper
         className={style('relative space-y-6xl @4xl:space-y-xl', className)}
@@ -55,15 +58,13 @@ export const TariffsTable = JSX<TariffsTableProps>(
         />
         <div className="space-y-m overflow-hidden">
           {hiddenRowsNum > 0 ? (
-            <Foldable
-              renderFoldableSection={({ isUnfolded }) => (
-                <TariffsTableWrapper controls={controls}>
-                  {visibleRows}
-                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
-                </TariffsTableWrapper>
-              )}
-              renderFoldButton={renderDefaultFoldButton}
-            />
+            <Foldable>
+              <TariffsTableWrapper controls={controls}>
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+              </TariffsTableWrapper>
+              {renderDefaultFoldButton({ isUnfolded, onToggle: toggle })}
+            </Foldable>
           ) : (
             <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>
           )}

package/mobile/src/model/FormTypeFieldDef.ts

@@ -17,4 +17,5 @@ export type FormTypeFieldDef =
   | 'ULTRASERVICE'
   | 'FEEDBACK'
   | 'FEEDBACK_QS'
-  | 'OUTSERVICE';
+  | 'OUTSERVICE'
+  | 'RFB';

package/mobile/src/ui-kit/BaseFiltration/FilteredBlocks.tsx

@@ -3,8 +3,8 @@ import { type BlockDef } from '../../model/ContentPageDef';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { NotFound } from '../NotFound/NotFound';
 import { type BaseFiltrationContent } from './BaseFiltrationContent';
+import { GridBlocks } from './GridBlocks';
 import { renderCarouselBlocks } from './renderCarouselBlocks';
-import { renderGridBlocks } from './renderGridBlocks';
 
 interface FilteredBlocksProps extends BaseFiltrationContent, UniBlockProps {
   blocksToRender?: BlockDef[];
@@ -17,7 +17,7 @@ export const FilteredBlocks = JSX<FilteredBlocksProps>(
         return (
           <div>
             {renderNotFound(notFound, blocksToRender)}
-            {renderGridBlocks({ ...blocksSection, ...rest, blocksToRender })}
+            <GridBlocks {...blocksSection} {...rest} blocksToRender={blocksToRender} />
           </div>
         );
       case 'carousel':

package/mobile/src/ui-kit/BaseFiltration/{renderGridBlocks.tsx → GridBlocks.tsx}

@@ -1,3 +1,5 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
 import { AdTile } from '../../components/AdTile/AdTile';
 import { type BlockDef } from '../../model/ContentPageDef';
@@ -7,49 +9,44 @@ import { style } from '../../utils/style';
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { Foldable } from '../Foldable/Foldable';
 import { FoldableSection } from '../Foldable/FoldableSection';
-import { type IconName } from '../Icon/IconProps';
 import { type GridSection } from './BaseFiltrationContent';
 
-const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
-
 const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs';
 
-export const renderGridBlocks = ({
-  topItemsCount = 0,
-  label = '',
-  block,
-  blocksToRender = [],
-  ...rest
-}: GridSection & UniBlockProps & { blocksToRender?: BlockDef[] }) => {
-  const [visibleBlocks, hiddenBlocks] =
-    topItemsCount > 0
-      ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
-      : [blocksToRender, []];
+interface GridBlocksProps extends GridSection, UniBlockProps {
+  blocksToRender?: BlockDef[];
+}
 
-  return (
-    <div className={style('space-y-2xs', { hidden: !blocksToRender.length })}>
-      <div className={style(resultsGridStyle)}>
-        {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
-        {isOdd(visibleBlocks.length) ? <AdTile className="col-span-6" {...rest} /> : null}
-      </div>
-      <Foldable
-        renderFoldableSection={({ isUnfolded }) => (
+export const GridBlocks = JSX<GridBlocksProps>(
+  ({ topItemsCount = 0, label = '', block, blocksToRender = [], ...rest }) => {
+    const [visibleBlocks, hiddenBlocks] =
+      topItemsCount > 0
+        ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
+        : [blocksToRender, []];
+
+    const [isUnfolded, { toggle }] = useBool(false);
+
+    return (
+      <div className={style('space-y-2xs', { hidden: !blocksToRender.length })}>
+        <div className={style(resultsGridStyle)}>
+          {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
+          {isOdd(visibleBlocks.length) ? <AdTile className="col-span-6" {...rest} /> : null}
+        </div>
+        <Foldable>
           <FoldableSection className={style(resultsGridStyle)} isUnfolded={isUnfolded}>
             {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}
             {isOdd(hiddenBlocks.length) ? <AdTile className="col-span-6" {...rest} /> : null}
           </FoldableSection>
-        )}
-        renderFoldButton={({ isUnfolded, onToggle }) => (
           <DefaultFoldButton
             className={style({ hidden: topItemsCount < 1 })}
+            dataTheme={rest.options?.page?.colorPalette}
             disabled={!hiddenBlocks?.length}
             label={label}
-            icon={ICONS[Number(isUnfolded)]}
-            dataTheme={rest.options?.page?.colorPalette}
-            onClick={onToggle}
+            icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+            onClick={toggle}
           />
-        )}
-      />
-    </div>
-  );
-};
+        </Foldable>
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Button/IconButton.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import type { IconName } from '../../icons/IconName';
+import { type AspectsDef } from '../../model/AspectsProps';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { getAspectsAttributes } from '../../utils/dataAttributes';
+import { style } from '../../utils/style';
+
+export interface IconButtonProps {
+  className?: string;
+  name: IconName;
+  text?: string;
+  data?: AspectsDef[];
+  onClick?: () => void;
+}
+
+export const IconButton = JSX<IconButtonProps>(({ className, name, text, data, onClick }) => {
+  const aspectsAttrs = useMemo(() => getAspectsAttributes(data), [data]);
+
+  return (
+    <button
+      className={style(
+        'text-primary-main flex justify-between items-center border-none px-m',
+        text ? 'pt-lg' : 'py-2xs',
+        className,
+      )}
+      type="button"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...aspectsAttrs}
+      onClick={onClick}
+    >
+      {text ? <div className="pr-m">{text}</div> : null}
+      <Icon className="text-primary-text" name={name} width="16" height="16" />
+    </button>
+  );
+});

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -50,15 +50,10 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
   ),
 );
 
-export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {
-  const labels = ['Развернуть', 'Скрыть'];
-  const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
-
-  return (
-    <DefaultFoldButton
-      icon={icons[Number(isUnfolded)]}
-      label={labels[Number(isUnfolded)]}
-      onClick={onToggle}
-    />
-  );
-};
+export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => (
+  <DefaultFoldButton
+    icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+    label={isUnfolded ? 'Скрыть' : 'Развернуть'}
+    onClick={onToggle}
+  />
+);

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

@@ -1,43 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { type VNode } from '../../model/VNode';
-import { type FoldablePartProps } from './FoldablePartProps';
+import { style } from '../../utils/style';
 
 export interface FoldableProps {
   className?: string;
-  unfoldedByDefault?: boolean;
-  isFoldButtonOnTop?: boolean;
-  renderFoldableSection: (props: FoldablePartProps) => VNode;
-  renderFoldButton?: ((props: FoldablePartProps) => VNode) | null;
 }
 
-export const Foldable = JSX<FoldableProps>(
-  ({
-    className = '',
-    isFoldButtonOnTop = false,
-    unfoldedByDefault = false,
-    renderFoldableSection,
-    renderFoldButton,
-  }) => {
-    const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-
-    const onToggle = useCallback(() => {
-      setIsUnfolded((_) => !_);
-    }, []);
-
-    const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
-    const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
-
-    return isFoldButtonOnTop ? (
-      <div className={className} role="group">
-        {buttonNode}
-        {sectionNode}
-      </div>
-    ) : (
-      <div className={className} role="group">
-        {sectionNode}
-        {buttonNode}
-      </div>
-    );
-  },
-);
+// TODO Не особо полезно, в итоге
+export const Foldable = JSX<FoldableProps>(({ className, children }) => (
+  <div className={style(className)} role="group">
+    {children}
+  </div>
+));

package/mobile/src/utils/capitalize.ts

@@ -0,0 +1,2 @@
+export const capitalize = (text?: string): string =>
+  text ? `${text.charAt(0).toUpperCase()}${text.slice(1)}` : '';

package/mobile/src/utils/dataAttributes.ts

@@ -1,14 +1,8 @@
 import { type AspectsDef } from '../model/AspectsProps';
 
 export const getAspectsAttributes = (data?: AspectsDef[]) => {
-  if (!Array.isArray(data) || !data.length) {
-    return {};
-  }
-
   try {
-    return {
-      'data-aspects': JSON.stringify(data),
-    };
+    return Array.isArray(data) && data.length ? { 'data-aspects': JSON.stringify(data) } : {};
   } catch (_) {
     return {};
   }

package/package.json

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

package/src/components/ApplicationForm/ApplicationForm.example.json

@@ -1068,5 +1068,41 @@
         }
       }
     }
+  ],
+  [
+    "Рецепт для бизнеса",
+    {
+      "content": {
+        "version": "primary",
+        "padding": "",
+        "title": "Заявка по акции 'Рецепт для бизнеса'",
+        "typeForm": "RFB",
+        "endpoint": "sendcorporatelead",
+        "sections": [
+          {
+            "inputs": [{ "name": "name", "required": true, "label": "ФИО" }]
+          },
+          {
+            "columns": 2,
+            "inputs": [
+              { "name": "phone", "required": true },
+              { "name": "inn", "required": true }
+            ]
+          },
+          {
+            "inputs": [{ "name": "consentDataProcessing", "required": true }]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "Согласен на обработку персональных данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        }
+      }
+    }
   ]
 ]

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -653,4 +653,31 @@ export default {
       <DialogManager />
     </div>
   ),
+  receiptForBusiness: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Заявка по акции 'Рецепт для бизнеса'"
+        typeForm="RFB"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            inputs: [{ name: 'name', required: true, label: 'ФИО' }],
+          },
+          {
+            columns: 2,
+            inputs: [
+              { name: 'phone', required: true },
+              { name: 'inn', required: true },
+            ],
+          },
+          { inputs: [{ name: 'consentDataProcessing', required: true }] },
+        ]}
+        button={button}
+        link={link}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
 };