@levo-so/blocks 0.1.52 → 0.1.58

package/src/blocks/services/service-3.tsx

@@ -0,0 +1,135 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  Section,
+  Typography,
+  useBlockContext,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+import React, { useState } from "react";
+
+import type { IService3Content } from "./service-3.schema";
+
+const Service3: React.FC<ILevoBlockBaseProps<IService3Content>> = ({
+  content,
+  config,
+}) => {
+  const [zipcode, setZipcode] = useState("");
+  const { isBuilder } = useBlockContext();
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="breadcrumbs_levoGroup" data-levo_group>
+          {(content?.breadcrumbs ?? []).map((_: any, index: number) => (
+            <Box
+              key={`stat-${index}`}
+              data-levo_group_item
+              elementKey={`breadcrumbs.${index}.wrapper`}
+            >
+              <Typography elementKey={`breadcrumbs.${index}.label`} />
+              <Icon elementKey={`breadcrumbs.${index}.icon`} />
+            </Box>
+          ))}
+        </Box>
+        <Box elementKey="main_wrapper">
+          <Box elementKey="left_container">
+            <Image elementKey="profile_image" alt="Profile image" />
+          </Box>
+          <Box elementKey="right_container">
+            <Box elementKey="content_wrapper">
+              <Heading elementKey="title" />
+              <Box elementKey="statswrapper_levoGroup" data-levo_group>
+                <Box elementKey="stats_levoGroup" data-levo_group>
+                  {(content?.stats ?? []).map((_, index: number) => (
+                    <Box
+                      key={`stat-${index}`}
+                      data-levo_group_item
+                      elementKey={`stats.${index}.stat_wrapper`}
+                    >
+                      <Icon elementKey={`stats.${index}.icon`} />
+                      <Typography elementKey={`stats.${index}.label`} />
+                    </Box>
+                  ))}
+                </Box>
+                <Box elementKey="stats_2_levoGroup" data-levo_group>
+                  {(content?.stats_2 ?? []).map((_: any, index: number) => (
+                    <Box
+                      key={`stat-${index}`}
+                      data-levo_group_item
+                      elementKey={`stats_2.${index}.stat_wrapper`}
+                    >
+                      <Icon elementKey={`stats_2.${index}.icon`} />
+                      <Typography elementKey={`stats_2.${index}.label`} />
+                    </Box>
+                  ))}
+                </Box>
+                <Box elementKey="stats_3_levoGroup" data-levo_group>
+                  {(content?.stats_3 ?? []).map((_: any, index: number) => (
+                    <Box
+                      key={`stat-${index}`}
+                      data-levo_group_item
+                      elementKey={`stats_3.${index}.stat_wrapper`}
+                    >
+                      <Icon elementKey={`stats_3.${index}.icon`} />
+                      <Typography elementKey={`stats_3.${index}.label`} />
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+              <Box elementKey="price_container">
+                <Typography elementKey="actual_price" />
+                <Typography elementKey="discount_price" />
+                <Typography elementKey="off_percent" />
+              </Box>
+            </Box>
+            <Box elementKey="search_input_wrapper">
+              <input
+                name="search"
+                value={zipcode}
+                onChange={(e) => setZipcode(e.target.value)}
+                placeholder="Enter your Pin code"
+                style={{
+                  background: "white",
+                  borderRadius: "999px",
+                  padding: "18px 20px 18px 20px",
+
+                  border: "1px solid #E5E5E5",
+                }}
+                type="number"
+                min="6"
+                max="6"
+              />
+              <Button
+                elementKey="search_button"
+                onClick={() => {
+                  if (
+                    !isBuilder &&
+                    zipcode &&
+                    zipcode.length === 6 &&
+                    config?.search_button?.custom_fields?.redirect_url
+                  ) {
+                    if (config?.search_button?.custom_fields?.other_params) {
+                      window.open(
+                        `${config?.search_button?.custom_fields?.redirect_url}?${config?.search_button?.custom_fields?.other_params}&${config?.search_button?.custom_fields?.zipcode_param ?? "zipcode"}=${zipcode}`,
+                      );
+                    } else {
+                      window.open(
+                        `${config?.search_button?.custom_fields?.redirect_url}?${config?.search_button?.custom_fields?.zipcode_param ?? "zipcode"}=${zipcode}`,
+                      );
+                    }
+                  }
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Service3;