React Strategy Pattern (Problem)

This sandbox has been generated!

huy-ta

310.8k

Edit Sandbox

.codesandbox

public

src

components

services

types

App.tsx

index.tsx

styles.css

.prettierrc

package.json

tsconfig.json

react17.0.2

react-dom17.0.2

react-scripts4.0.0

Open Sandbox

App.tsx

, priceString].join('');\n case Currency.VND:\n return [priceString, 'VND'].join(' ');\n case Currency.YEN:\n return ['¥', priceString].join('');\n case Currency.SUSD:\n return ['S

, priceString].join('');\n }\n};\n\nexport const getDiscountMessage = (\n country: Country,\n currency: Currency,\n discountedPrice: number\n) =\u003E {\n const formattedPrice = formatPriceByCurrency(discountedPrice, currency);\n\n switch (country) {\n case Country.VIETNAM:\n return `The price has been discounted by ${formattedPrice} because you come from Vietnam.`;\n case Country.JAPAN:\n return `We have discounted the price by ${formattedPrice} thanks to the support from Japan's government.`;\n default:\n return `It's lucky that you come from ${country}, because we're running a program that discounts the price by ${discountedPrice}.`;\n }\n};\n","id":"mod_A9gtUS7b2qyHopfhFG9Amz","is_binary":false,"title":"price.ts","sha":null,"inserted_at":"2022-11-17T07:21:15","updated_at":"2024-06-01T01:19:29","upload_id":null,"shortid":"q6Om3","source_id":"src_AFxdZarXnzYnJDjTZWnoNS","directory_shortid":"gL4P9"},{"code":"import React from 'react';\r\n\r\nimport { getDiscountMessage, formatPriceByCurrency } from '..\u002Fservices\u002Fprice';\r\nimport { Country, Currency } from '..\u002Ftypes';\r\n\r\nimport styles from '.\u002FPricingCardBody.module.css';\r\n\r\ninterface PricingCardBodyProps {\r\n price: number;\r\n currency: Currency;\r\n country?: Country;\r\n}\r\n\r\nconst PricingCardBody: React.FC\u003CPricingCardBodyProps\u003E = ({\r\n price,\r\n currency,\r\n country\r\n}) =\u003E {\r\n const discountedRatio =\r\n country === Country.VIETNAM ? 0.4 : country === Country.JAPAN ? 0.2 : 0;\r\n const isDiscounted = discountedRatio \u003E 0;\r\n const finalPrice = price * (1 - discountedRatio);\r\n const discountedPrice = price - finalPrice;\r\n\r\n return (\r\n \u003Cdiv className={styles.body}\u003E\r\n \u003Ch1\u003E{formatPriceByCurrency(finalPrice, currency)}\u003C\u002Fh1\u003E\r\n {isDiscounted && country && (\r\n \u003Cdiv className={styles.discount}\u003E\r\n {getDiscountMessage(country, currency, discountedPrice)}\r\n \u003C\u002Fdiv\u003E\r\n )}\r\n \u003Cp\u003ELearn the essential skills for modern fullstack app development.\u003C\u002Fp\u003E\r\n \u003Cbutton className={styles.buyButton}\u003EGet started\u003C\u002Fbutton\u003E\r\n \u003C\u002Fdiv\u003E\r\n );\r\n};\r\n\r\nexport default PricingCardBody;\r\n","id":"mod_Hm8CSvCzPhAcShywLrvGgm","is_binary":false,"title":"PricingCardBody.tsx","sha":null,"inserted_at":"2022-11-10T14:29:00","updated_at":"2024-06-01T01:20:09","upload_id":null,"shortid":"71EAr","source_id":"src_AFxdZarXnzYnJDjTZWnoNS","directory_shortid":"lVp41"}],"team":{"id":"ws_GwPVvNefLp5PyM3yd6NgM8","name":"huy-ta","settings":{"ai_consent":{"public_sandboxes":false,"private_sandboxes":false}},"subscription_type":null,"avatar_url":"https:\u002F\u002Favatars1.githubusercontent.com\u002Fu\u002F24670327?v=4"},"template":"create-react-app","restricted":false,"picks":[],"base_git":null,"draft":false,"version":174,"original_git_commit_sha":null,"author":{"id":"user_J1XFm8RZdDzAqAqFqYVeHV","name":"Will T.","username":"will-t","avatar_url":"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F24670327?v=4","personal_workspace_id":"ws_GwPVvNefLp5PyM3yd6NgM8","subscription_plan":null,"subscription_since":null},"directories":[{"id":"dir_3be1evLLZRjkzvmV8kYy98","title":"public","inserted_at":"2022-11-10T14:19:25","updated_at":"2018-12-18T10:31:20","shortid":"rgkK4","source_id":"src_AFxdZarXnzYnJDjTZWnoNS","directory_shortid":null},{"id":"dir_22768M9dE4dkRTCBsR8fZd","title":"src","inserted_at":"2022-11-10T14:19:25","updated_at":"2018-12-18T10:31:20","shortid":"GXOoy","source_id":"src_AFxdZarXnzYnJDjTZWnoNS","directory_shortid":null},{"id":"dir_BtqFEH7Lgq8NYuTQ19koUL","title":".codesandbox","inserted_at":"2022-11-10T14:19:25","updated_at":"2020-11-11T14:56:45","shortid":"HyBho_YKP","source_id":"src_AFxdZarXnzYnJDjTZWnoNS","directory_shortid":null},{"id":"dir_Sb9oAgxLCWJgWxSVH5g4Pn","title":"components","inserted_at":"2022-11-10T14:19:41","updated_at":"2022-11-10T14:19:41","shortid":"lVp41","source_id":"src_AFxdZarXnzYnJDjTZWnoNS","directory_shortid":"GXOoy"},{"id":"dir_5BDyvApotXNNuS5QfromFi","title":"types","inserted_at":"2022-11-10T14:50:01","updated_at":"2022-11-10T14:50:01","shortid":"rvKvp","source_id":"src_AFxdZarXnzYnJDjTZWnoNS","directory_shortid":"GXOoy"},{"id":"dir_VuMVRwHDEuvpcSSNT5xUJE","title":"services","inserted_at":"2022-11-17T07:21:10","updated_at":"2024-06-01T01:18:54","shortid":"gL4P9","source_id":"src_AFxdZarXnzYnJDjTZWnoNS","directory_shortid":"GXOoy"}],"authorization":"read","settings":{"ai_consent":null},"pr_number":null,"forked_from_sandbox":{"alias":"react-typescript-xlpsg","id":"xlpsg","title":"React Typescript","template":"create-react-app","inserted_at":"2021-04-14T09:12:52","updated_at":"2021-04-14T09:12:52","git":null,"privacy":0,"custom_template":null},"collection":false,"preview_secret":null,"screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002Fh59r02\u002F174.png","is_frozen":false,"permissions":{"prevent_sandbox_export":false,"prevent_sandbox_leaving":false},"forked_template":{"id":"sbtempl_ML2Hjiin6f2GyPJ1P2Unqg","title":"React (TS)","color":"#61DAFB","v2":false,"url":null,"published":false,"icon_url":null,"official":false},"view_count":310845,"npm_registries":[],"like_count":0,"alias":"react-strategy-pattern-problem-h59r02","git":null,"fork_count":18,"external_resources":[],"ai_consent":false,"user_liked":false,"entry":"src\u002Findex.js","tags":[],"updated_at":"2024-06-01T01:22:29","title":"React Strategy Pattern (Problem)","inserted_at":"2022-11-10T14:19:25","id":"h59r02","always_on":false,"privacy":0,"source_id":"src_AFxdZarXnzYnJDjTZWnoNS","room_id":null,"owned":false,"restrictions":{"free_plan_editing_restricted":false,"live_sessions_restricted":true},"original_git":null,"is_sse":false,"forked_template_sandbox":{"alias":"react-ts-react-ts","id":"react-ts","title":"React (TS)","template":"create-react-app","inserted_at":"2018-12-18T10:31:20","updated_at":"2024-08-19T10:30:06","git":null,"privacy":0,"custom_template":{"id":"sbtempl_ML2Hjiin6f2GyPJ1P2Unqg","title":"React (TS)","color":"#61DAFB","v2":false,"url":null,"published":false,"icon_url":null,"official":false}},"custom_template":null};