1113439055

Committed 19 Dec 2023 09:01PM UTC coverage: 82.752% (-17.2%) from 99.964%

Build # 1113439055

Build Type

Pull #4258

gitlab-ci

Committed by

mender-test-bot

Commit Message

chore: Types update

Signed-off-by: Mender Test Bot <mender@northern.tech>

Pull Request Pull Request #4258: chore: Types update

Run Details

4326 of 6319 branches covered (0.0%)

8348 of 10088 relevant lines covered (82.75%)

189.39 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

88.89

/src/js/components/settings/planselection.js

// Copyright 2021 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React from 'react';

import { makeStyles } from 'tss-react/mui';

import { PLANS } from '../../constants/appConstants';
import { isDarkMode } from '../../helpers.js';
import InfoText from '../common/infotext';

export const useStyles = makeStyles()(theme => ({
  planNote: { marginBottom: -11, fontSize: 'smaller' },
  planPanel: {
    borderColor: theme.palette.background.lightgrey,
    ['&.active,&:hover']: {
      borderColor: theme.palette.grey[50],
      boxShadow: '0 1px 6px rgba(0, 0, 0, 0.15)'
    },
    ['&.active']: {
      backgroundColor: isDarkMode(theme.palette.mode) ? theme.palette.grey[50] : theme.palette.grey[400]
    },
    '&.addon': {
      alignItems: 'center',
      columnGap: 10,
      display: 'grid',
      gridTemplateColumns: 'max-content minmax(150px, min-content) 1fr max-content',
      height: 'initial',
      marginTop: 10,
      minWidth: 550,
      width: 'initial'
    },
    '&.addon.upgrade': {
      gridTemplateColumns: 'max-content minmax(120px, min-content) minmax(120px, min-content) 1fr max-content'
    }
  },
  price: { fontSize: '1rem' }
}));

export const PlanSelection = ({ currentPlan = PLANS.os.id, isTrial, offerValid, offerTag, setUpdatedPlan, updatedPlan }) => {
  const { classes } = useStyles();
  const canUpgrade = plan => Object.keys(PLANS).indexOf(plan) >= Object.keys(PLANS).indexOf(currentPlan);
  const onPlanSelect = plan => (isTrial || canUpgrade(plan) ? setUpdatedPlan(plan) : undefined);
  return (
    <>
      <h3 className="margin-top">{isTrial ? '1. Choose a plan' : 'Plans'}</h3>
      <div className="flexbox space-between" style={{ paddingBottom: 15 }}>
        {Object.values(PLANS).map(item => (
          <div
            key={item.id}
            className={`planPanel ${classes.planPanel} ${updatedPlan === item.id ? 'active' : ''} ${isTrial || canUpgrade(item.id) ? '' : 'muted'}`}
            onClick={() => onPlanSelect(item.id)}
          >
            {!isTrial && canUpgrade(item.id) && (
              <div className={`uppercased align-center muted ${classes.planNote}`}>{item.id === currentPlan ? 'current plan' : 'upgrade'}</div>
            )}
            <h4>
              {item.name} {item.offer && isTrial && offerValid ? offerTag : null}
            </h4>
            <div>
              {item.offer && isTrial && offerValid ? (
                <>
                  <div className={`link-color bold ${classes.price}`}>{item.offerprice}</div>
                  <div className="pre-line">{item.price2}</div>
                </>
              ) : (
                <>
                  <div className={`link-color bold ${classes.price}`}>{item.price}</div>
                  <div>{item.deviceCount}</div>
                </>
              )}
            </div>
            <ul className="unstyled">
              {item.features.map((feature, index) => (
                <li key={`${item.id}-feature-${index}`}>
                  <InfoText variant="dense">{feature}</InfoText>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </>
  );
};

export default PlanSelection;

1	// Copyright 2021 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import React from 'react';
15
16	import { makeStyles } from 'tss-react/mui';
17
18	import { PLANS } from '../../constants/appConstants';
19	import { isDarkMode } from '../../helpers.js';
20	import InfoText from '../common/infotext';
21
22	export const useStyles = makeStyles()(theme => ({	6✔
23	planNote: { marginBottom: -11, fontSize: 'smaller' },
24	planPanel: {
25	borderColor: theme.palette.background.lightgrey,
26	['&.active,&:hover']: {
27	borderColor: theme.palette.grey[50],
28	boxShadow: '0 1px 6px rgba(0, 0, 0, 0.15)'
29	},
30	['&.active']: {
31	backgroundColor: isDarkMode(theme.palette.mode) ? theme.palette.grey[50] : theme.palette.grey[400]	4!
32	},
33	'&.addon': {
34	alignItems: 'center',
35	columnGap: 10,
36	display: 'grid',
37	gridTemplateColumns: 'max-content minmax(150px, min-content) 1fr max-content',
38	height: 'initial',
39	marginTop: 10,
40	minWidth: 550,
41	width: 'initial'
42	},
43	'&.addon.upgrade': {
44	gridTemplateColumns: 'max-content minmax(120px, min-content) minmax(120px, min-content) 1fr max-content'
45	}
46	},
47	price: { fontSize: '1rem' }
48	}));
49
50	export const PlanSelection = ({ currentPlan = PLANS.os.id, isTrial, offerValid, offerTag, setUpdatedPlan, updatedPlan }) => {	6✔
51	const { classes } = useStyles();	3✔
52	const canUpgrade = plan => Object.keys(PLANS).indexOf(plan) >= Object.keys(PLANS).indexOf(currentPlan);	18✔
53	const onPlanSelect = plan => (isTrial \|\| canUpgrade(plan) ? setUpdatedPlan(plan) : undefined);	3!
54	return (	3✔
55	<>
56	<h3 className="margin-top">{isTrial ? '1. Choose a plan' : 'Plans'}</h3>	3!
57	<div className="flexbox space-between" style={{ paddingBottom: 15 }}>
58	{Object.values(PLANS).map(item => (
59	<div	9✔
60	key={item.id}
61	className={`planPanel ${classes.planPanel} ${updatedPlan === item.id ? 'active' : ''} ${isTrial \|\| canUpgrade(item.id) ? '' : 'muted'}`}	36!
62	onClick={() => onPlanSelect(item.id)}	×
63	>
64	{!isTrial && canUpgrade(item.id) && (	27✔
65	<div className={`uppercased align-center muted ${classes.planNote}`}>{item.id === currentPlan ? 'current plan' : 'upgrade'}</div>	9✔
66	)}
67	<h4>
68	{item.name} {item.offer && isTrial && offerValid ? offerTag : null}	24!
69	</h4>
70	<div>
71	{item.offer && isTrial && offerValid ? (	24!
72	<>
73	<div className={`link-color bold ${classes.price}`}>{item.offerprice}</div>
74	<div className="pre-line">{item.price2}</div>
75	</>
76	) : (
77	<>
78	<div className={`link-color bold ${classes.price}`}>{item.price}</div>
79	<div>{item.deviceCount}</div>
80	</>
81	)}
82	</div>
83	<ul className="unstyled">
84	{item.features.map((feature, index) => (
85	<li key={`${item.id}-feature-${index}`}>	15✔
86	<InfoText variant="dense">{feature}</InfoText>
87	</li>
88	))}
89	</ul>
90	</div>
91	))}
92	</div>
93	</>
94	);
95	};
96
97	export default PlanSelection;

mendersoftware / gui / 1113439055

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous