@redneckz/wildless-cms-uni-blocks 0.3.56 → 0.3.58

package/src/components/Calculator/MortgageCalculatorForm.tsx

@@ -0,0 +1,88 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
+import type { UniBlockProps } from '../../types';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS } from './constants';
+import { renderRealEstateValue } from './renderRealEstateValue';
+import { renderInitialFeeInput } from './renderInitialFeeInput';
+import { getCreditRate } from './getCreditRate';
+import { getCalculatorParams } from './getCalculatorParams';
+import { getDefaultSum } from './getDefaultSum';
+import { getDefaultMonths } from './getDefaultMonths';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderButtonSection } from './renderButtonSection';
+import { renderProposalMortgage } from './renderProposalMortgage';
+import { renderRate } from './renderRate';
+import { CommonCalculatorProps, MortgageCalculatorParams } from './CalculatorContent';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+
+export interface MortgageCalculatorProp
+  extends MortgageCalculatorParams,
+    CommonCalculatorProps,
+    UniBlockProps {}
+
+export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
+  ({ context, className = '', buttons }) => {
+    const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
+    const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
+    const [isInsurance, toggleIsInsurance] = context.useState(false);
+    const [isFullInsurance, toggleIsFullInsurance] = context.useState(false);
+
+    const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
+    const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isInsurance });
+
+    const defaultSum = getDefaultSum(calculatorParams);
+    const defaultMonths = getDefaultMonths(calculatorParams);
+
+    const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
+    const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
+
+    const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
+
+    const monthlyPayment = 777777; // TODO: hardcode
+    const proposalMortgageValue = { credit: 3892000, period: 15, taxRefund: 650000 }; // TODO: hardcode
+
+    return (
+      <section className={className}>
+        <div className="w-[468px]">
+          {renderRealEstateValue({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
+          {renderInitialFeeInput({
+            calculatorParams,
+            moneyValue,
+            defaultSum,
+            setMoneyValue,
+          })}
+          {renderMonthsInput({
+            title: 'Срок ипотеки, месяцев',
+            minMonths,
+            maxMonths,
+            monthsValue,
+            defaultMonths,
+            setMonthsValue,
+          })}
+          <div className="mt-7">
+            <Checkbox text="Страхование жизни" checked={isInsurance} onChange={toggleIsInsurance} />
+            <Checkbox
+              className="mt-4"
+              text="Страхование жизни, злоровья и временной утраты трудоспособности"
+              checked={isFullInsurance}
+              onChange={toggleIsFullInsurance}
+            />
+          </div>
+        </div>
+        <div>
+          <div>
+            {rate
+              ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
+              : null}
+          </div>
+          <CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />
+        </div>
+        <div>
+          <div className="w-[351px]">{renderProposalMortgage(proposalMortgageValue)}</div>
+          {renderButtonSection(context, buttons)}
+        </div>
+      </section>
+    );
+  },
+);

package/src/components/Calculator/constants.ts

@@ -0,0 +1,8 @@
+export const DEFAULT_MIN_SUM = 30000;
+export const DEFAULT_MAX_SUM = 3000000;
+export const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
+export const DEFAULT_MIN_MONTHS = 1;
+export const DEFAULT_MAX_MONTHS = 84;
+export const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
+
+export const MONTHS_IN_YEAR = 12;

package/src/components/Calculator/getCalculatorParams.ts

@@ -0,0 +1,16 @@
+import type { CalculatorParams } from './CalculatorContent';
+
+interface GetCalculatorParamsParams {
+  tableRows?: CalculatorParams[];
+  isAnnuity?: boolean;
+}
+
+export const getCalculatorParams = (params: GetCalculatorParamsParams) => {
+  const { tableRows, isAnnuity = false } = params;
+
+  if (!tableRows) return {};
+
+  const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
+
+  return calculatorParams || {};
+};

package/src/components/Calculator/getCreditRate.ts

@@ -0,0 +1,18 @@
+import type { CalculatorParams } from './CalculatorContent';
+
+const DEFAULT_RATE = 10.2;
+
+interface GetCreditRateParams {
+  calculatorParams?: CalculatorParams;
+  isInsurance: boolean;
+}
+
+export const getCreditRate = (params: GetCreditRateParams) => {
+  const { calculatorParams, isInsurance } = params;
+
+  if (!calculatorParams) return DEFAULT_RATE;
+
+  return isInsurance
+    ? calculatorParams?.rateWithInsurance || DEFAULT_RATE
+    : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE;
+};

package/src/components/Calculator/getDefaultMonths.ts

@@ -0,0 +1,7 @@
+import { DEFAULT_MONTHS } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+export const getDefaultMonths = (calculatorParams: CalculatorParams) =>
+  calculatorParams.maxMonths && calculatorParams.minMonths
+    ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
+    : DEFAULT_MONTHS;

package/src/components/Calculator/getDefaultSum.ts

@@ -0,0 +1,7 @@
+import { DEFAULT_SUM } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+export const getDefaultSum = (calculatorParams: CalculatorParams) =>
+  calculatorParams.maxSum && calculatorParams.minSum
+    ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
+    : DEFAULT_SUM;

package/src/components/Calculator/getMonthlyPayment.ts

@@ -0,0 +1,32 @@
+import { clamp } from '../../utils/clamp';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM, MONTHS_IN_YEAR } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+type PaymentType = 'annuity' | 'differentiated';
+
+interface GetMonthlyPaymentParams {
+  calculatorParams?: CalculatorParams;
+  paymentType: PaymentType;
+  rate: number;
+  sum: number;
+  months: number;
+}
+
+export const getMonthlyPayment = (params: GetMonthlyPaymentParams) => {
+  const { calculatorParams, paymentType, rate, sum, months } = params;
+
+  if (!calculatorParams) return 0;
+
+  const finalSum = clamp(
+    sum,
+    calculatorParams.minSum || DEFAULT_MIN_SUM,
+    calculatorParams.maxSum || DEFAULT_MAX_SUM,
+  );
+
+  if (paymentType === 'annuity') {
+    const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
+    return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
+  } else {
+    return finalSum / months + finalSum * (Number(rate) / 12);
+  }
+};

package/src/components/Calculator/renderButtonSection.tsx

@@ -0,0 +1,7 @@
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+
+export function renderButtonSection(context, buttons) {
+  return buttons?.length ? (
+    <ButtonSection context={context} buttons={buttons} className="flex flex-col mt-7 gap-2" />
+  ) : null;
+}

package/src/components/Calculator/renderCalculatorList.tsx

@@ -0,0 +1,43 @@
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { CalculatorBlockDef } from './CalculatorContent';
+import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
+
+type EmbeddableCalcBlocks = {
+  blockCalcTabs?: CalculatorBlockDef[];
+  context: ContentPageContext;
+  className?: string;
+};
+
+export const renderCalculatorList = ({
+  blockCalcTabs,
+  context,
+  className,
+}: EmbeddableCalcBlocks) => {
+  return blockCalcTabs?.length ? blockCalcTabs.map(renderBlock({ context, className })) : null;
+};
+
+const renderBlock =
+  ({ context, className }: any) =>
+  (blockCalcTabs: CalculatorBlockDef, i: number) => {
+    const type = blockCalcTabs?.calcType;
+    if (!type || !(type in EmbeddableCalcBlocks)) {
+      return null;
+    }
+    const EmbeddedBlock: JSXBlock<EmbeddableCalcProps> = EmbeddableCalcBlocks[type];
+    return (
+      <section
+        key={`${String(i)}`}
+        className={`box-border relative flex grow-0 shrink-0 basis-full ${className}`}
+        role="listitem"
+      >
+        <div className={`box-border p-9 w-full`}>
+          <EmbeddedBlock
+            context={context}
+            {...blockCalcTabs}
+            className="!p-0 flex justify-between"
+          />
+        </div>
+      </section>
+    );
+  };

package/src/components/Calculator/renderInitialFeeInput.tsx

@@ -0,0 +1,37 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+const STEP_MONEY = 1000;
+
+interface RenderWantedSumInputProps {
+  calculatorParams: CalculatorParams;
+  moneyValue: number | undefined;
+  defaultSum: number;
+  setMoneyValue: InputRangeProps['onChange'];
+}
+
+export function renderInitialFeeInput(props: RenderWantedSumInputProps) {
+  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
+
+  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+
+  return (
+    <InputRange
+      className="mt-6"
+      title="Первоначальный взнос, ₽ "
+      items={[
+        `От ${addSpacesBetweenNumbers(minSum)} рублей`,
+        `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
+      ]}
+      min={minSum}
+      max={maxSum}
+      step={STEP_MONEY}
+      value={moneyValue || defaultSum}
+      onChange={setMoneyValue}
+    />
+  );
+}

package/src/components/Calculator/renderMonthsInput.tsx

@@ -0,0 +1,34 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+
+const STEP_MONTHS = 1;
+
+interface RenderMonthsInputProps {
+  title: string;
+  minMonths: number;
+  maxMonths: number;
+  monthsValue: number | undefined;
+  defaultMonths: number;
+  setMonthsValue: InputRangeProps['onChange'];
+}
+
+export function renderMonthsInput(props: RenderMonthsInputProps) {
+  const { title, minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
+  const monthText = (month) => {
+    const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
+    return `${month} ${text}`;
+  };
+
+  return (
+    <InputRange
+      className="mt-6"
+      title={title}
+      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
+      min={minMonths}
+      max={maxMonths}
+      step={STEP_MONTHS}
+      value={monthsValue || defaultMonths}
+      onChange={setMonthsValue}
+    />
+  );
+}

package/src/components/Calculator/renderProposal.tsx

@@ -0,0 +1,14 @@
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { Button } from '../../ui-kit/Button/Button';
+
+export function renderProposal(monthlyPayment: number) {
+  return (
+    <div className="box-border ">
+      <div className="text-base font-light">Ежемесячный платёж</div>
+      <div className="text-title mb-3 font-normal">
+        {addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽
+      </div>
+      <Button className="mt-[50px] w-full" text="Отправить заявку" version="primary" href="#" />
+    </div>
+  );
+}

package/src/components/Calculator/renderProposalMortgage.tsx

@@ -0,0 +1,17 @@
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+
+type porposalMortgage = {
+  credit: number;
+  period: number;
+  taxRefund: number;
+};
+
+export function renderProposalMortgage({ credit, period, taxRefund }: porposalMortgage) {
+  return (
+    <div>
+      {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
+      {<CalculatorValueBlock title="Срок" value={period} postfix="лет" />}
+      {<CalculatorValueBlock title="Налоговый вычет" value={taxRefund} postfix="₽" />}
+    </div>
+  );
+}

package/src/components/Calculator/renderRate.tsx

@@ -0,0 +1,23 @@
+type rateType = {
+  rate: number;
+  title?: string;
+  sup?: string;
+  className?: string;
+};
+
+export function renderRate({ rate, title, sup, className = '' }: rateType) {
+  const rateFormat = String(rate).replace('.', ',');
+  return (
+    <div>
+      <div className="text-sm font-light ml-3">{title}</div>
+      <div className="flex justify-start">
+        <span
+          className={`calc-rate-text font-mohave text-[200px] leading-[250px] pr-4 mt-[-16px] ${className}`}
+        >
+          {rateFormat}
+        </span>
+        {sup ? <span className="calc-rate-text text-[65px] leading-[75px]">{sup}</span> : ''}
+      </div>
+    </div>
+  );
+}

package/src/components/Calculator/renderRealEstateValue.tsx

@@ -0,0 +1,33 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+const STEP_MONEY = 1000;
+
+interface RenderRealEstateValueInputProps {
+  calculatorParams: CalculatorParams;
+  moneyValue: number | undefined;
+  defaultSum: number;
+  setMoneyValue: InputRangeProps['onChange'];
+}
+
+export function renderRealEstateValue(props: RenderRealEstateValueInputProps) {
+  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
+
+  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+
+  return (
+    <InputRange
+      title="Стоимость недвижимости, ₽ "
+      items={[`От ${addSpacesBetweenNumbers(minSum)} ₽`, `До ${addSpacesBetweenNumbers(maxSum)} ₽`]}
+      min={minSum}
+      max={maxSum}
+      step={STEP_MONEY}
+      value={moneyValue || defaultSum}
+      onChange={setMoneyValue}
+    />
+  );
+}

package/src/components/Calculator/renderWantedSumInput.tsx

@@ -0,0 +1,49 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
+import type { CalculatorParams } from './CalculatorContent';
+
+const STEP_MONEY = 1000;
+
+interface RenderWantedSumInputProps {
+  className?: string;
+  title: string;
+  isShowItems?: boolean;
+  calculatorParams: CalculatorParams;
+  moneyValue: number | undefined;
+  defaultSum: number;
+  setMoneyValue: InputRangeProps['onChange'];
+}
+
+export function renderWantedSumInput(props: RenderWantedSumInputProps) {
+  const {
+    title,
+    className = '',
+    calculatorParams,
+    moneyValue,
+    defaultSum,
+    setMoneyValue,
+    isShowItems = true,
+  } = props;
+
+  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+  const items = [
+    `От ${addSpacesBetweenNumbers(minSum)} ₽`,
+    `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
+  ];
+
+  return (
+    <InputRange
+      className={className}
+      title={title}
+      items={isShowItems ? items : []}
+      min={minSum}
+      max={maxSum}
+      step={STEP_MONEY}
+      value={moneyValue || defaultSum}
+      onChange={setMoneyValue}
+    />
+  );
+}

package/src/components/ContentPage/ContentPage.page.json

@@ -61,11 +61,12 @@
       "type": "ProductGallery",
       "style": ["col-span-12"],
       "content": {
+        "version": "secondary",
         "slides": [
           {
             "nav": {
               "title": "Деньги на любые цели",
-              "desc": "Ставка от 12,5% годовых на срок до 5 лет"
+              "description": "Ставка от 12,5% годовых на срок до 5 лет"
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 5 лет!»",
@@ -79,7 +80,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -103,7 +104,7 @@
           {
             "nav": {
               "title": "Для людей в возрасте",
-              "desc": "Ставка от 12,5% годовых на срок до 3 лет"
+              "description": "Ставка от 12,5% годовых на срок до 3 лет"
             },
             "productBlock": {
               "title": "Ставка от 12,5% годовых на срок до 3 лет!»",
@@ -117,7 +118,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -141,7 +142,7 @@
           {
             "nav": {
               "title": "Выгодно покупать",
-              "desc": "Дополнительные бонусные баллы за покупки"
+              "description": "Дополнительные бонусные баллы за покупки"
             },
             "productBlock": {
               "title": "Дополнительные бонусные баллы за покупки!»",
@@ -150,7 +151,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {
@@ -168,7 +169,7 @@
           {
             "nav": {
               "title": "Карты Unionpay",
-              "desc": "Кэшбэк до 20% у партнеров"
+              "description": "Кэшбэк до 20% у партнеров"
             },
             "productBlock": {
               "title": "Карты Unionpay»",
@@ -182,7 +183,7 @@
                   "href": "https://rshb.ru",
                   "text": "Подробнее",
                   "target": "_blank",
-                  "version": "primary"
+                  "version": "secondary"
                 }
               ],
               "image": {

package/src/components/ContentPage/ContentPage.tsx

@@ -19,8 +19,8 @@ export type BlockDecorator<VNode = any> = (
   index?: number | string,
 ) => any;
 
-export type JSXBlock = (
-  props: PropsWithChildren<UniBlockProps & BlockContent, any>,
+export type JSXBlock<BlockProps = BlockContent> = (
+  props: PropsWithChildren<UniBlockProps & BlockProps, any>,
   context?: any,
 ) => any;
 

package/src/components/GroupBlock/BlocksTypeProps.ts

@@ -0,0 +1,40 @@
+import type { ProductBlockContent } from '../../components/ProductBlock/ProductBlockContent';
+import type { ProductTileContent } from '../../components/ProductTile/ProductTileContent';
+import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+
+export interface ActiveHandler {
+  context: ContentPageContext;
+  blocks?: GroupBlockDef[];
+  initialState?: boolean;
+}
+
+export interface GroupBlockCommonProps {
+  /** @title Стиль */
+  style?: string[];
+  /** @title Теги */
+  tags?: string[];
+}
+
+/**
+ * @title Продуктовый блок
+ * @default {"blockType": "ProductBlock"}
+ */
+export type ProductBlockDef = ProductBlockContent &
+  GroupBlockCommonProps & { blockType: 'ProductBlock' };
+
+/**
+ * @title Продуктовая плитка
+ * @default {"blockType": "ProductTile"}
+ */
+export type ProductTileDef = ProductTileContent &
+  GroupBlockCommonProps & { blockType: 'ProductTile' };
+
+/**
+ * @title Выберите блок
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Содержимое блока
+ */
+export type GroupBlockDef = EmptyOption | ProductBlockDef | ProductTileDef;

package/src/components/GroupBlock/EmbeddableGroupBlocks.tsx

@@ -0,0 +1,7 @@
+import { ProductBlock } from '../ProductBlock/ProductBlock';
+import { ProductTile } from '../ProductTile/ProductTile';
+
+export const EmbeddableGroupBlocks = {
+  ProductBlock,
+  ProductTile,
+};

package/src/components/GroupBlock/GroupBlock.example.json

@@ -0,0 +1,27 @@
+{
+  "tabs": [
+    { "title": "Еще программы", "index": 0 },
+    { "title": "Страхование жизни", "index": 1, "tag": "tag1" },
+    { "title": "Страхование здоровья", "index": 2, "tag": "tag2" }
+  ],
+  "blocks": [
+    {
+      "blockType": "ProductBlock",
+      "title": "Продуктовый блок",
+      "description": "Описание текстового блока",
+      "tags":["tag2"]
+    },
+    {
+      "blockType": "ProductTile",
+      "title": "Продуктовая плитка",
+      "description": "Описание текстового блока",
+      "tags":["tag1"]
+    },
+    {
+      "blockType": "ProductBlock",
+      "title": "Продуктовый блок",
+      "description": "Описание текстового блока",
+      "tags":["tag2"]
+    }
+  ]
+}

package/src/components/GroupBlock/GroupBlock.fixture.tsx

@@ -0,0 +1,51 @@
+import { context } from '../../setup-fixture';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
+import { GroupBlock } from './GroupBlock';
+import groupBlockExample from './GroupBlock.example.json';
+import type { ProductTileDef, ProductBlockDef } from './BlocksTypeProps';
+
+const PRODUCT_TILE_GROUP_BLOCK: ProductTileDef = {
+  blockType: 'ProductTile',
+  tags: ['tag2'],
+  style: ['col-span-6'],
+  ...PRODUCT_TILE,
+};
+
+const PRODUCT_TILE_GROUP_BLOCK2: ProductTileDef = {
+  blockType: 'ProductTile',
+  tags: ['tag2'],
+  style: ['col-span-6'],
+  ...PRODUCT_TILE,
+};
+
+const PRODUCT_BLOCK_GROUP_BLOCK: ProductBlockDef = {
+  blockType: 'ProductBlock',
+  tags: ['tag1'],
+  style: ['col-span-12'],
+  ...PRODUCT_BLOCK,
+};
+
+const PRODUCT_BLOCK_GROUP_BLOCK2: ProductBlockDef = {
+  blockType: 'ProductBlock',
+  style: ['col-span-12'],
+  ...PRODUCT_BLOCK,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <GroupBlock
+        context={context}
+        className="col-span-12"
+        tabs={groupBlockExample.tabs}
+        groupBlocks={[
+          PRODUCT_TILE_GROUP_BLOCK,
+          PRODUCT_TILE_GROUP_BLOCK2,
+          PRODUCT_BLOCK_GROUP_BLOCK,
+          PRODUCT_BLOCK_GROUP_BLOCK2,
+        ]}
+      />
+    </div>
+  ),
+};