@openlettermarketing/olc-react-sdk 2.1.4 → 2.1.5-beta.2

package/src/components/SidePanel/Templates/TemplatesCard/index.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+
+// Utils
+import { MESSAGES } from '../../../../utils/message';
+
+// // icons
+import Dot from '../../../../assets/images/templates/dot';
+import ArrowDown from '../../../../assets/images/templates/arrow-down';
+import Button from '../../../GenericUIBlocks/Button';
+import Typography from '../../../GenericUIBlocks/Typography';
+
+// styles
+import './styles.scss';
+
+const TemplatesCard = (props: any) => {
+  const {
+    templates,
+    loading,
+    handleLoadTemplateModel,
+    platformName,
+    currentTemplateType,
+    product,
+    searchApplied,
+    primaryColorRGBA,
+    designerQueryAmount,
+  } = props;
+
+  const [isFilpedIds, setIsFlipedIds] = useState<string[]>([]);
+
+  const singleSideProducts = [2, 4, 5, 16];
+
+  // handler for Flip
+  const handleFlip = (templateId: string) => {
+    const existingTemplateIds = isFilpedIds || [];
+    let updatedIds: string[];
+    if (existingTemplateIds.includes(templateId)) {
+      updatedIds = existingTemplateIds.filter((item) => item !== templateId);
+    } else {
+      updatedIds = [...existingTemplateIds, templateId];
+    }
+    setIsFlipedIds(updatedIds);
+  };
+
+  // handler for setting color
+  const colorSetter = (templateId: any, side: string) => {
+    const result =
+      !isFilpedIds.includes(templateId) && side === 'Front'
+        ? { fill: '#FFFFFF' }
+        : isFilpedIds.includes(templateId) && side === 'Back'
+          ? { fill: '#FFFFFF' }
+          : { fill: '#878585' };
+    return result;
+  };
+
+  // handler for setting rotation
+  const transformSetter = (templateId: any) => {
+    const result = isFilpedIds.includes(templateId)
+      ? {
+        transform: 'rotateY(0deg)',
+        boxShadow: `inset 0 0 0 2px ${primaryColorRGBA}`,
+      }
+      : {
+        transform: 'rotateY(360deg)',
+        boxShadow: `inset 0 0 0 2px ${primaryColorRGBA}`,
+      };
+    return result;
+  };
+
+  return (
+    <>
+      {loading ? (
+        <div className="noTemplateGallery">
+          <Typography>{MESSAGES.TEMPLATE.LOADING_TEMPLATE}</Typography>
+        </div>
+      ) : templates.length ? (
+        templates.map((template: any, index: string) => {
+          return (
+            <div className="templateCard" key={index}>
+              <div className="templateImage">
+                <img
+                  src={
+                    isFilpedIds.includes(template?.id)
+                      ? template.backThumbnailUrl
+                      : template.thumbnailUrl
+                  }
+                  alt="template"
+                  style={transformSetter(template?.id)}
+                  loading="lazy"
+                />
+                <Button
+                  className="tempButton"
+                  onClick={() => handleLoadTemplateModel(template)}
+                >
+                  Edit Template
+                </Button>
+                {!singleSideProducts.includes(Number(product?.id)) && (
+                  <div className="flipWrapper">
+                    <Dot
+                      onClick={() => handleFlip(template?.id)}
+                      style={colorSetter(template?.id, 'Front')}
+                    />
+                    <Dot
+                      onClick={() => handleFlip(template?.id)}
+                      style={colorSetter(template?.id, 'Back')}
+                    />
+                    <ArrowDown
+                      onClick={() => handleLoadTemplateModel(template)}
+                    />
+                  </div>
+                )}
+              </div>
+              <Typography className="templateName">
+                {template?.title}
+              </Typography>
+              <Typography className="templateID">
+                Template ID: {template?.id}
+              </Typography>
+            </div>
+          );
+        })
+      ) : currentTemplateType?.id === '1' ? (
+        <div
+          className={`${+product?.id === 5 && designerQueryAmount
+              ? 'noTemplateGallery more-visible'
+              : product?.productType === 'Professional Letters'
+                ? 'noTemplateGallery noTemplateProfessionalAndPersonal'
+                : 'noTemplateGallery'
+            }`}
+        >
+          <Typography>{MESSAGES.TEMPLATE.NO_MY_TEMPLATES}</Typography>
+        </div>
+      ) : currentTemplateType?.id === '2' ? (
+        <div
+          className={`${+product?.id === 5 && designerQueryAmount ? 'noTemplateGallery more-visible' : 'noTemplateGallery'}`}
+        >
+          <Typography>{MESSAGES.TEMPLATE.NO_TEAM_TEMPLATES}</Typography>
+        </div>
+      ) : currentTemplateType?.id === '3' ? (
+        <div
+          className={`${+product?.id === 5 && designerQueryAmount
+              ? 'noTemplateGallery more-visible'
+              : product?.productType === 'Professional Letters'
+                ? 'noTemplateGallery noTemplateProfessionalAndPersonal'
+                : 'noTemplateGallery'
+            }`}
+        >
+          <Typography>
+            {platformName
+              ? `No ${platformName} Templates to show`
+              : MESSAGES.TEMPLATE.NO_OLC_TEMPLATES}
+          </Typography>
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default TemplatesCard;

package/src/components/SidePanel/Templates/TemplatesCard/styles.scss

@@ -0,0 +1,98 @@
+.templateCard {
+  width: 316px;
+  border-radius: 3px;
+  flex: 0 316px;
+
+  .templateImage {
+    position: relative;
+    margin-bottom: 5px;
+
+    img {
+      height: 100%;
+      width: 100%;
+      border-radius: 7px;
+      padding: 1.5px;
+    }
+
+    &:hover {
+      .tempButton {
+        display: flex !important;
+      }
+
+      .flipWrapper {
+        display: flex;
+      }
+    }
+
+    .tempButton {
+      display: none !important;
+      transition: 0.3s ease-in all !important;
+      position: absolute !important;
+      top: 10px !important;
+      right: 10px !important;
+      max-height: 35px !important;
+      background-color: var(--primary-color);
+      color: #fff;
+      text-transform: capitalize;
+      border-radius: 6px;
+      transition: 0.3s ease-in all !important;
+    }
+
+    .flipWrapper {
+      display: none;
+      position: absolute;
+      bottom: 30px;
+      left: 40%;
+      width: 60px;
+      height: 20px;
+      background-color: #00000049;
+      border-radius: 99999px;
+      justify-content: center;
+      align-items: center;
+      gap: 2px;
+      svg {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .templateName {
+    font-size: 18px;
+    margin: 0;
+  }
+
+  .templateID {
+    font-size: 16px !important;
+    color: #6a6565 !important;
+    font-weight: 300 !important;
+    margin-top: 7px;
+  }
+}
+
+.noTemplateGallery {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: calc(100vh - 600px);
+
+  p {
+    color: var(--text-color);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+}
+
+.noTemplateProfessionalAndPersonal {
+  height: calc(100vh - 1000px) !important;
+}
+
+
+.more-visible {
+  height: calc(100vh - 850px) !important;
+  margin-top: -20px !important;
+}