tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/components/account-settings/style.css

@@ -1,200 +0,0 @@
-.account-settings {
-    width: 600px;
-    margin: 0 auto;
-    padding: 70px 0;
-}
-
-.account-settings h2 {
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 29px;
-    color: #000000;
-    position: relative;
-    margin: 0 0 18px 0;
-}
-
-.account-settings h2::before {
-    content: "";
-    width: 54px;
-    height: 2px;
-    background-color: #F28051;
-    position: absolute;
-    left: -65px;
-    top: 13px;
-}
-
-.tab .tab-menu ul {
-    margin: 0;
-    list-style-type: none;
-    padding-left: 0;
-    display: flex;
-    border-bottom: 1px solid #BDBDBD;
-}
-
-.tab .tab-menu {
-    margin-bottom: 45px;
-}
-
-.tab .tab-menu ul li {
-    margin-right: 70px;
-    font-family: Interbold;
-    font-size: 14px;
-    text-align: center;
-    color: #000000;
-    padding-bottom: 5px;
-    margin-bottom: -2px;
-    cursor: pointer;
-}
-
-.tab .tab-menu ul li.active {
-    border-bottom: 3px solid #F28051;
-}
-
-.tab .tab-menu ul li:last-child {
-    margin-right: 0;
-}
-
-.sessions {
-    background-color: #FFFFFF;
-    border-top: 2px solid #F28051;
-    border-bottom: 2px solid #F28051;
-}
-
-.sessions-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 30px;
-    border-bottom: 1px solid #A2A2A2;
-}
-
-.sessions .sessions-item .sessions-info {
-    display: flex;
-    flex-direction: column;
-}
-
-.sessions .sessions-item .sessions-info span {
-    font-family: InterRegular;
-    font-weight: 600;
-    font-size: 14px;
-    color: #000000;
-}
-
-.sessions .sessions-item .sessions-info span:last-child {
-    font-size: 12px;
-    color: #858585;
-}
-
-.sessions-item button {
-    font-family: InterRegular;
-    font-weight: 600;
-    font-size: 14px;
-    color: #F28051;
-    margin: 0;
-    width: 82px;
-    height: 29px;
-    background-color: #ffffff;
-    border: 1px solid #F28051;
-    text-transform: uppercase;
-}
-
-.privacy p {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 19px;
-    letter-spacing: 0.02em;
-    color: #000000;
-}
-
-.privacy .pr-settings {
-    background-color: #ffffff;
-    border-top: 2px solid #F28051;
-    border-bottom: 2px solid #F28051;
-}
-
-.privacy .pr-settings .pr-settings-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 25px;
-    border-bottom: 1px solid #A2A2A2;
-}
-
-.privacy .pr-settings .pr-settings-item:last-child {
-    border-bottom: none;
-}
-
-.pr-settings-item .item-name img {
-    margin-right: 6px;
-}
-
-.pr-settings-item .item-name span {
-    font-family: InterRegular;
-    font-weight: 600;
-    font-size: 14px;
-    text-decoration-line: underline;
-    color: #000000;
-}
-
-.pr-settings-item .item-box span {
-    font-family: InterRegular;
-    font-weight: 600;
-    font-size: 14px;
-    color: #000000;
-    margin-right: 6px;
-}
-
-.pr-settings-item .item-box {
-    display: flex;
-    align-items: center;
-}
-
-
-/*///////////Checkbox///////////////*/
-
-.checkbox-block {
-    display: block;
-    position: relative;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    height: 22px;
-    width: 22px;
-}
-
-/* Hide the browser's default checkbox */
-.checkbox-block input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-}
-
-/* Create a custom checkbox */
-.checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 22px;
-    width: 22px;
-    background-color: #ffffff;
-    border: 1px solid #000000;
-}
-
-/* On mouse-over, add a grey background color */
-.checkbox-block:hover input ~ .checkmark {
-    background-color: #ccc;
-}
-
-/* When the checkbox is checked, add a blue background */
-.checkbox-block input:checked ~ .checkmark {
-    background-color: #F28051;
-}
-
-/* Show the checkmark when checked */
-.checkbox-block input:checked ~ .checkmark:after {
-    display: block;
-}

package/src/components/addonsContainer/AddonComponent.tsx

@@ -1,204 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Field, useFormikContext } from 'formik'
-import _identity from 'lodash/identity'
-import _isEmpty from 'lodash/isEmpty'
-import _isNull from 'lodash/isNull'
-import _map from 'lodash/map'
-import React from 'react'
-
-import {
-  getFieldComponent,
-  getFieldLabel,
-  getValidateFunctions,
-} from '../billing-info-container/utils'
-import { NativeSelectField } from '../common'
-
-interface IAddonComponentProps {
-  classNamePrefix: string;
-  data: any;
-  selectOptions: any;
-  handleAddonChange?: (...res: any) => void;
-  addOnDataWithCustomFields: any;
-  configs: any;
-  values: any;
-  errors: any;
-  useStepperQty?: boolean;
-  siblingIds?: string[];
-  allAddonIds?: string[];
-  maxTotalQuantity?: number;
-  onCustomFieldChange?: (
-    addon: any,
-    groupId: string | number,
-    fieldName: string,
-    value: any
-  ) => void;
-}
-
-const AddonStepper = ({ id, selectOptions, handleAddonChange, classNamePrefix, siblingIds = [], allAddonIds = [], maxTotalQuantity }: any) => {
-  const { values, setFieldValue } = useFormikContext<any>()
-  const qty = Number(values[id] ?? 0)
-  const max = selectOptions?.length > 0 ? selectOptions[selectOptions.length - 1].value : 0
-
-  const totalSelected = allAddonIds.length > 0
-    ? allAddonIds.reduce((sum: number, aid: string) => sum + Number(values[aid] ?? 0), 0)
-    : 0
-
-  const change = (next: number) => {
-    if (next > qty) {
-      if (maxTotalQuantity != null) {
-        allAddonIds.forEach((aid: string) => { if (aid !== id) setFieldValue(aid, 0) })
-      } else {
-        siblingIds.forEach((siblingId: string) => setFieldValue(siblingId, 0))
-      }
-    }
-    setFieldValue(id, next)
-    handleAddonChange(id, next)
-  }
-
-  const incrementDisabled = qty >= max || (maxTotalQuantity != null && totalSelected >= maxTotalQuantity && qty === 0)
-
-  return (
-    <div className={`${classNamePrefix}_stepper`}>
-      <button
-        type="button"
-        className={`${classNamePrefix}_stepper__btn`}
-        onClick={() => change(qty - 1)}
-        disabled={qty <= 0}
-        aria-label="Decrease quantity"
-      >
-        −
-      </button>
-      <span className={`${classNamePrefix}_stepper__count`}>{qty}</span>
-      <button
-        type="button"
-        className={`${classNamePrefix}_stepper__btn`}
-        onClick={() => change(qty + 1)}
-        disabled={incrementDisabled}
-        aria-label="Increase quantity"
-      >
-        +
-      </button>
-    </div>
-  )
-}
-
-const AddonComponent = ({
-  classNamePrefix = '',
-  data,
-  selectOptions,
-  handleAddonChange = _identity,
-  addOnDataWithCustomFields,
-  configs,
-  values,
-  errors,
-  useStepperQty = false,
-  siblingIds = [],
-  allAddonIds = [],
-  maxTotalQuantity,
-  onCustomFieldChange = _identity,
-}: IAddonComponentProps) => {
-  const { id, name, active, stock } = data
-
-  return (
-    <div key={id} className={`${classNamePrefix}_product_select_container`}>
-      <div className={`${classNamePrefix}_product_select_block`} key={name}>
-        {!useStepperQty && <div className={`${classNamePrefix}_product_size`}>{name}</div>}
-        <div className={`${classNamePrefix}_product_qty_select_block`}>
-          {!active || (!_isNull(stock) && stock <= 0) ? (
-            <div className={`${classNamePrefix}_stepper_row`}>
-              <span className={`${classNamePrefix}_stepper_label`}>{name}</span>
-              <div className="sold_out">SOLD OUT</div>
-            </div>
-          ) : (
-            <>
-              <div className={`${classNamePrefix}_product_qty_select`}>
-                {useStepperQty ? (
-                  <div className={`${classNamePrefix}_stepper_row`}>
-                    <span className={`${classNamePrefix}_stepper_label`}>{name}</span>
-                    <AddonStepper
-                      id={id}
-                      selectOptions={selectOptions}
-                      handleAddonChange={handleAddonChange}
-                      classNamePrefix={classNamePrefix}
-                      siblingIds={siblingIds}
-                      allAddonIds={allAddonIds}
-                      maxTotalQuantity={maxTotalQuantity}
-                    />
-                  </div>
-                ) : (
-                  <Field
-                    name={id}
-                    selectOptions={selectOptions}
-                    component={NativeSelectField}
-                    onChange={(e: any) => {
-                      const { value } = e.target
-                      handleAddonChange(id, value)
-                    }}
-                  />
-                )}
-              </div>
-              {!_isEmpty(addOnDataWithCustomFields?.fields) && values[id] > 0 && (
-                <div className="add-on-fields">
-                  <h2>{addOnDataWithCustomFields.label}</h2>
-                  {_map(addOnDataWithCustomFields.fields, group => {
-                    const { id, groupClassname, groupItems } = group
-                    return (
-                      <div key={id}>
-                        <div className={groupClassname}>
-                          {_map(groupItems, element => {
-                            const fieldName = `${data.id}-${id}-${element.name}`
-                            const Comp = getFieldComponent(element)
-                            const type =
-                              element.type === 'radio' || element.type === 'checkbox'
-                                ? undefined
-                                : element.type
-                            return (
-                              <div className={element.className} key={fieldName}>
-                                <Field
-                                  {...element}
-                                  name={fieldName}
-                                  validate={getValidateFunctions(
-                                    element,
-                                    [],
-                                    values,
-                                    errors
-                                  )}
-                                >
-                                  {({ field, form }: any) => {
-                                    const handleChange = (e: any) => {
-                                      // extract value from native events or custom widgets
-                                      const v = e?.target?.value ?? e?.value ?? e // allow custom components to pass raw value
-                                      form.setFieldValue(field.name, v)
-                                      onCustomFieldChange?.(data, id, element.name, v)
-                                    }
-
-                                    return (
-                                      <Comp
-                                        {...element}
-                                        field={field}
-                                        form={form}
-                                        type={type}
-                                        label={getFieldLabel(element, configs)}
-                                        onChange={handleChange}
-                                      />
-                                    )
-                                  }}
-                                </Field>
-                              </div>
-                            )
-                          })}
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default AddonComponent