sprint-asia-custom-component 0.1.86 → 0.1.88

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.86",
+  "version": "0.1.88",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/customphone/index.js

@@ -14,22 +14,18 @@ import {
   IoReturnUpForwardSharp,
   IoAdd,
 } from "react-icons/io5";
-import { PiMicrophone } from "react-icons/pi";
+import { PiMicrophone, PiCopy } from "react-icons/pi";
 import { MdOutlineLabelImportant } from "react-icons/md";
 import { PiCamera } from "react-icons/pi";
 import { BsSticky } from "react-icons/bs";
 import { BsTelephonePlus } from "react-icons/bs";
 import BackgroundWA from "../../assets/images/background_whatsapp.png";
 import PrimaryButton from "../button/primarybutton";
+import VoucherPhoto from "../../assets/images/voucher_photo.jpg";
+import SandezaBills from "../../assets/images/logo_switching_biller_hidden.png";
+import KonnekLogo from "../../assets/images/konnek_logo.png";
 
-const CustomPhone = ({
-  mode = "Empty",
-  data,
-  voucherTitle = "Happy Birthday, Congratulation!",
-  voucherMessage = "You've won a Voucher Belanja MAP Rp100.000 as a special birthday gift from us. Enjoy your day with extra joy!",
-  voucherBackgroundType = "color",
-  voucherBackground,
-}) => {
+const CustomPhone = ({ mode = "Empty", data }) => {
   return (
     <div
       style={{ width: "250px", height: "500px", border: "10px solid #000", position: "relative", borderRadius: "25px" }}
@@ -61,7 +57,7 @@ const CustomPhone = ({
           <div className="h-full w-full bg-white flex justify-center items-center text-center">
             <div>
               <div className="flex justify-center">
-                <img src={LogoEmptyVoucher} className="w-16 h-16 mb-2" />
+                <img alt="voucher-img" src={LogoEmptyVoucher} className="w-16 h-16 mb-2" />
               </div>
               <div className="w-32">
                 <p className="font-semibold text-xs">Please click voucher!</p>
@@ -77,7 +73,7 @@ const CustomPhone = ({
             <div className="w-full bg-neutral20 pt-6 px-2 pb-1 flex justify-between items-center">
               <div className="flex items-center">
                 <IoIosArrowBack className="w-4 h-4 text-info500 mr-1" />
-                <img src={LogoPrezentHidden} className="rounded-full w-5 h-5 bg-white mx-2 p-0.5" />
+                <img alt="prezent-logo" src={LogoPrezentHidden} className="rounded-full w-5 h-5 bg-white mx-2 p-0.5" />
                 <div>
                   <p className="text-xs text-bold">Prezent</p>
                   <p className="text-neutral80" style={{ fontSize: "8px" }}>
@@ -88,7 +84,11 @@ const CustomPhone = ({
               <BsTelephonePlus className="w-4 h-4 text-info500" />
             </div>
             <div className="relative w-full h-screen">
-              <img src={BackgroundWA} className="absolute top-0 left-0 w-full h-full object-cover" />
+              <img
+                alt="background-img"
+                src={BackgroundWA}
+                className="absolute top-0 left-0 w-full h-full object-cover"
+              />
               <div className="relative z-10 px-3 py-2">
                 <div className="flex justify-center">
                   <div className="bg-info50 px-6 rounded w-fit">
@@ -134,59 +134,74 @@ const CustomPhone = ({
         {mode === "Voucher" && (
           <div className="h-screen">
             <div className="overflow-y-auto no-scrollbar" style={{ height: "450px" }}>
-              {voucherBackgroundType === "color" && (
-                <div className="w-full h-54 pt-6 pb-4" style={{ background: voucherBackground || "black" }}>
-                  <div className="bg-white rounded-md p-3 mx-3 mt-12">
-                    <p className="font-semibold text-sm">Voucher Belanja MAP</p>
-                    <p className="font-semibold text-sm">Rp 100.000</p>
-                    <p className="font-normal text-neutral100 mt-1 text-xs" style={{ fontSize: "10px" }}>
-                      Order ID: 12345
-                    </p>
-                    <div className="flex justify-between items-center">
-                      <p className="text-xs" style={{ fontSize: "10px" }}>
-                        21 Jan 2022 - 22 Mar 2023
-                      </p>
-                      <div className="w-12 h-12 rounded-full bg-primary500"></div>
-                    </div>
-                  </div>
+              {data?.voucherBackgroundType === "color" && (
+                <div className="w-full h-54 pt-6 pb-4" style={{ background: data?.voucherBackground || "black" }}>
+                  <img alt="voucher-img" src={data?.voucherPhoto || VoucherPhoto} className="rounded-md mt-12" />
                 </div>
               )}
 
-              {voucherBackgroundType === "image" && (
+              {data?.voucherBackgroundType === "image" && (
                 <div
-                  className="w-full h-54 pt-6 pb-4"
-                  style={{ backgroundImage: `url(${voucherBackground})`, backgroundSize: "cover" }}
+                  className="w-full h-54 pt-6 pb-4 px-4"
+                  style={{ backgroundImage: `url(${data?.voucherBackground})`, backgroundSize: "cover" }}
                 >
-                  <div className="bg-white rounded-md p-3 mx-3 mt-12">
-                    <p className="font-semibold text-sm">Voucher Belanja MAP</p>
-                    <p className="font-semibold text-sm">Rp 100.000</p>
-                    <p className="font-normal text-neutral100 mt-1 text-xs" style={{ fontSize: "10px" }}>
-                      Order ID: 12345
+                  <img alt="voucher-img" src={data?.voucherPhoto || VoucherPhoto} className="rounded-md mt-12" />
+                </div>
+              )}
+              <div className="bg-white p-3 flex flex-row gap-1 items-center">
+                <img
+                  alt="client-logo"
+                  src={data?.clientLogo || SandezaBills}
+                  className="rounded-md h-9 w-9 object-cover"
+                />
+                <div>
+                  <p className="text-xs font-semibold">{data?.productName}</p>
+                  <div className="flex items-center gap-1">
+                    <p className="text-neutral300" style={{ fontSize: "10px" }}>
+                      Order ID : {data?.orderNumber}
                     </p>
-                    <div className="flex justify-between items-center">
-                      <p className="text-xs" style={{ fontSize: "10px" }}>
-                        21 Jan 2022 - 22 Mar 2023
-                      </p>
-                      <div className="w-12 h-12 rounded-full bg-primary500"></div>
-                    </div>
+
+                    <PiCopy size={14} className="text-neutral300 cursor-pointer" />
                   </div>
+                  <p className="text-neutral300" style={{ fontSize: "10px" }}>
+                    Valid until {data?.validDate}
+                  </p>
                 </div>
-              )}
-              <div className="bg-white p-3">
-                <p className="text-md font-semibold">{voucherTitle}</p>
-                <p className="text-neutral300" style={{ fontSize: "10px" }}>
-                  {voucherMessage}
-                </p>
               </div>
-              <div className="bg-neutral20 p-3 pb-16">
-                <p className="text-xs font-semibold">Description</p>
-                <p className="text-neutral300 mt-2" style={{ fontSize: "10px" }}>
-                  MAP Gift Voucher is the official gift voucher of PT Mitra Adiperkasa Tbk. Accepted in2 retail stores
-                  managed under MAP Group Indonesia, with a wide range of product brands. It is a perfect gift for
-                  Birthdays, Annivesaries, Valentines, Holidays, Festivals
-                </p>
+
+              <div className="bg-neutral20 p-3 pb-8 flex flex-col gap-4">
+                <div>
+                  <p className="text-sm font-semibold">{data?.voucherTitle}</p>
+                  <p className="text-neutral300 mt-1" style={{ fontSize: "10px" }}>
+                    {data?.voucherMessage}
+                  </p>
+                </div>
+
+                <div>
+                  <p className="text-xs font-semibold">Description</p>
+                  <p className="text-neutral300 mt-1" style={{ fontSize: "10px" }}>
+                    {data?.voucherDescription}
+                  </p>
+                </div>
+
+                <div>
+                  <p className="text-xs font-semibold">How to redeem</p>
+                  <p className="text-neutral300 mt-1" style={{ fontSize: "10px" }}>
+                    {data?.howToRedeem}
+                  </p>
+                </div>
+
+                <div>
+                  <p className="text-xs font-semibold">Terms & conditions</p>
+                  <p className="text-neutral300 mt-1" style={{ fontSize: "10px" }}>
+                    {data?.terms}
+                  </p>
+                </div>
+              </div>
+
+              <div className="w-12 h-12 rounded-full bg-primary50 absolute bottom-0 right-0 mb-12 mr-2 flex justify-center items-center">
+                <img alt="konnek-logo" src={KonnekLogo} className="w-6 h-6" />
               </div>
-              <div className="w-12 h-12 rounded-full bg-primary500 absolute bottom-0 right-0 mb-12 mr-2"></div>
               <div className="w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl">
                 <PrimaryButton title="Redeem Voucher" type="full" size="small" />
               </div>
@@ -217,7 +232,7 @@ const CustomPhone = ({
               </div>
               <div className="w-full bg-white pt-2 px-2 flex justify-between items-center">
                 <div className="flex items-center ml-1">
-                  <img src={LogoPrezentHidden} className="rounded-full w-5 h-5 bg-white" />
+                  <img alt="prezent-logo" src={LogoPrezentHidden} className="rounded-full w-5 h-5 bg-white" />
                   <div className="ml-1">
                     <p className="font-semibold" style={{ fontSize: "10px" }}>
                       Prezent@sprint.id
@@ -271,7 +286,7 @@ const CustomPhone = ({
                 <IoIosArrowBack className="w-5 h-5 text-primary300 mt-2" />
                 <div>
                   <div className="flex justify-center mt-2">
-                    <img src={LogoPrezentHidden} className="rounded-full w-8 h-8 bg-white" />
+                    <img alt="prezent-logo" src={LogoPrezentHidden} className="rounded-full w-8 h-8 bg-white" />
                   </div>
                   <p className="mb-1" style={{ fontSize: "10px" }}>
                     Prezent

package/src/components/description/index.js

@@ -1,27 +1,21 @@
 import React from "react";
 
-const Description = ({
-  title = "Title",
-  value = "Description",
-  textColor = "default",
-  subtitle,
-  linkSubtitle,
-  onClickSubtitle,
-  image,
-}) => {
+const Description = ({ title, value, textColor = "default", subtitle, linkSubtitle, onClickSubtitle, image }) => {
   return (
     <div className="w-full">
       {title && <p className="text-sm font-normal text-black mb-1">{title}</p>}
-      <div className="py-1">
-        <p
-          className={`
-              ${textColor == "default" && "text-black font-semibold text-base"} 
-              ${textColor == "success" && "text-success500 font-semibold text-base"} 
+      {value && (
+        <div className="py-1">
+          <p
+            className={`
+            ${textColor == "default" && "text-black font-semibold text-base"} 
+            ${textColor == "success" && "text-success500 font-semibold text-base"} 
             `}
-        >
-          {value}
-        </p>
-      </div>
+          >
+            {value}
+          </p>
+        </div>
+      )}
       {subtitle && (
         <div className="flex items-center mt-1">
           <p className="text-sm font-normal text-black mr-1">{subtitle}</p>
@@ -35,13 +29,9 @@ const Description = ({
 
       {image &&
         (typeof image === "string" ? (
-          <img src={image} alt="voucher-img" className="w-52 h-52 object-contain rounded-lg mt-1" />
+          <img src={image} alt="voucher-img" className="w-52 h-52 object-cover rounded-lg mt-1" />
         ) : (
-          <img
-            src={URL.createObjectURL(image)}
-            alt="voucher-img"
-            className="w-52 h-52 object-contain rounded-lg mt-1"
-          />
+          <img src={URL.createObjectURL(image)} alt="voucher-img" className="w-52 h-52 object-cover rounded-lg mt-1" />
         ))}
     </div>
   );

package/src/templates/index.js

@@ -844,13 +844,22 @@ const Templates = () => {
         <CustomPhone mode="SMS" data="Ini message" />
         <CustomPhone mode="Email" data="Ini message" />
         <CustomPhone
+          data={{
+            productName: "Voucher MAP 100.000",
+            orderNumber: "1234567890",
+            validDate: "29 December 2024",
+            voucherDescription:
+              "MAP Gift Voucher is the official gift voucher of PT Mitra Adiperkasa Tbk. Accepted in2 retail stores managed under MAP Group Indonesia, with a wide range of product brands. It is a perfect gift for Birthdays, Annivesaries, Valentines, Holidays, Festivals",
+            voucherBackgroundType: "image",
+            voucherBackground:
+              "https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg",
+
+            voucherTitle: "One Piece Special Edition!",
+            voucherMessage: "This is One Piece special edition card",
+            howToRedeem: "This is how to redeem",
+            terms: "This is terms and conditions",
+          }}
           mode="Voucher"
-          voucherBackgroundType="image"
-          voucherBackground={
-            "https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
-          }
-          voucherTitle="One Piece Special Edition!"
-          voucherMessage="This is One Piece special edition card"
         />
       </div>
 
@@ -1059,7 +1068,11 @@ const Templates = () => {
 
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Description</p>
-      <Description title="Sample Title" value="This is a sample description." />
+      <Description
+        title="Sample Title"
+        // value="This is a sample description."
+        image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
+      />
 
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Dropdown</p>