@redneckz/wildless-cms-uni-blocks 0.14.79 → 0.14.80

package/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -1,14 +1,17 @@
+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 { Badge } from './Badge';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
 import { getScheduleDescription } from './getScheduleDescription';
 import { getWorkScheduleWeek } from './getWorkScheduleWeek';
-import { type Branch, type Currency, type WorkScheduleWeek } from './OfficesAtmsMapProps';
+import { type Branch } from './OfficesAtmsMapProps';
 import { renderAlternativeDay, renderBusinessSchedule } from './renderBusinessSchedule';
-
-const currentWeekDayIdx = new Date().getDay();
+import { renderCurrency } from './renderCurrency';
+import { renderCurrentDaySchedule } from './renderCurrentDaySchedule';
+import { renderDay } from './renderDay';
+import { renderFoldButton } from './renderFoldButton';
 
 export const renderOfficeCard = (
   {
@@ -29,23 +32,76 @@ export const renderOfficeCard = (
     return null;
   }
 
+  const workScheduleWeek = getWorkScheduleWeek(workSchedule);
+
+  return (
+    <div key={String(index)} 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 ? (
+            <div className="flex pb-xl pt-xs gap-2xs">
+              <Icon name="GeolocationIcon" width="24" height="24" />
+              <Text size="text-l">{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>
+  );
+};
+
+const renderCardContent = ({
+  phone,
+  fax,
+  phoneBusiness,
+  phoneNatural,
+  phoneCallCentre,
+  phoneCurrencyControl,
+  workSchedule,
+  exchangeRate,
+}: Branch) => {
   const workScheduleWeek = getWorkScheduleWeek(workSchedule);
   const labelSchedule = workSchedule?.businessScheduleVisibleTag
     ? 'Для физических лиц'
     : 'Для физических и юридических лиц';
 
   return (
-    <div key={String(index)} className="bg-white col-span-12 p-3xl border-green border">
-      <div className="flex justify-between">
-        <Text size="text-h4">{name}</Text>
-        {renderCurrentDaySchedule(workScheduleWeek)}
-      </div>
-      {address ? (
-        <div className="flex pb-xl pt-xs gap-2xs">
-          <Icon name="GeolocationIcon" width="24" height="24" />
-          <Text size="text-l">{address}</Text>
-        </div>
-      ) : null}
+    <div>
       <CardRow className="flex-wrap">
         <CardCell label="Факс" value={fax} />
         <CardCell label="Телефон филиала" value={phone} />
@@ -54,7 +110,7 @@ export const renderOfficeCard = (
         <CardCell label="Для консультаций по валютному контролю" value={phoneCurrencyControl} />
         <CardCell label="Контакт-центр" value={phoneCallCentre} />
       </CardRow>
-      {workSchedule.isMatchesPattern ? (
+      {workSchedule?.isMatchesPattern ? (
         <CardRow>
           <CardCell label={labelSchedule} labelSize="text-l" className="w-full max-w-none">
             <div className="flex flex-wrap gap-xs sm:justify-between pt-xs">
@@ -79,55 +135,3 @@ export const renderOfficeCard = (
     </div>
   );
 };
-
-export const renderCurrency = (
-  { currency, buyExchangeRate, saleExchangeRate }: Currency,
-  i: number,
-) => (
-  <div key={String(i)} className="flex gap-lg h-full">
-    {currency?.currency ? <CardCell label="Валюта" value={currency.currency} /> : null}
-    {buyExchangeRate ? <CardCell label="Купить" value={String(buyExchangeRate)} /> : null}
-    {saleExchangeRate ? <CardCell label="Продать" value={String(saleExchangeRate)} /> : null}
-  </div>
-);
-
-//TODO: Add logic time https://github.com/redneckz/wildless-cms-uni-blocks/pull/1549
-export const renderCurrentDaySchedule = (workScheduleWeek?: WorkScheduleWeek[]) => {
-  const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
-
-  if (!currentWeekDay) {
-    return null;
-  }
-
-  const { lunchHour, status, workTime, hasLunch } = currentWeekDay;
-
-  return status ? (
-    <div className="flex gap-s items-start whitespace-nowrap">
-      {workTime ? <Badge color="green">{workTime}</Badge> : null}
-      {lunchHour && hasLunch ? <Badge color="yellow">{`перерыв: ${lunchHour}`}</Badge> : null}
-    </div>
-  ) : (
-    <Badge color="red">Выходной</Badge>
-  );
-};
-
-export const renderDay = (
-  { title, status, workTime, lunchHour, hasLunch }: WorkScheduleWeek,
-  index: number,
-) => (
-  <CardCell
-    key={String(index)}
-    label={title}
-    value={status && workTime ? workTime : ''}
-    subText={getSubTextLunch(lunchHour, hasLunch, status)}
-    subColor={!status || hasLunch ? 'text-error' : 'text-green-dark'}
-  />
-);
-
-const getSubTextLunch = (lunchHour?: string, hasLunch = false, status = false) => {
-  if (!status) {
-    return 'Не работает';
-  }
-
-  return lunchHour && hasLunch ? `Перерыв ${lunchHour}` : lunchHour;
-};