contentoh-components-library 21.5.3 → 21.5.4

package/src/components/molecules/StatusAsignationInfo/FinancedCompanies.js

@@ -1,64 +1,502 @@
 export const FinancedCompanies = [
-    162, 300, 301, 302, 303, 304, 305, 306, 307, 308,
-    309, 310, 311, 312, 313, 314, 315, 316, 317, 318,
-    319, 320, 321, 322, 323, 324, 325, 326, 327, 328,
-    329, 330, 331, 332, 333, 334, 335, 336, 337, 338,
-    339, 340, 341, 342, 343, 344, 345, 346, 347, 348,
-    349, 350, 351, 352, 353, 354, 355, 356, 357, 358,
-    359, 360, 361, 362, 363, 364, 365, 366, 367, 368,
-    369, 370, 371, 372, 373, 374, 375, 376, 377, 378,
-    379, 380, 381, 382, 383, 384, 385, 386, 387, 388,
-    389, 390, 391, 392, 393, 394, 395, 396, 397, 398,
-    399, 400, 401, 402, 403, 404, 405, 406, 407, 408,
-    409, 410, 411, 412, 413, 414, 415, 416, 417, 418,
-    419, 420, 421, 422, 423, 424, 425, 426, 427, 428,
-    429, 430, 431, 432, 433, 434, 435, 436, 437, 438,
-    439, 440, 441, 442, 443, 444, 445, 446, 447, 448,
-    449, 450, 451, 452, 453, 454, 455, 456, 457, 458,
-    459, 460, 461, 462, 463, 464, 465, 466, 467, 468,
-    469, 470, 471, 472, 473, 474, 475, 476, 477, 478,
-    479, 480, 481, 482, 483, 484, 485, 486, 487, 488,
-    489, 490, 491, 492, 493, 494, 495, 496, 497, 498,
-    499, 500, 501, 502, 503, 504, 505, 506, 507, 508,
-    509, 510, 511, 512, 513, 514, 515, 516, 517, 518,
-    519, 520, 521, 522, 523, 524, 525, 526, 527, 528,
-    529, 530, 531, 532, 533, 534, 535, 536, 537, 538,
-    539, 540, 541, 542, 543, 544, 545, 546, 547, 548,
-    549, 550, 551, 552, 553, 554, 555, 556, 557, 558,
-    559, 560, 561, 562, 563, 564, 565, 566, 567, 568,
-    569, 570, 571, 572, 573, 574, 575, 576, 577, 578,
-    579, 580, 581, 582, 583, 584, 585, 586, 587, 588,
-    589, 590, 591, 592, 593, 594, 595, 596, 597, 598,
-    599, 600, 601, 602, 603, 604, 605, 606, 607, 608,
-    609, 610, 611, 612, 613, 614, 615, 616, 617, 618,
-    619, 620, 621, 622, 623, 624, 625, 626, 627, 628,
-    629, 630, 631, 632, 633, 634, 635, 636, 637, 638,
-    639, 640, 641, 642, 643, 644, 645, 646, 647, 648,
-    649, 650, 651, 652, 653, 654, 655, 656, 657, 658,
-    659, 660, 661, 662, 663, 664, 665, 666, 667, 668,
-    669, 670, 671, 672, 673, 674, 675, 676, 677, 678,
-    679, 680, 681, 682, 683, 684, 685, 686, 687, 688,
-    689, 690, 691, 692, 693, 694, 695, 696, 697, 698,
-    699, 700, 701, 702, 703, 704, 705, 706, 707, 708,
-    709, 710, 711, 712, 713, 714, 715, 716, 717, 718,
-    719, 720, 721, 722, 723, 724, 725, 726, 727, 728,
-    729, 730, 731, 732, 733, 734, 735, 736, 737, 738,
-    739, 740, 741, 742, 743, 744, 745, 746, 747, 748,
-    749, 750, 751, 752, 753, 754, 755, 756, 757, 758,
-    759, 760, 761, 762, 763, 764, 765, 766, 767, 768,
-    769, 770, 771, 772, 773, 774, 775, 776, 777, 778,
-    779, 780, 781, 782, 783, 784, 785, 786, 787, 788,
-    789, 790, 791, 792, 793, 794, 795, 796, 797, 798,
-    799, 800, 801, 802, 803, 804, 805, 806, 807, 808,
-    809, 810, 811, 812, 813, 814, 815, 816, 819, 820,
-    832, 840, 841, 843, 844, 846, 847, 849, 850, 852,
-    853, 854, 855, 856, 888, 894, 949, 963, 964, 965,
-    969, 995, 997, 1000, 1002, 1003, 1005, 1009, 1014,
-    1016, 1021, 1043, 1046, 1048, 1049, 1051, 1052, 1054,
-    1057, 1061, 1062, 1067, 1097, 1104, 1110, 1124, 1134,
-    1136, 1140, 1143, 1144, 1154, 1156, 1159, 1162, 1164,
-    1165, 1168, 1170, 1172, 1173, 1174, 1175, 1176, 1178,
-    1179, 1180, 1182, 1184, 1185, 1186, 1187, 1188, 1189,
-    1190, 1191, 1192, 1195, 1196, 1199, 1200, 1201, 1202,
-    1203, 1204, 1206, 1207, 1210, 1223, 1253
-];
+    300,
+    300,
+    301,
+    301,
+    302,
+    302,
+    303,
+    303,
+    304,
+    304,
+    305,
+    305,
+    306,
+    306,
+    307,
+    307,
+    308,
+    308,
+    309,
+    309,
+    310,
+    310,
+    311,
+    311,
+    312,
+    312,
+    313,
+    313,
+    314,
+    314,
+    315,
+    315,
+    316,
+    316,
+    317,
+    317,
+    318,
+    318,
+    319,
+    319,
+    320,
+    320,
+    321,
+    321,
+    322,
+    322,
+    323,
+    323,
+    324,
+    324,
+    325,
+    325,
+    326,
+    326,
+    327,
+    327,
+    328,
+    328,
+    329,
+    329,
+    330,
+    330,
+    331,
+    331,
+    332,
+    332,
+    333,
+    333,
+    334,
+    334,
+    335,
+    335,
+    336,
+    336,
+    337,
+    337,
+    338,
+    338,
+    339,
+    339,
+    340,
+    340,
+    341,
+    341,
+    342,
+    342,
+    343,
+    343,
+    344,
+    344,
+    345,
+    345,
+    346,
+    346,
+    347,
+    347,
+    348,
+    348,
+    349,
+    349,
+    350,
+    350,
+    351,
+    351,
+    352,
+    352,
+    353,
+    353,
+    354,
+    354,
+    355,
+    355,
+    356,
+    356,
+    357,
+    357,
+    358,
+    358,
+    359,
+    359,
+    360,
+    360,
+    361,
+    361,
+    362,
+    362,
+    363,
+    363,
+    364,
+    364,
+    365,
+    365,
+    366,
+    366,
+    367,
+    367,
+    368,
+    368,
+    369,
+    369,
+    370,
+    370,
+    371,
+    371,
+    372,
+    372,
+    373,
+    373,
+    374,
+    374,
+    375,
+    375,
+    376,
+    376,
+    377,
+    377,
+    378,
+    378,
+    379,
+    379,
+    380,
+    380,
+    381,
+    381,
+    382,
+    382,
+    383,
+    383,
+    384,
+    384,
+    385,
+    385,
+    386,
+    386,
+    387,
+    387,
+    388,
+    388,
+    389,
+    389,
+    390,
+    390,
+    391,
+    391,
+    392,
+    392,
+    393,
+    393,
+    394,
+    394,
+    395,
+    395,
+    396,
+    396,
+    397,
+    397,
+    398,
+    398,
+    399,
+    399,
+    400,
+    400,
+    401,
+    401,
+    402,
+    402,
+    403,
+    403,
+    404,
+    404,
+    405,
+    405,
+    406,
+    406,
+    407,
+    407,
+    408,
+    408,
+    409,
+    409,
+    410,
+    410,
+    411,
+    411,
+    412,
+    412,
+    413,
+    413,
+    414,
+    414,
+    415,
+    415,
+    416,
+    416,
+    417,
+    417,
+    418,
+    418,
+    419,
+    419,
+    420,
+    420,
+    421,
+    421,
+    422,
+    422,
+    423,
+    423,
+    424,
+    424,
+    425,
+    425,
+    426,
+    426,
+    427,
+    427,
+    428,
+    428,
+    429,
+    429,
+    430,
+    430,
+    431,
+    431,
+    432,
+    432,
+    433,
+    433,
+    434,
+    434,
+    435,
+    435,
+    436,
+    436,
+    437,
+    437,
+    438,
+    438,
+    439,
+    439,
+    440,
+    440,
+    441,
+    441,
+    442,
+    442,
+    443,
+    443,
+    444,
+    444,
+    445,
+    445,
+    446,
+    446,
+    447,
+    447,
+    448,
+    448,
+    449,
+    449,
+    450,
+    450,
+    451,
+    451,
+    452,
+    452,
+    453,
+    453,
+    454,
+    454,
+    455,
+    455,
+    456,
+    456,
+    457,
+    457,
+    458,
+    458,
+    459,
+    459,
+    460,
+    460,
+    461,
+    461,
+    462,
+    462,
+    463,
+    463,
+    464,
+    464,
+    465,
+    465,
+    466,
+    466,
+    467,
+    467,
+    468,
+    468,
+    469,
+    469,
+    470,
+    470,
+    471,
+    471,
+    472,
+    472,
+    473,
+    473,
+    474,
+    474,
+    475,
+    475,
+    476,
+    476,
+    477,
+    477,
+    478,
+    478,
+    479,
+    479,
+    480,
+    480,
+    481,
+    481,
+    482,
+    482,
+    483,
+    483,
+    484,
+    484,
+    485,
+    485,
+    486,
+    486,
+    487,
+    487,
+    488,
+    488,
+    489,
+    489,
+    490,
+    490,
+    491,
+    491,
+    492,
+    492,
+    493,
+    493,
+    494,
+    494,
+    495,
+    495,
+    496,
+    496,
+    497,
+    497,
+    498,
+    498,
+    499,
+    499,
+    500,
+    500,
+    501,
+    501,
+    502,
+    502,
+    503,
+    503,
+    504,
+    504,
+    505,
+    505,
+    506,
+    506,
+    507,
+    507,
+    508,
+    508,
+    509,
+    509,
+    510,
+    510,
+    511,
+    511,
+    512,
+    512,
+    513,
+    513,
+    514,
+    514,
+    515,
+    515,
+    516,
+    516,
+    517,
+    517,
+    518,
+    518,
+    519,
+    519,
+    520,
+    520,
+    521,
+    521,
+    522,
+    522,
+    523,
+    523,
+    524,
+    524,
+    525,
+    525,
+    526,
+    526,
+    527,
+    527,
+    528,
+    528,
+    529,
+    529,
+    530,
+    530,
+    531,
+    531,
+    532,
+    532,
+    533,
+    533,
+    534,
+    534,
+    535,
+    535,
+    536,
+    536,
+    537,
+    537,
+    538,
+    538,
+    539,
+    539,
+    540,
+    540,
+    541,
+    541,
+    542,
+    542,
+    543,
+    543,
+    544,
+    544,
+    545,
+    545,
+    546,
+    546,
+    547,
+    547,
+    548,
+    548,
+    549,
+    549
+]

package/src/components/molecules/StatusAsignationInfo/index.js

@@ -11,7 +11,7 @@ import InfoIcon from "../../../assets/images/sliderToolTip/infoIcon.svg";
 import Slide1 from "../../../assets/images/sliderToolTip/slide21.svg";
 import Slide2 from "../../../assets/images/sliderToolTip/slide22.svg";
 import Slide3 from "../../../assets/images/sliderToolTip/slide23.svg";
-import { FinancedCompanies } from "./FinancedCompanies"; 
+import { FinancedCompanies } from "./FinancedCompanies";
 
 export const StatusAsignationInfo = ({
   status = "-",

package/src/components/molecules/StatusRetailer/StatusAsignationInfo.stories.js

@@ -0,0 +1,17 @@
+import { StatusRetailer } from "./index";
+
+export default {
+  title: "Components/molecules/StatusRetailer",
+  component: StatusRetailer,
+};
+
+const Template = (args) => <StatusRetailer {...args} />;
+
+export const StatusRetailerDefault = Template.bind({});
+StatusRetailerDefault.args = {
+  status: "AA",
+  image: {
+    src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+  },
+  imagesSection: true,
+};

package/src/components/molecules/StatusRetailer/index.js

@@ -0,0 +1,55 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import { ProductSkuStatus } from "../ProductSkuStatus";
+import { RetailerSelectorv2 } from "../RetailerSelectorv2";
+export const StatusRetailer = ({
+  percent = 0,
+  id = "default-id",
+  showRetailer=false,
+  retailers,
+  activeRetailer,
+  setActiveRetailer,
+  headerData,
+  setShowVersionSelector,
+  version
+}) => {
+  const [showAsignationPanel, setShowAsignationPanel] = useState(false);
+
+  const closeAsignations = (e) => {
+    if (!e.target.closest("#default-id") && showAsignationPanel) {
+      document.removeEventListener("click", closeAsignations, false);
+      setShowAsignationPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showAsignationPanel) {
+      document.addEventListener("click", closeAsignations, false);
+    }
+  }, [showAsignationPanel]);
+  return (
+    <Container id={id}>
+      {showRetailer && 
+        <RetailerSelectorv2
+            retailers={retailers}
+            activeRetailer={activeRetailer}
+            setActiveRetailer={setActiveRetailer}
+          />
+      }
+      <ProductSkuStatus
+          productName={headerData?.article?.name || headerData?.name}
+          statusType={
+            headerData?.version_status ||
+            headerData?.status ||
+            headerData?.article_status
+          }
+          setShowVersionSelector={setShowVersionSelector}
+          percentRequired={percent}
+          percent={percent?.toFixed(0)}
+          containerClassName="bar-sku"
+          contClassName="bar-sku-cont"
+              version={version}
+        />
+    </Container>
+  );
+};

package/src/components/molecules/StatusRetailer/styles.js

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-radius: 117px;
+  padding: 4px 5px;
+  display: flex;
+  border: 1px solid #F0F0F0;
+  gap:10px;
+  min-width: 128px;
+  justify-content:center;
+
+  .images-buttons {
+    button + * {
+      margin-left: 8px;
+    }
+  }
+
+  .assignations-container {
+    display: flex;
+    cursor: pointer;
+  }
+
+  .asignation-panel {
+    background: ${GlobalColors.s2};
+    border: 1px solid ${GlobalColors.s3};
+    box-sizing: border-box;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    padding: 10px 8px;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    z-index: 10;
+
+    .asignation-header {
+      display: flex;
+      justify-content: space-between;
+
+      .asignation-status,
+      .asignation-percent {
+        & > p {
+          font-family: ${FontFamily.AvenirNext};
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+          color: ${GlobalColors.s5};
+        }
+      }
+
+      .asignation-percent {
+        text-align: right;
+      }
+
+      & + * {
+        margin-top: 10px;
+      }
+    }
+
+    .asignations-list {
+      min-height: 40px;
+
+      .no-asignations {
+        padding: 5px;
+        font-family: ${FontFamily.AvenirNext};
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        color: ${GlobalColors.s5};
+      }
+
+      & + * {
+        margin-top: 10px;
+        border-top: 1px solid ${GlobalColors.s3};
+      }
+    }
+
+    .default-asignations-list {
+      padding-top: 10px;
+    }
+  }
+`;