Skip to content

I
ivrnet_payment
Commit 5e39be8a authored by Bilal's avatar Bilal
Browse files
Options

Updated designs

parent 18c07b99
Pipeline #9502 failed with stage
    Show whitespace changes
    Inline Side-by-side
    Showing with 886 additions and 273 deletions
    package-lock.json
    View file @ 5e39be8a
    ......@@ -21,6 +21,7 @@
    "bootstrap": "^5.3.2",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    ......
    src/App.js
    View file @ 5e39be8a
    import logo from './ivrnet.png';
    import TelepayForm from './component/Telepay';
    import './App.css';
    import 'bootstrap/dist/css/bootstrap.min.css';
    import { CustomNav } from './component/CustomNav';
    import { Telepay } from './component/Telepay';
    function App() {
    return (
    <div className='App'>
    <div className='row m-0 p-0'>
    <div className='d-large position-fixed col-md-2 h-100 logo-back'>
    <div className='mb-2'>
    <img src={logo} className='App-logo' alt='logo' />
    </div>
    <h3 className='text-white'>Ivrnet</h3>
    </div>
    <div className='d-small'>
    <div className='mb-2'>
    <img src={logo} className='App-logo' alt='logo' />
    </div>
    <h3 className='text-white'>Ivrnet</h3>
    </div>
    <div className='offset-md-3 col-md-8'>
    <TelepayForm />
    </div>
    </div>
    <CustomNav></CustomNav>
    <main className={'main-section'}>
    <Telepay />
    </main>
    </div>
    );
    }
    ......
    src/component/CustomNav.jsx 0 → 100644
    View file @ 5e39be8a
    import logo from '../logo.png';
    import React, { useState, useEffect } from 'react';
    import './style.css';
    export const CustomNav = ({ className = '' }) => {
    const [isScrolled, setIsScrolled] = useState(false);
    useEffect(() => {
    const handleScroll = () => {
    const scrollTop = window.scrollY;
    const threshold = 120;
    setIsScrolled(scrollTop >= threshold);
    };
    window.removeEventListener('scroll', handleScroll);
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => {
    window.removeEventListener('scroll', handleScroll);
    };
    }, []);
    return (
    <div className={`sidebar-b ${className} ${isScrolled ? 'scrolled' : ''}`}>
    <div className='group'>
    <div className='text-wrapper'>Clik2pay</div>
    <img className='image' src={logo} alt={''}/>
    </div>
    <div className='content'>
    <div className='tagline'>
    <p className='div m-0'>
    Telepay will meet your organization’s over-the-phone payment needs today and into the future.
    </p>
    </div>
    </div>
    </div>
    );
    };
    src/component/PrimaryButton.jsx 0 → 100644
    View file @ 5e39be8a
    import PropTypes from 'prop-types';
    import React from 'react';
    import './style.css';
    export const PrimaryButton = ({ label = 'Label', submitted = false }) => {
    return (
    <button disabled={submitted} className='primary-button' type={'submit'}>
    <div>{label}</div>
    </button>
    );
    };
    PrimaryButton.propTypes = {
    label: PropTypes.string,
    onClick: PropTypes.func,
    submitted: PropTypes.bool,
    };
    src/component/Telepay.js
    View file @ 5e39be8a
    import React, { useState } from 'react';
    import LoadingButton from '@mui/lab/LoadingButton';
    import { TextField, Typography, Paper, Snackbar, IconButton, Alert, Box } from '@mui/material';
    import './Pay.css';
    import { AddOutlined, CloseOutlined, DeleteOutline } from '@mui/icons-material';
    import React from 'react';
    import { useState } from 'react';
    import { PrimaryButton } from './PrimaryButton';
    import { TextField } from './TextField';
    import { Textarea } from './TextArea';
    import './style.css';
    import { Alert, IconButton, Snackbar } from '@mui/material';
    import { CloseOutlined } from '@mui/icons-material';
    const TelepayForm = () => {
    export const Telepay = () => {
    const [error, setError] = useState(null);
    const [success, setSuccess] = useState(null);
    const [submitted, setSubmitted] = React.useState(false);
    const [errorSnackbarOpen, setErrorSnackbarOpen] = React.useState(false);
    const [formData, setFormData] = useState({
    first_name: '',
    last_name: '',
    ......@@ -21,8 +26,6 @@ const TelepayForm = () => {
    { description: '', amount: '' },
    ],
    });
    const [errorSnackbarOpen, setErrorSnackbarOpen] = React.useState(false);
    const [submitted, setSubmitted] = React.useState(false);
    const handleChange = (field, value) => {
    setFormData({
    ......@@ -41,6 +44,21 @@ const TelepayForm = () => {
    });
    };
    const handleDeleteLineItem = (index) => {
    if (formData.line_items.length <= 1) {
    setError('1 line item is needed');
    setErrorSnackbarOpen(true);
    return;
    }
    const updatedLineItems = [...formData.line_items];
    updatedLineItems.splice(index, 1);
    setFormData({
    ...formData,
    line_items: updatedLineItems,
    });
    };
    const handleAddProduct = () => {
    setFormData({
    ...formData,
    ......@@ -51,6 +69,7 @@ const TelepayForm = () => {
    const handleSubmit = async (e) => {
    setSubmitted(true);
    e.preventDefault();
    console.log(formData);
    try {
    const response = await fetch('https://callback-click2pay.ivrnet.com/callback/post_data/', {
    ......@@ -76,24 +95,8 @@ const TelepayForm = () => {
    setSubmitted(false);
    }
    };
    const handleDeleteLineItem = (index) => {
    if (formData.line_items.length <= 1) {
    setError('1 line item is needed');
    setErrorSnackbarOpen(true);
    return;
    }
    const updatedLineItems = [...formData.line_items];
    updatedLineItems.splice(index, 1);
    setFormData({
    ...formData,
    line_items: updatedLineItems,
    });
    };
    return (
    <div>
    <form onSubmit={handleSubmit}>
    <Snackbar
    open={errorSnackbarOpen}
    autoHideDuration={3000}
    ......@@ -120,237 +123,136 @@ const TelepayForm = () => {
    {error}
    </Alert>
    </Snackbar>
    <form onSubmit={handleSubmit}>
    <Paper elevation={1} sx={{ padding: 3, marginBottom: 4 }}>
    <Typography variant='h5' gutterBottom>
    Payment Details
    </Typography>
    <div className='form-group row mb-4'>
    <div className='col-md-2 center-label'>
    <label htmlFor='firstName' className='form-label mt-1'>First Name</label>
    </div>
    <div className='col-md-9'>
    <div className='page'>
    <div className='form'>
    <TextField
    id='firstName'
    className='design-component-instance-node'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label='First Name'
    placeholder='Enter your first name'
    variant='outlined'
    fullWidth
    fieldType={'first_name'}
    value={formData.first_name}
    onChange={(e) => handleChange('first_name', e.target.value)}
    />
    </div>
    </div>
    <div className='form-group row mb-4'>
    <div className='col-md-2 center-label'>
    <label htmlFor='lastName' className='form-label mt-1'>Last Name</label>
    </div>
    <div className='col-md-9'>
    <TextField
    id='lastName'
    className='design-component-instance-node'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label='Last Name'
    placeholder='Enter your last name'
    variant='outlined'
    fullWidth
    fieldType={'last_name'}
    value={formData.last_name}
    onChange={(e) => handleChange('last_name', e.target.value)}
    />
    </div>
    </div>
    <div className='form-group row mb-4'>
    <div className='col-md-2 center-label'>
    <label htmlFor='address' className='form-label mt-1'>Address</label>
    </div>
    <div className='col-md-9'>
    <TextField
    id='address'
    className='design-component-instance-node'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label='Address'
    autoComplete='address'
    placeholder='Enter your address'
    variant='outlined'
    fullWidth
    value={formData.address}
    onChange={(e) => handleChange('address', e.target.value)}
    fieldType={'address'}
    value={formData.address}
    />
    </div>
    </div>
    <div className='form-group row mb-4'>
    <div className='col-md-2 center-label'>
    <label htmlFor='city' className='form-label mt-1'>City</label>
    </div>
    <div className='col-md-9'>
    <TextField
    id='city'
    className='design-component-instance-node'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label='City'
    placeholder='Enter your city'
    variant='outlined'
    fullWidth
    value={formData.city}
    onChange={(e) => handleChange('city', e.target.value)}
    fieldType={'city'}
    value={formData.city}
    />
    </div>
    </div>
    <div className='form-group row mb-4'>
    <div className='col-md-2 center-label'>
    <label htmlFor='province' className='form-label mt-1'>Province</label>
    </div>
    <div className='col-md-9'>
    <TextField
    id='province'
    className='design-component-instance-node'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label='Province'
    placeholder='Enter your province'
    variant='outlined'
    fullWidth
    value={formData.province}
    onChange={(e) => handleChange('province', e.target.value)}
    fieldType={'province'}
    value={formData.province}
    />
    </div>
    </div>
    <div className='form-group row mb-4'>
    <div className='col-md-2 center-label'>
    <label htmlFor='country' className='form-label mt-1'>Country</label>
    </div>
    <div className='col-md-9'>
    <TextField
    id='country'
    className='design-component-instance-node'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label='Country'
    placeholder='Enter your country'
    variant='outlined'
    autoComplete='country'
    fullWidth
    value={formData.country}
    onChange={(e) => handleChange('country', e.target.value)}
    fieldType={'country'}
    value={formData.country}
    />
    </div>
    </div>
    <div className='form-group row mb-4'>
    <div className='col-md-2 center-label'>
    <label htmlFor='email' className='form-label mt-1'>Email</label>
    </div>
    <div className='col-md-9'>
    <TextField
    id='email'
    className='design-component-instance-node'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label='Email'
    placeholder='Enter your email'
    variant='outlined'
    autoComplete='email'
    fullWidth
    value={formData.email}
    type='email'
    inputType='email'
    onChange={(e) => handleChange('email', e.target.value)}
    fieldType={'email'}
    value={formData.email}
    />
    </div>
    </div>
    <div className='form-group row mb-4'>
    <div className='col-md-2 center-label'>
    <label htmlFor='phone' className='form-label mt-1'>Phone</label>
    </div>
    <div className='col-md-9'>
    <TextField
    id='phone'
    label='Phone'
    placeholder='Enter your phone number'
    autoComplete='phone'
    variant='outlined'
    fullWidth
    value={formData.phone}
    onChange={(e) => handleChange('phone', e.target.value)}
    />
    </div>
    </div>
    <div className='form-group row mb-4'>
    <div className='col-md-2 center-label'>
    <label htmlFor='description' className='form-label mt-1'>Description</label>
    </div>
    <div className='col-md-9'>
    <TextField
    id='description'
    <Textarea
    className='design-component-instance-node'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label='Description'
    placeholder='Enter description'
    variant='outlined'
    fullWidth
    fieldType={'description'}
    value={formData.description}
    onChange={(e) => handleChange('description', e.target.value)}
    required
    />
    </div>
    </div>
    </Paper>
    <Paper elevation={1} sx={{ padding: 3, marginBottom: 4 }}>
    <Typography variant='h5' gutterBottom>
    Line Items
    </Typography>
    <div className='product'>
    <div className='product-section'>Product</div>
    <div className='product-list'>
    {formData.line_items.map((item, index) => (
    <div key={index} className={'product-unit-container'}>
    {formData.line_items.map((lineItem, index) => (
    <div key={index} style={{ marginBottom: '1rem' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '1rem' }}>
    <div className={`product-unit ${index > 0 ? ' mt-4' : ''}`}>
    <div className={'w-100'} key={index}>
    <button type='button' className='btn btn-sm btn-close float-end' aria-label='Close'
    onClick={() => handleDeleteLineItem(index)}>
    </button>
    <TextField
    label='Description'
    placeholder='Description'
    className='w-100'
    value={lineItem.description}
    className='text-field-instance'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label={`Product Name`}
    onChange={(e) => handleProductChange(index, 'description', e.target.value)}
    required
    value={item.description}
    fieldType={`productDescription${index}`}
    />
    <TextField
    label='Amount'
    placeholder='Enter Price'
    type='number'
    className='w-100'
    value={lineItem.amount}
    className='text-field-instance mt-4'
    divClassName='design-component-instance-node-2'
    errorMessage={false}
    helperText={false}
    label={`Price`}
    inputType={'number'}
    value={item.amount}
    onChange={(e) => handleProductChange(index, 'amount', e.target.value)}
    required
    fieldType={`productAmount${index}`}
    />
    <IconButton
    variant='contained'
    color='error'
    onClick={() => handleDeleteLineItem(index)}
    sx={{ marginLeft: '1rem' }}
    >
    <DeleteOutline />
    </IconButton>
    </div>
    </div>
    </div>
    ))}
    <div className='d-flex w-100 justify-content-end'>
    <IconButton
    variant='outlined'
    color='primary'
    onClick={handleAddProduct}
    sx={{ marginBottom: '1rem' }}
    >
    <AddOutlined />
    </IconButton>
    </div>
    </Paper>
    <a className='add-product-link' onClick={handleAddProduct}>Add another product</a>
    </div>
    {success && (
    <Paper elevation={1} style={{ backgroundColor: 'rgb(56, 142, 60)', color: 'white' }}
    sx={{ padding: 3, marginBottom: 4 }}>
    <div className='alert alert-primary w-100' role='alert'>
    Access Code: {success.access_code}
    </Paper>
    </div>
    )}
    <Box sx={{ '& > button': { m: 1 } }}>
    <LoadingButton loading={submitted} type='submit' variant='outlined' color='primary'>
    <span>Submit</span>
    </LoadingButton>
    </Box>
    </form>
    <PrimaryButton label='SUBMIT' submitted={submitted} />
    </div>
    </div>
    </form>
    );
    };
    export default TelepayForm;
    src/component/TextArea.jsx 0 → 100644
    View file @ 5e39be8a
    import PropTypes from 'prop-types';
    import React from 'react';
    import './style.css';
    export const Textarea = (
    {
    fieldType = '',
    required = true,
    helperText = true,
    helperText1 = 'Helper text',
    errorMessage = true,
    label = 'Label',
    errorMessage1 = 'Error message',
    inputType = 'text',
    onChange,
    value = ''
    },
    ) => {
    return (
    <div className='text-field'>
    <div className='label-helper-text'>
    <div className='label'>
    {required && (
    <div className='required'>
    <div className='text-wrapper'>*</div>
    </div>
    )}
    <label htmlFor={fieldType}>{label}</label>
    </div>
    {helperText && (
    <div className='div-wrapper'>
    <div className='helper-text'>{helperText1}</div>
    </div>
    )}
    </div>
    <div className='input-error-message'>
    <textarea id={fieldType} value={value} className='rectangle' type={inputType} required
    onChange={onChange} />
    {errorMessage && (
    <div className='div-wrapper'>
    <div className='error-message'>{errorMessage1}</div>
    </div>
    )}
    </div>
    </div>
    );
    };
    Textarea.propTypes = {
    filled: PropTypes.bool,
    required: PropTypes.bool,
    helperText: PropTypes.bool,
    helperText1: PropTypes.string,
    errorMessage: PropTypes.bool,
    label: PropTypes.string,
    errorMessage1: PropTypes.string,
    inputType: PropTypes.string,
    onChange: PropTypes.func,
    value: PropTypes.string
    };
    src/component/TextField.jsx 0 → 100644
    View file @ 5e39be8a
    import PropTypes from 'prop-types';
    import React from 'react';
    import './style.css';
    export const TextField = (
    {
    required = true,
    helperText = true,
    helperText1 = 'Helper text',
    errorMessage = true,
    label = 'Label',
    errorMessage1 = 'Error message',
    inputType = 'text',
    onChange,
    className = '',
    fieldType = '',
    value = '',
    },
    ) => {
    return (
    <div className={'text-field ' + className}>
    <div className='label-helper-text'>
    <div className='label'>
    {required && (
    <div className='required'>
    <div className='text-wrapper'>*</div>
    </div>
    )}
    <label htmlFor={fieldType}>{label}</label>
    </div>
    {helperText && (
    <div className='div-wrapper'>
    <div className='helper-text'>{helperText1}</div>
    </div>
    )}
    </div>
    <div className='input-error-message'>
    <input id={fieldType} value={value} className='text-input' type={inputType} required onChange={onChange} />
    {errorMessage && (
    <div className='div-wrapper'>
    <div className='error-message'>{errorMessage1}</div>
    </div>
    )}
    </div>
    </div>
    );
    };
    TextField.propTypes = {
    filled: PropTypes.bool,
    required: PropTypes.bool,
    helperText: PropTypes.bool,
    helperText1: PropTypes.string,
    errorMessage: PropTypes.bool,
    label: PropTypes.string,
    errorMessage1: PropTypes.string,
    inputType: PropTypes.string,
    onChange: PropTypes.func,
    fieldType: PropTypes.string,
    value: PropTypes.string,
    };
    src/component/style.css 0 → 100644
    View file @ 5e39be8a
    .header {
    align-items: center;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #00000026;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 48px 0px;
    position: relative;
    width: 934px;
    }
    .header .content {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 480px;
    }
    .header .title {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    position: relative;
    }
    .header .text-wrapper {
    color: #206ea5;
    font-family: 'Source Sans Pro-SemiBold', Helvetica;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    width: fit-content;
    }
    .header .tagline {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    position: relative;
    width: 100%;
    }
    .header .div {
    color: #00000099;
    flex: 1;
    font-family: 'Source Sans Pro-Regular', Helvetica, serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 20px;
    margin-top: -1px;
    position: relative;
    }
    .sidebar-b {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    background: linear-gradient(92deg, rgba(226, 236, 251, 0.50) 0.11%, rgba(252, 244, 224, 0.50) 100%), linear-gradient(180deg, rgba(240, 227, 250, 0.50) 0%, rgba(255, 235, 244, 0.50) 100%), #FFF;
    box-shadow: 0px 0px 4px #00000040;
    display: flex;
    padding: 64px 64px;
    flex-direction: column;
    justify-content: center;
    gap: 48px;
    align-self: stretch;
    transition: 0.4s;
    }
    .sidebar-b .group {
    height: 43.4px;
    margin-left: -1px;
    margin-right: -3px;
    position: relative;
    width: 254px;
    }
    .sidebar-b .text-wrapper {
    color: #333333;
    font-family: 'Arial-Regular', Helvetica, serif;
    font-size: 30px;
    font-weight: 400;
    left: 148px;
    letter-spacing: 0;
    line-height: normal;
    position: absolute;
    top: 8px;
    white-space: nowrap;
    }
    .sidebar-b .image {
    height: 43px;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 140px;
    }
    .sidebar-b .content {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    position: relative;
    width: 100%;
    }
    .sidebar-b .tagline {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    position: relative;
    width: 100%;
    }
    .sidebar-b .div {
    color: #00000099;
    flex: 1;
    font-family: 'Source Sans Pro-Regular', Helvetica;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 20px;
    margin-top: -1px;
    position: relative;
    text-align: center;
    }
    .primary-button {
    display: flex;
    width: 100%;
    height: 40px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 40px;
    background: #206EA5;
    color: #FFFFFF;
    border: 0;
    }
    .primary-button .label {
    color: #ffffff;
    font-family: 'Source Sans Pro-Regular', Helvetica;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3.2px;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    width: fit-content;
    }
    .primary-button:disabled {
    background-color: #206ea5;
    opacity: 0.2;
    }
    .primary-button.default {
    background-color: #206ea5;
    }
    .primary-button.hover {
    background-color: #105484;
    }
    .textarea {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    width: 320px;
    }
    .textarea .label-helper-text {
    align-items: flex-start;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    position: relative;
    }
    .textarea .label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: #333;
    font-family: Source Sans Pro, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    }
    .textarea .required {
    align-items: center;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-color: #cc3300;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    position: relative;
    }
    .textarea .text-wrapper {
    color: #cc3300;
    font-family: 'Arial-Regular', Helvetica;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
    }
    .textarea .div {
    color: #000000;
    font-family: 'Source Sans Pro-Regular', Helvetica;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    width: fit-content;
    }
    .textarea .div-wrapper {
    align-items: flex-start;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    position: relative;
    }
    .textarea .helper-text {
    color: #00000099;
    font-family: 'Source Sans Pro-Regular', Helvetica;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    width: fit-content;
    }
    .textarea .input-error-message {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    position: relative;
    width: 100%;
    }
    .rectangle {
    align-self: stretch;
    background-color: #ffffff;
    border: 1px solid;
    border-color: #00000033;
    border-radius: 4px;
    height: 80px;
    position: relative;
    width: 100%;
    padding: 5px 10px;
    }
    .textarea .error-message {
    color: #cc3300;
    font-family: 'Source Sans Pro-Regular', Helvetica;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    width: fit-content;
    }
    .text-field {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    width: 100%;
    }
    .text-field .label-helper-text {
    align-items: flex-start;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    position: relative;
    }
    .text-field .label {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    justify-content: center;
    position: relative;
    color: #333;
    font-family: Source Sans Pro, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    }
    .text-field .required {
    align-items: center;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-color: #990000;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    position: relative;
    }
    .text-field .text-wrapper {
    color: #cc3300;
    font-family: 'Arial-Regular', Helvetica;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
    }
    .text-field .div {
    color: #000000;
    font-family: 'Source Sans Pro-Regular', Helvetica;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    width: fit-content;
    }
    .text-field .div-wrapper {
    align-items: flex-start;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    position: relative;
    }
    .text-field .helper-text {
    color: #00000099;
    font-family: 'Source Sans Pro-Regular', Helvetica;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    width: fit-content;
    }
    .text-field .input-error-message {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    position: relative;
    width: 100%;
    }
    .text-field .filled {
    align-items: center;
    background: none;
    border: none;
    color: #000000;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: 'Source Sans Pro-Regular', Helvetica;
    font-size: 16px;
    font-weight: 400;
    gap: 10px;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    padding: 0;
    position: relative;
    width: 100%;
    }
    .text-field .error-message {
    color: #cc3300;
    font-family: 'Source Sans Pro-Regular', Helvetica;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1px;
    position: relative;
    width: fit-content;
    }
    .product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    }
    .form {
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    }
    .page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    margin-bottom: 64px;
    }
    .text-wrapper-3 {
    color: #206EA5;
    font-family: Source Sans Pro, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    }
    .product-unit {
    display: flex;
    width: 320px;
    padding: 16px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border-radius: 4px;
    }
    .product-unit-container {
    background: rgba(0, 0, 0, 0.05);
    }
    .sidebar-b.scrolled {
    padding: 16px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    background: linear-gradient(92deg, rgba(226, 236, 251, 0.50) 0.11%, rgba(252, 244, 224, 0.50) 100%), linear-gradient(180deg, rgba(240, 227, 250, 0.50) 0%, rgba(255, 235, 244, 0.50) 100%), #FFF;
    }
    .sidebar-b.scrolled .content {
    display: none;
    }
    .add-product-link {
    color: #206EA5;
    text-decoration: none;
    cursor: pointer;
    font-family: Source Sans Pro, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    }
    .text-input {
    display: flex;
    height: 36px;
    padding: 0px 10px;
    align-items: center;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.20);
    background: #FFF;
    color: #333;
    font-family: Source Sans Pro, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    }
    .product-section {
    color: #333;
    font-family: Source Sans Pro, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    }
    .main-section {
    margin-top: 20rem;
    }
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment