@capillarytech/creatives-library 1.0.1-alpha.0 → 1.0.2

package/components/molecules/RadioWithInfo/tests/__snapshots__/RadioWithInfo.test.js.snap

@@ -67,20 +67,124 @@ exports[`<RadioWithInfo /> should render the checked disabled RadioWithInfo 1`]
               className="title has-suffix"
               type="h4"
             >
-              <span
-                className="CapHeading__CapHeadingSpan-vrvcag-1 juwYue title has-suffix"
+              <StyledComponent
+                className="title has-suffix"
+                forwardedComponent={
+                  Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "attrs": Array [],
+                    "componentStyle": ComponentStyle {
+                      "componentId": "CapHeading__CapHeadingSpan-vrvcag-1",
+                      "isStatic": false,
+                      "lastClassName": "hApGSN",
+                      "rules": Array [
+                        "font-size:",
+                        [Function],
+                        ";font-weight:",
+                        [Function],
+                        ";color:",
+                        [Function],
+                        ";",
+                      ],
+                    },
+                    "displayName": "CapHeading__CapHeadingSpan",
+                    "foldedComponentIds": Array [],
+                    "render": [Function],
+                    "styledComponentId": "CapHeading__CapHeadingSpan-vrvcag-1",
+                    "target": "span",
+                    "toString": [Function],
+                    "warnTooManyClasses": [Function],
+                    "withComponent": [Function],
+                  }
+                }
+                forwardedRef={null}
                 type="h4"
               >
-                <CapLabel
-                  className="truncate-text radio-label-disabled"
-                  type="label2"
+                <span
+                  className="CapHeading__CapHeadingSpan-vrvcag-1 hApGSN title has-suffix"
+                  type="h4"
                 >
-                  <div
-                    className="CapLabel-n7zsf5-0 jzfptu truncate-text radio-label-disabled"
+                  <CapLabel
+                    className="truncate-text radio-label-disabled"
                     type="label2"
-                  />
-                </CapLabel>
-              </span>
+                  >
+                    <StyledComponent
+                      className="truncate-text radio-label-disabled"
+                      forwardedComponent={
+                        Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "CapLabelInline": Object {
+                            "$$typeof": Symbol(react.forward_ref),
+                            "attrs": Array [],
+                            "componentStyle": ComponentStyle {
+                              "componentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                              "isStatic": false,
+                              "rules": Array [
+                                "font-size:",
+                                [Function],
+                                ";font-weight:",
+                                [Function],
+                                ";color:",
+                                [Function],
+                                ";line-height:",
+                                [Function],
+                                ";",
+                              ],
+                            },
+                            "displayName": "CapLabel__CapLabelInline",
+                            "foldedComponentIds": Array [],
+                            "render": [Function],
+                            "styledComponentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                            "target": "span",
+                            "toString": [Function],
+                            "warnTooManyClasses": [Function],
+                            "withComponent": [Function],
+                          },
+                          "_foldedDefaultProps": Object {
+                            "type": "label1",
+                          },
+                          "attrs": Array [],
+                          "componentStyle": ComponentStyle {
+                            "componentId": "CapLabel-n7zsf5-0",
+                            "isStatic": false,
+                            "lastClassName": "hcywYU",
+                            "rules": Array [
+                              "font-size:",
+                              [Function],
+                              ";font-weight:",
+                              [Function],
+                              ";color:",
+                              [Function],
+                              ";line-height:",
+                              [Function],
+                              ";",
+                            ],
+                          },
+                          "displayName": "CapLabel",
+                          "foldedComponentIds": Array [],
+                          "propTypes": Object {
+                            "children": [Function],
+                            "type": [Function],
+                          },
+                          "render": [Function],
+                          "styledComponentId": "CapLabel-n7zsf5-0",
+                          "target": "div",
+                          "toString": [Function],
+                          "warnTooManyClasses": [Function],
+                          "withComponent": [Function],
+                        }
+                      }
+                      forwardedRef={null}
+                      type="label2"
+                    >
+                      <div
+                        className="CapLabel-n7zsf5-0 hcywYU truncate-text radio-label-disabled"
+                        type="label2"
+                      />
+                    </StyledComponent>
+                  </CapLabel>
+                </span>
+              </StyledComponent>
             </CapHeading__CapHeadingSpan>
             <CapTooltip
               placement="bottomRight"
@@ -634,47 +738,83 @@ exports[`<RadioWithInfo /> should render the checked disabled RadioWithInfo 1`]
                         onMouseLeave={[Function]}
                         size="s"
                       >
-                        <Icon
-                          className="CapIcon__AntIcon-sc-52535-0 hgyZDq cap-icon-v2 cap-icon-v2-info radio-info-icon"
+                        <StyledComponent
+                          className="cap-icon-v2 cap-icon-v2-info radio-info-icon"
                           component={[Function]}
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "CapIcon__AntIcon-sc-52535-0",
+                                "isStatic": false,
+                                "lastClassName": "dAqpdr",
+                                "rules": Array [
+                                  "font-size:",
+                                  [Function],
+                                  ";",
+                                ],
+                              },
+                              "createFromIconfontCN": [Function],
+                              "displayName": "CapIcon__AntIcon",
+                              "foldedComponentIds": Array [],
+                              "getTwoToneColor": [Function],
+                              "render": [Function],
+                              "setTwoToneColor": [Function],
+                              "styledComponentId": "CapIcon__AntIcon-sc-52535-0",
+                              "target": [Function],
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
+                          }
+                          forwardedRef={null}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
                           size="s"
                         >
-                          <LocaleReceiver
-                            componentName="Icon"
+                          <Icon
+                            className="CapIcon__AntIcon-sc-52535-0 dAqpdr cap-icon-v2 cap-icon-v2-info radio-info-icon"
+                            component={[Function]}
+                            onMouseEnter={[Function]}
+                            onMouseLeave={[Function]}
+                            size="s"
                           >
-                            <i
-                              className="anticon CapIcon__AntIcon-sc-52535-0 hgyZDq cap-icon-v2 cap-icon-v2-info radio-info-icon"
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              size="s"
+                            <LocaleReceiver
+                              componentName="Icon"
                             >
-                              <component
-                                aria-hidden={true}
-                                className=""
-                                fill="currentColor"
-                                focusable="false"
-                                height="1em"
-                                width="1em"
+                              <i
+                                className="anticon CapIcon__AntIcon-sc-52535-0 dAqpdr cap-icon-v2 cap-icon-v2-info radio-info-icon"
+                                onMouseEnter={[Function]}
+                                onMouseLeave={[Function]}
+                                size="s"
                               >
-                                <SvgInfo>
-                                  <svg
-                                    fill="currentColor"
-                                    height="1em"
-                                    viewBox="0 0 24 24"
-                                    width="1em"
-                                  >
-                                    <path
-                                      d="M12 11a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0v-4a1 1 0 0 1 1-1zm0-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4.5a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 12 6.5zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                                      id="info_svg__a"
-                                    />
-                                  </svg>
-                                </SvgInfo>
-                              </component>
-                            </i>
-                          </LocaleReceiver>
-                        </Icon>
+                                <component
+                                  aria-hidden="true"
+                                  className=""
+                                  fill="currentColor"
+                                  focusable="false"
+                                  height="1em"
+                                  width="1em"
+                                >
+                                  <SvgInfo>
+                                    <svg
+                                      fill="currentColor"
+                                      height="1em"
+                                      viewBox="0 0 24 24"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M12 11a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0v-4a1 1 0 0 1 1-1zm0-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4.5a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 12 6.5zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+                                        id="info_svg__a"
+                                      />
+                                    </svg>
+                                  </SvgInfo>
+                                </component>
+                              </i>
+                            </LocaleReceiver>
+                          </Icon>
+                        </StyledComponent>
                       </CapIcon__AntIcon>
                     </CapIcon>
                   </Trigger>
@@ -756,20 +896,124 @@ exports[`<RadioWithInfo /> should render the unchecked enabled RadioWithInfo 1`]
               className="title has-suffix"
               type="h4"
             >
-              <span
-                className="CapHeading__CapHeadingSpan-vrvcag-1 juwYue title has-suffix"
+              <StyledComponent
+                className="title has-suffix"
+                forwardedComponent={
+                  Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "attrs": Array [],
+                    "componentStyle": ComponentStyle {
+                      "componentId": "CapHeading__CapHeadingSpan-vrvcag-1",
+                      "isStatic": false,
+                      "lastClassName": "hApGSN",
+                      "rules": Array [
+                        "font-size:",
+                        [Function],
+                        ";font-weight:",
+                        [Function],
+                        ";color:",
+                        [Function],
+                        ";",
+                      ],
+                    },
+                    "displayName": "CapHeading__CapHeadingSpan",
+                    "foldedComponentIds": Array [],
+                    "render": [Function],
+                    "styledComponentId": "CapHeading__CapHeadingSpan-vrvcag-1",
+                    "target": "span",
+                    "toString": [Function],
+                    "warnTooManyClasses": [Function],
+                    "withComponent": [Function],
+                  }
+                }
+                forwardedRef={null}
                 type="h4"
               >
-                <CapLabel
-                  className="truncate-text radio-label-enabled"
-                  type="label2"
+                <span
+                  className="CapHeading__CapHeadingSpan-vrvcag-1 hApGSN title has-suffix"
+                  type="h4"
                 >
-                  <div
-                    className="CapLabel-n7zsf5-0 jzfptu truncate-text radio-label-enabled"
+                  <CapLabel
+                    className="truncate-text radio-label-enabled"
                     type="label2"
-                  />
-                </CapLabel>
-              </span>
+                  >
+                    <StyledComponent
+                      className="truncate-text radio-label-enabled"
+                      forwardedComponent={
+                        Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "CapLabelInline": Object {
+                            "$$typeof": Symbol(react.forward_ref),
+                            "attrs": Array [],
+                            "componentStyle": ComponentStyle {
+                              "componentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                              "isStatic": false,
+                              "rules": Array [
+                                "font-size:",
+                                [Function],
+                                ";font-weight:",
+                                [Function],
+                                ";color:",
+                                [Function],
+                                ";line-height:",
+                                [Function],
+                                ";",
+                              ],
+                            },
+                            "displayName": "CapLabel__CapLabelInline",
+                            "foldedComponentIds": Array [],
+                            "render": [Function],
+                            "styledComponentId": "CapLabel__CapLabelInline-n7zsf5-1",
+                            "target": "span",
+                            "toString": [Function],
+                            "warnTooManyClasses": [Function],
+                            "withComponent": [Function],
+                          },
+                          "_foldedDefaultProps": Object {
+                            "type": "label1",
+                          },
+                          "attrs": Array [],
+                          "componentStyle": ComponentStyle {
+                            "componentId": "CapLabel-n7zsf5-0",
+                            "isStatic": false,
+                            "lastClassName": "hcywYU",
+                            "rules": Array [
+                              "font-size:",
+                              [Function],
+                              ";font-weight:",
+                              [Function],
+                              ";color:",
+                              [Function],
+                              ";line-height:",
+                              [Function],
+                              ";",
+                            ],
+                          },
+                          "displayName": "CapLabel",
+                          "foldedComponentIds": Array [],
+                          "propTypes": Object {
+                            "children": [Function],
+                            "type": [Function],
+                          },
+                          "render": [Function],
+                          "styledComponentId": "CapLabel-n7zsf5-0",
+                          "target": "div",
+                          "toString": [Function],
+                          "warnTooManyClasses": [Function],
+                          "withComponent": [Function],
+                        }
+                      }
+                      forwardedRef={null}
+                      type="label2"
+                    >
+                      <div
+                        className="CapLabel-n7zsf5-0 hcywYU truncate-text radio-label-enabled"
+                        type="label2"
+                      />
+                    </StyledComponent>
+                  </CapLabel>
+                </span>
+              </StyledComponent>
             </CapHeading__CapHeadingSpan>
             <CapTooltip
               placement="bottomRight"
@@ -1323,47 +1567,83 @@ exports[`<RadioWithInfo /> should render the unchecked enabled RadioWithInfo 1`]
                         onMouseLeave={[Function]}
                         size="s"
                       >
-                        <Icon
-                          className="CapIcon__AntIcon-sc-52535-0 hgyZDq cap-icon-v2 cap-icon-v2-info radio-info-icon"
+                        <StyledComponent
+                          className="cap-icon-v2 cap-icon-v2-info radio-info-icon"
                           component={[Function]}
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "CapIcon__AntIcon-sc-52535-0",
+                                "isStatic": false,
+                                "lastClassName": "dAqpdr",
+                                "rules": Array [
+                                  "font-size:",
+                                  [Function],
+                                  ";",
+                                ],
+                              },
+                              "createFromIconfontCN": [Function],
+                              "displayName": "CapIcon__AntIcon",
+                              "foldedComponentIds": Array [],
+                              "getTwoToneColor": [Function],
+                              "render": [Function],
+                              "setTwoToneColor": [Function],
+                              "styledComponentId": "CapIcon__AntIcon-sc-52535-0",
+                              "target": [Function],
+                              "toString": [Function],
+                              "warnTooManyClasses": [Function],
+                              "withComponent": [Function],
+                            }
+                          }
+                          forwardedRef={null}
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
                           size="s"
                         >
-                          <LocaleReceiver
-                            componentName="Icon"
+                          <Icon
+                            className="CapIcon__AntIcon-sc-52535-0 dAqpdr cap-icon-v2 cap-icon-v2-info radio-info-icon"
+                            component={[Function]}
+                            onMouseEnter={[Function]}
+                            onMouseLeave={[Function]}
+                            size="s"
                           >
-                            <i
-                              className="anticon CapIcon__AntIcon-sc-52535-0 hgyZDq cap-icon-v2 cap-icon-v2-info radio-info-icon"
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              size="s"
+                            <LocaleReceiver
+                              componentName="Icon"
                             >
-                              <component
-                                aria-hidden={true}
-                                className=""
-                                fill="currentColor"
-                                focusable="false"
-                                height="1em"
-                                width="1em"
+                              <i
+                                className="anticon CapIcon__AntIcon-sc-52535-0 dAqpdr cap-icon-v2 cap-icon-v2-info radio-info-icon"
+                                onMouseEnter={[Function]}
+                                onMouseLeave={[Function]}
+                                size="s"
                               >
-                                <SvgInfo>
-                                  <svg
-                                    fill="currentColor"
-                                    height="1em"
-                                    viewBox="0 0 24 24"
-                                    width="1em"
-                                  >
-                                    <path
-                                      d="M12 11a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0v-4a1 1 0 0 1 1-1zm0-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4.5a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 12 6.5zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                                      id="info_svg__a"
-                                    />
-                                  </svg>
-                                </SvgInfo>
-                              </component>
-                            </i>
-                          </LocaleReceiver>
-                        </Icon>
+                                <component
+                                  aria-hidden="true"
+                                  className=""
+                                  fill="currentColor"
+                                  focusable="false"
+                                  height="1em"
+                                  width="1em"
+                                >
+                                  <SvgInfo>
+                                    <svg
+                                      fill="currentColor"
+                                      height="1em"
+                                      viewBox="0 0 24 24"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M12 11a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0v-4a1 1 0 0 1 1-1zm0-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4.5a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 12 6.5zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+                                        id="info_svg__a"
+                                      />
+                                    </svg>
+                                  </SvgInfo>
+                                </component>
+                              </i>
+                            </LocaleReceiver>
+                          </Icon>
+                        </StyledComponent>
                       </CapIcon__AntIcon>
                     </CapIcon>
                   </Trigger>

package/components/molecules/RenewalTier/RenewalTier.js

@@ -15,7 +15,6 @@ import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapLink from '@capillarytech/cap-ui-library/CapLink';
 
 import messages from './messages';
-import globalMessages from '../../pages/Cap/messages';
 import { Flex } from '../../pages/Cap/style';
 import CheckboxWithInputPrefix from '../../molecules/CheckboxWithInputPrefix';
 import TrackerValueContent from '../../molecules/TrackerValueContent';
@@ -152,19 +151,18 @@ const RenewalTier = ({
       <Flex>
         <CheckboxWithInputPrefix
           key="purchase-key"
-          checkboxMessage={`${formatMessage(globalMessages.purchases)} >`}
+          checkboxMessage={`${formatMessage(messages.purchases)} >`}
           prefixTextSize="h5"
           onCheckboxChange={onPurchaseCheckBoxChange}
           isChecked={purchaseChecked}
           inputValue={purchaseValue}
           inputChange={onPurchaseInputChange}
-          type={POSITIVE_INTEGER}
         />
         <CheckboxWithInputPrefix
           key="numVisits-key"
           className="medium-spacing"
           type={POSITIVE_INTEGER}
-          checkboxMessage={`${formatMessage(globalMessages.noOfVisits)} >`}
+          checkboxMessage={`${formatMessage(messages.downgradeNoVisit)} >`}
           prefixTextSize="h5"
           onCheckboxChange={onNumVisitsCheckBoxChange}
           isChecked={numVisitsChecked}
@@ -174,7 +172,7 @@ const RenewalTier = ({
         <CheckboxWithInputPrefix
           key="points-key"
           className="medium-spacing"
-          checkboxMessage={`${formatMessage(globalMessages.ptsEarned)} >`}
+          checkboxMessage={`${formatMessage(messages.ptsEarned)} >`}
           prefixTextSize="h5"
           onCheckboxChange={onPointsCheckBoxChange}
           isChecked={pointsChecked}
@@ -195,7 +193,7 @@ const RenewalTier = ({
                     'element-disabled': !trackerChecked,
                   })}
                 >
-                  {formatMessage(globalMessages.trackerValueBased)}
+                  {formatMessage(messages.trackerValue)}
                 </span>
               </CapCheckbox>
             )}
@@ -239,7 +237,7 @@ const RenewalTier = ({
           {(isEmpty(primary) || isEmpty(secondary)) && (
             <CapLink
               className="add-secondary-criteria-label"
-              title={`+ ${formatMessage(globalMessages.addTracker)}`}
+              title={`+ ${formatMessage(messages.addTracker)}`}
               onClick={onClickAddTracker}
             />
           )}

package/components/molecules/RenewalTier/messages.js

@@ -9,6 +9,22 @@ import { defineMessages } from 'react-intl';
 export const scope = 'loyaltyPlus.components.molecules.RenewalTier';
 
 export default defineMessages({
+  purchases: {
+    id: `${scope}.purchases`,
+    defaultMessage: 'Purchases',
+  },
+  downgradeNoVisit: {
+    id: `${scope}.downgradeNoVisit`,
+    defaultMessage: 'No of visits',
+  },
+  ptsEarned: {
+    id: `${scope}.ptsEarned`,
+    defaultMessage: 'Points earned',
+  },
+  trackerValue: {
+    id: `${scope}.trackerValue`,
+    defaultMessage: 'Tracker value',
+  },
   extraUpgrade: {
     id: `${scope}.extraUpgrade`,
     defaultMessage: '2 Yrs. Upgrade trkr',
@@ -17,4 +33,8 @@ export default defineMessages({
     id: `${scope}.trkrDesc`,
     defaultMessage: '30',
   },
+  addTracker: {
+    id: `${scope}.addTracker`,
+    defaultMessage: 'Add tracker',
+  },
 });

package/components/molecules/ReviewTierModal/ReviewTierModal.js

@@ -67,7 +67,7 @@ const ReviewTierModal = ({
           <CapRow className="review-tier-note-container">
             <CapColumn span={3}>
               <CapHeading type="label2" className="review-tier-note-title">
-                {`${formatMessage(globalMessages.note)} :`}
+                {`${formatMessage(messages.note)} :`}
               </CapHeading>
             </CapColumn>
             <CapColumn span={19}>

package/components/molecules/ReviewTierModal/messages.js

@@ -13,4 +13,8 @@ export default defineMessages({
     id: `${scope}.reviewTier`,
     defaultMessage: 'Review tier',
   },
+  note: {
+    id: `${scope}.note`,
+    defaultMessage: 'Note',
+  },
 });