@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

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

@@ -1,160 +0,0 @@
-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

@@ -1,98 +0,0 @@
-.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;
-}